COPY SOURCE CODE FOR ytvideo-play.html, test

Before reading this post you should see the post:
http://phanhung20.blogspot.com/2021/02/copy-source-code-for-ytvideo-searchhtml.html
The file ytvideo-search.html can make all javascript files of the form objpage- ... .js. Those js files will be loaded by the file ytvideo-play.html for playing youtube videos.

Tap COPY to create the file objpage-all.js




Tap COPY to create the file objpage-herald-winkler.js



Tap button COPY for copying the source code of ytvideo-play.html to clipboard.




<!DOCTYPE html>
<html>
    <meta charset=utf-8>
    <meta name="author" content="pvhung20">
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     <script src="objpage-all.js"></script>
    <style>
        body {
            font-family: Arial;
            font-size: 12pt
            margin: 0px;
            padding: 0px;
        }
        .bar {
            width: 576px;
            height: 20px;
            background-color: #A4D3EE;
            color: black;
            font-weight: bold;
            padding: 6px;
            border-width: 5px;
            border-style: outset;
        }
        .bargreen {
            width: 576px;
            height: 20px;
            background-color: #A6D785;
            color: black;
            font-weight: bold;
            padding: 6px;
            border-width: 5px;
            border-style: outset;
        }
        input[type="button"],
        button {
            cursor: pointer;
            padding: 0px;
            font-size: 16pt;
        }
        input[type=checkbox] {
            width: 24px;
            height: 24px;
        }
        a {
            color: blue;
            text-decoration: none;
        }
        td {
            font-size: 12pt;
            vertical-align: top;
            border: 1px gray solid;
        }
        textarea {
            font-size: 14pt;
        }
        #progress7{
        font-weight:bold;
        color:red;
        font-size:14pt;
        }
        #info7{font-size:14pt;}

         .codeSp{color:#CC6600}
    </style>
    <body>

        <div align="center">
            <div id="player" style="width:600px;background-color:black;">
            </div>
            <div id="vtitle" style="text-align:center;width:600px;height:51px;color:white;background-color:#333333;padding-top:7px;margin-top:-5px">
            </div>
            <div style="margin:12px">
                <span id="currentSp"></span>&nbsp;/&nbsp;
                <span id="durationSp"></span>
            </div>
		 <button onclick="$('#helpDiv').toggle('slow')">HELP (?)</button>
            <input type="button" onclick="bigNormal()" value="Size">
            <input type="button" onclick="player.pauseVideo();" value="Pause">
            <input type="button" onclick="player.playVideo();" value="Play">
            <button id="nBut" type="button" onclick="nextButton()">Next</button>
           <br>
		 <input type="checkbox" class="chk1">&nbsp;
		<span style="font-size:14pt">
		Like ckeckbox (mark the currently playing video)<br>
		<span style="color:red; font-size:12pt">
		Before loading another objpage file, tap UPDATE for making
		objselect file.
		</span>
          </span><br>
           <br>
	   <div id="helpDiv" style="display:none;width:590px;height:600px;overflow:auto;background-color:#ffffe0;text-align:left;padding:10px;line-height:150%; font-size:14pt; border:1px solid gray; margin-bottom:16px">
	<p style="color:red">After reading you can tap button 
	<button>HELP (?)</button>
	once again to hide this help contain.</p>
<img width="95%" src="IMG_4560.jpg" style="border:1px solid gray">
<br>
File ytvideo-play.html performs the following tasks:<br>
- load a file in the form of objpage- ... js and create control tables.
<br>
- play videos continuosly one after another.
<br>
- While listening, watching videos you can tap Like checkbox to choose the videos you like.
<br>
-Finally before you load the new file, remember to tap UPDATE to create the following content:
<br>
<span class="codeSp">
<br>
objselect = <br>
[20,49,74,98,119,124,147,160,168,178,236,241,293,311,469,519];
</span>
<br><br>
<img width="95%" src="IMG_4563.jpg" style="border:1px solid gray">
<br><br>
	   </div>
		
            <div class="bar">
                A- SIMULATING SEARCH FOR MAXIMUM NUMBER OF ITEMS
			<a href="#" onclick="search1HideShow(this); return false">&nbsp;&nbsp;&nbsp;&nbsp;Hide this</a>
            </div>

		 <div id="search7Div">
		The following 4 videos are ready for playing (don't use Like checkbox and Next);
            <br>
		  <a style="font-size:14pt;" href="#" onclick="player.loadVideoById('77YwsoKsNV8',  270, 'default'); return false">Relaxing Music</a>,&nbsp;
            <a style="font-size:14pt;" href="#" onclick="player.loadVideoById('JgHXVJb5Ztw', 3435, 'default'); return false">Bolero for Lovers</a>,&nbsp;
            <a style="font-size:14pt;" href="#" onclick="player.loadVideoById('TibXopReykQ', 382, 'default'); return false">Romantic Guitar</a>,&nbsp;
            <a style="font-size:14pt;" href="#" onclick="player.loadVideoById('o5QjDboEfvI', 'default'); return false">Vienna Hallstatt</a>
            <br><br>
		<span style="font-size:14pt"><span style="color:red; font-weight:bold">
		To start:&nbsp;</span>Choose a file (objpage- ...js) then tap button LOAD JS</span>
            <br>
            <input type="text" value="objpage-herald-winkler.js" id="jsfile" size="48" style="font-size:12pt">
            <button onclick="loadObjpage()">LOAD JS</button>
            <br><br>
            <div id="list7" style="width:590px;height:120px;overflow:auto;background-color:#EEEEEE;text-align:left;padding:10px;line-height:160%; font-size:12pt; border:1px solid gray">
            </div>
            <br>
           <textarea id="lenArea" style="width:580px; height:26px">
</textarea>
            <br>
            <span id="progress7"></span> &nbsp;
            <span id="info7"></span>
            <br><br>
            <button onclick="make7()">MAKE CONTROLS</button>
            <br>
		 </div> 
            <div class="bargreen">
                B1- PLAY SINGLE VIDEOS
            </div>
            <br>
            <button onclick="vcheckedTop('vbody7')">VCHECKED TOP</button>
            <button onclick="tTop('vbody7')">TOP</button>
            <button onclick="tCur()">CURRENT</button>
            <button onclick="tBott('vbody7')">BOTTOM</button>
            <br>
            <br>
            <div id="div7" style="padding-top:4px;width:598px;height:300px;background-color:#DDDDDD;border:1px solid gray; overflow:auto;font-size:12pt">
                <table width="594" hight="250" style="color:black">
                    <tbody id="vbody7">
                    </tbody>
                </table>
            </div>
            <br>
            <div class="bargreen">
                B2- PLAY PLAYLISTS
            </div>
            <br>
            <div id="pdiv7" style="padding-top:4px;width:598px;height:300px;background-color:#DDDDDD;border:1px solid gray; overflow:auto;font-size:12pt">
                <table width="594" hight="250" style="color:black">
                    <tbody id="pbody7"></tbody>
                </table>
            </div>
            <br>
            <div class="bargreen">
                B3- FOR MAKING objselect-....js FILE
            </div>
            <br>
            <span style="font-weight:bold">
		  Remember this file name:&nbsp;
		  <span id="remember" style="color:red"></span>
            </span>
            <br>
            <button onclick="rowsUpdate(true)">UPDATE</button>
            <button onclick="copy('area7a')">COPY</button>
            <br><br>
            <textarea id="area7a" style="width:580px; height:150px">
</textarea>
            <br><br>
            <div class="bargreen">
                B4- VIEW THE CONTAIN OF WORKING JAVASCRIPT FILES
            </div>
            <br>
            <span id="objpageSp" style="font-size:14pt"></span>
            <br><br>
            <textarea id="area7" style="width:580px; height:240px">
</textarea>
            <br><span style="font-size:14pt">
The contain of the file objselect ... .js<br>
            at loading, before updating.<br>
If you see objselect = [], it means the file objselect ... .js doesn't exist.
            </span></br>
            <textarea id="area8" style="width:580px; height:130px">
</textarea>
            <br><span style="font-size:14pt">
The contain of the file objpage-all.js at loading
		  </span><br>
            <textarea id="area9" style="width:580px; height:130px">
</textarea>
            <br>
           <br>
            <div class="bargreen">
                B5- VIEW TWO JSON PAGES FROM 
                <span id="objpageSp1"></span>
            </div>
The page before the last
		 <br>
<span id="itemsLength1"></span>
<br>
<textarea id="area10a" style="width:580px; height:300px">
</textarea>
            <br>
The last page
<br>
<span id="itemsLength"></span>
<br>
<textarea id="area10" style="width:580px; height:300px">
</textarea>
            <br><br>
            </div>

            <script>
function pageShow(){
          ss = lenArray.join(', ');
          $('#lenArea').val(ss);
		nn = objpage.page.length;
		num = nn - 1;
		st = JSON.stringify(objpage.page[num], null, 2);
		$('#area10').val(st);
		objtest = JSON.parse(st);
		itLen = objtest.items.length;
		$('#itemsLength').html('page[' + num + ']; ' + itLen + ' items');
		st1 = JSON.stringify(objpage.page[num - 1], null, 2);
		$('#area10a').val(st1);
		objtest1 = JSON.parse(st1)
		itLen1 = objtest1.items.length;
		$('#itemsLength1').html('page[' + (num - 1) + ']; ' + itLen1 + ' items');
}

                function readyTermJS(term) {
                    $("#jsfile").val(term);
                }

			function search1HideShow(obj){
				$('#search7Div').toggle();
				disp = $('#search7Div').css('display');
				if(disp == 'none'){
					$(obj).html('&nbsp;&nbsp;&nbsp;&nbsp;Show this')
				}else{
					$(obj).html('&nbsp;&nbsp;&nbsp;&nbsp;Hide this');
				}
			}
			
			function makeList(){
				len = objpageAll.length;
				ss = '';
				for(i=0; i<len; i++){
					ss += '<a href="#" onclick="readyTermJS(\'' +
					objpageAll[i] + '\'); return false">' + 
					objpageAll[i] + '</a><br>';
				}
				$('#list7').html(ss)
			}

                /////////////// VIDEO PLAYER MAKING ////////////////////////

                $(document).ready(function() {
                    makeList();
                    setInterval(myTime, 100);
				$('.chk1').change(function(){
			     bool = $(this).prop("checked");
		          $(curObj).closest('tr').find('.vselected').prop("checked", bool);
				});
                });

                normalW = '580';
                normalH = '369';
                var player;
                startvid = '77YwsoKsNV8';
                var tag = document.createElement('script');
                tag.src = "http://www.youtube.com/player_api";
                var firstScriptTag = document.getElementsByTagName('script')[0];
                firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

                function onYouTubePlayerAPIReady() {
                    player = new YT.Player('player', {
                        width: normalW,
                        height: normalH,
                        videoId: startvid,
                        playerVars: {
                            'autoplay': 0,
                            'rel': 0,
                            'showinfo': 0,
                            'showsearch': 0,
                        },
                        events: {
                            'onStateChange': onPlayerStateChange,
                            'onError': onPlayerError
                        }
                    });
                }

                function onPlayerError(error) {
                    nextVid();
                }

                singleVideo = false;
                demo = true;

                function onPlayerStateChange(event) {
                    if (event.data == 0) {
                        playerState = 'ended';
                        nextVid();
                    }

                    switch (event.data) {
                        case YT.PlayerState.PLAYING:
                            if (!singleVideo) {
                                if (demo) {
                                    $('#vtitle').html('');
                                    $('#vtitle').html(player.getVideoData().title);
                                } else {
                                    var aa = $(curObj).closest('tbody').find('a');
                                    var nn = $(aa).index(curObj);
                                    var len = $(aa).length;
                                    $('#vtitle').html((nn + 1) + '/' + len + ': ' + player.getVideoData().title)
                                    listLength = player.getPlaylist().length;
                                    listIndex = player.getPlaylistIndex();
                                }
                            }
                            break;
                    }
                }

                function myTime() {
                    if (player.getPlayerState() == 1) {
                        curTime = player.getCurrentTime();
                        document.getElementById('currentSp').innerHTML = sformat(curTime);
                        document.getElementById('durationSp').innerHTML = sformat(Math.round(player.getDuration()));
                    }
                }

                function sformat(s) {
                    var fm = [
                        Math.floor(Math.floor(s / 60) / 60) % 60, //HOURS
                        Math.floor(s / 60) % 60, //MINUTES
                        Math.floor(s % 60) //SECONDS
                    ];
                    var xx = $.map(fm, function(v, i) {
                        return ((v < 10) ? '0' : '') + v;
                    }).join(':');
                    var yy = xx.replace(/^0:|^00:|^0/g, '');
                    zz = yy.replace(/^0/g, '');
                    return zz
                }

                function bigNormal() {
                    size = $('#player').width();
                    if (size == 600) {
                        $('#player').width('980px');
                        $('#player').height('551px');
                        $('#vtitle').width('980px');
                    } else {
                        $('#player').width('600px')
                        $('#player').height('349px');
                        $('#vtitle').width('600px');
                    }
                }

                ///////////////// PLAY VIDEOS ////////////

                curObj = {}
                singleVideo = false;
                currColor = "#FFE1B2";

                function playVid(obj) {
                    bool = $(obj).closest('tr').find('.vselected').prop('checked');
$('.chk1').prop("checked", bool);
                    if (typeof curObj != 'undefined') {
                        $(curObj).closest('tr').css('background-color', '#DDDDDD');
                    }
                    $(obj).closest('tr').css('background-color', '#FFE1B2');
                    singleVideo = true;
                    curObj = obj;
                    var aa = $(obj).closest('tbody').find('a');
                    // var len11 = $(aa).length;
                    var nn = $(aa).index(obj);
                    var len = $(aa).length;
                    var viTi = $(aa).eq(nn).html();
                    $('#vtitle').html((nn + 1) + '/' + len + ' ' + viTi);
                    var viId = $(aa).eq(nn).attr('title')
                    player.loadVideoById(viId, "default");
                }

                function nextVid() {
                    $(curObj).closest('tr').css('background-color', '#DDDDDD');
                     if (singleVideo) {
                        var aa = $(curObj).closest('tbody').find('a');
                        var nn = $(aa).index(curObj);
                        var num = nn + 1;
                        var len = $(aa).length;
                        if (num == len) {
                            num = 0
                        }
                        var nextObj = $(aa).eq(num)
                        playVid(nextObj);
                    } else {
                        // thuPL();
                    }
                }

                function loadPLId(thi) {
                    singleVideo = false;
                    if (typeof curObj != 'undefined') {
                        $(curObj).closest('tr').css('background-color', '#DDDDDD');
                    }
                    $(thi).closest('tr').css('background-color', '#FFE1B2');
                    curObj = thi;
                    var pid = thi.title;
                    var aa = $(thi).closest('tbody').find('a');
                    var nn = $(aa).index(thi);
                    var len = $(aa).length;
                    $('#vtitle').html((nn + 1) + '/' + len);
                    player.loadPlaylist({
                        'list': pid,
                        'listType': 'playlist',
                        'index': 0,
                        'startSeconds': 0,
                        'suggestedQuality': 'default'
                    });
                }

                function nextButton() {
                    if (singleVideo) {
                        nextVid();
                    } else {
                        nextPL();
                    }
                }

                function nextPL() {
                    if (typeof curObj != 'undefined') {
                        $(curObj).closest('tr').css('background-color', '#DDDDDD');
                    }
                    player.stopVideo();
                    bb = $(curObj).closest('tbody').find('a');
                    var nn = $(bb).index(curObj);
                    var num = nn + 1;
                    singleVideo = false;
                    curObj = $(bb).eq(num);
                    $(curObj).closest('tr').css('background-color', '#FFE1B2');
                    pid = $(curObj).attr('title');
                    player.loadPlaylist({
                        'list': pid,
                        'listType': 'playlist',
                        'index': 0,
                        'startSeconds': 0,
                        'suggestedQuality': 'default'
                    });
                }

                //////////////////// FINAL JS BUILD ////////////////////

                function rowsUpdate(plus) {
                    vcArr = [];
                    var ar = $('#vbody7 a');
                    for (i = 0; i < ar.length; i++) {
                        if (plus) {
                            len = $(ar[i]).closest('tr').find('.vselected:checked').length
                            if (len > 0) {
                                vc7ht = $(ar[i]).closest('tr').find('b').html();
                                vc7ht = vc7ht.replace('.', '');
                                vcArr.push(vc7ht);
                            }
                        }
                    }
                    vcArr1 = vcArr.sort(function(a, b){return a-b});
                    ss = file;
                    ss = ss.replace('objpage', 'objselect');
   				$('#remember').html(ss);
                    helpSt = '/* 1- Tap the button COPY to copy this contain to clipboard.\n' +
				'2- Tap the button x at the top right corner to quit this running file\n' +
				'3- Tap the button + in the bottom left corner to create a new file with the name: '+ ss +
				 '\n and paste there the contain from clipboard */\n\n';
				
                    st1 = helpSt + 'objselect = [' + vcArr1.join(',') + '];\n';
                    $('#area7a').val(st1);
                    var ar1 = $('#pbody7 a');
                    var ar2 = $('#pbody7 img');
                    for (i = 0; i < ar1.length; i++) {
                        sel = '';
                        if (plus) {
                            len1 = $(ar1[i]).closest('tr').find('.pselected:checked').length
                        }
                    }
                }

                //////// TABLE MANIPULATION //////////

                function tTop(rr) {
                    var elem = $('#' + rr + ' tr:first');
                    if (rr == 'vbody7') {
                        var container = $('#div7')
                    } else {
                        var container = $('#div1')
                    }
                    container.scrollTop(
                        elem.offset().top - container.offset().top + container.scrollTop()
                    );
                }

                function tBott(rr) {
                    var elem = $('#' + rr + ' tr:last');
                    if (rr == 'vbody7') {
                        var container = $('#div7');
                    } else {
                        var container = $('#div1');
                    }
                    container.scrollTop(
                        elem.offset().top - container.offset().top + container.scrollTop()
                    );
                }

                function tCur() {
                    var elem = $(curObj).closest('tr');
                    dd = elem.closest('tbody').attr('id');
                    if (dd == 'vbody7') {
                        var container = $('#div7');
                    } else {
                        var container = $('#div1');
                    }
                    container.scrollTop(
                        elem.offset().top - container.offset().top + container.scrollTop()
                    );
                }

                function vcheckedTop(tbd) {
                    var arr = $('#' + tbd).find('.vselected:checked');
                    if (arr.length === 0) {
                        alert('Error!\nYou have to select at least one item\nbefore clicking the button VCHECKED TOP');
                        return
                    }
                    var top = $('#' + tbd).find('tr').eq(0);
                    $(arr).each(function(index) {
                        row = arr[index].closest('tr');
                        $(row).find('.moving').prop('checked', false);

                        $(row).insertBefore(top);
                    });
                    tTop(tbd);
                }

                //////////////// SEARCH SIMULATING (LOAD VIDEOS) ////////////////
                var objpage = {}
                objselect = [];
			 file = '';
                function loadObjpage() {
                    objpage = {};
                    objselect = [];
                    file = $('#jsfile').val();
                    $('#objpageSp').html(file);
                     $('#objpageSp1').html(file);
                    file1 = file.replace('objpage', 'objselect');
                    $.getScript(file, function() {

                    });
                    $.getScript(file1, function() {
				   search7();
                    });
                }

                function search7() {
                    nb7 = -1
  			     vid7 = []; pid7 = []; cha7 = [];
                    vcount7 = 1; pcount7 = 1;
                    $('#vbody7, #pbody7').empty();
                    $('#progress7, #info7').empty();
                    interval = setInterval(myFunction7, 200);
                }

                nb7 = -1

                function myFunction7() {
                    nb7++;
                    $('#progress7').html(nb7 + 1);
                    searchVid7(nb7);
                }

                var response;

                pageArr7 = [];
lenArray = [];

                function searchVid7(n) {
                    jsonSt = JSON.stringify(objpage.page[n]);
                    data = JSON.parse(jsonSt);
                    jSt = JSON.stringify(data, null, 2);
                    lenArray.push(objpage.page[n].items.length);
                    pageArr7.push(jSt);
                    myCallback7(data);
                }

                vid7 = []; pid7 = []; cha7 = [];

                function myCallback7(response) {
                    len = response.items.length;
if(len > 0){
                    for (i = 0; i < len; i++) {
                        vv = response.items[i].id.videoId;
                        if (typeof vv != 'undefined') {
                            tt = response.items[i].snippet.title;
                            vid7.push(vv + '#' + tt);
                        }

                        pp = response.items[i].id.playlistId;
                        if (typeof pp != 'undefined') {
                            tt = response.items[i].snippet.title;
                            tt = tt.replace(/#/g, '');
                            try {
                                var listImage = response.items[i].snippet.thumbnails.default.url;

                            } catch (err) {
                                listImage = 'yt-playlist.jpg';
                                listImage1 = 'yt-playlist.jpg';
                            }

                            pid7.push(pp + '#' + tt + '#' + listImage);
                        }
                        cc = response.items[i].id.channelId;
                        if (typeof cc != 'undefined') {
                            cha7.push(cc)
                        }
           }
}else{
           pageShow();
                        clearInterval(interval);
				    allP = objpage.page.length;
				    // alert('allP = ' + allP);
                        $('#progress7').html('DONE! ' + (allP - 1) + ' pages');
                        sum = vid7.length + pid7.length + cha7.length;
                        $('#info7').html('Total: ' + sum + ' = ' + vid7.length + ' videos + ' + pid7.length + ' playlists + ' + cha7.length + ' channels');
                        objpageSt = '';
                        zlen = pageArr7.length;
                        for (z = 0; z < zlen; z++) {
                            objpageSt += pageArr7[z];
                            if (z < (zlen - 1)) {
                                objpageSt += ', \n';
                            }
                        }
				    objpageSt = 'objpage = {"page":[\n' + objpageSt + ']}'
			$('#area7'). val(objpageSt);
			
			selectSt = objselect.join(',');
			$('#area8').val('objselect =  [' + selectSt + '];');
			
			allSt = objpageAll.join(',\n');
			$('#area9').val('objpageAll = [\n' + allSt + '\n];');
				    alert('Now tap button MAKE CONTROLS.');
           }
}

                vcount7 = 1; pcount7 = 1;

                function make7() {
                    len = vid7.length;
                    vcount = 1;
                    for (i = 0; i < len; i++) {
                        if (objselect.includes(vcount7)) {
                            check = 'checked';
                        } else {
                            check = ''
                        }
                        arr = vid7[i].split('#');
                        videoID = arr[0];
                        titSt = arr[1];
                        var vv7 = '<tr width="98%">' +
                            '<td width="80px"><img width="88" height="65" ' +
                            'src="http://img.youtube.com/vi/' + videoID + '/default.jpg"></td>' +
                            '<td class="showTD">' +
                            '<input type="checkbox" class="vselected" onclick="selectItem(this)" ' + check + '>' +
                            '<b class="vc7">' + vcount7 + '.</b> <a class="vAnchor" href="#" title="' + videoID + '" onclick = "playVid(this); return false">' +
                            titSt + '</a></td></tr>';
                        vcount7++;
                        $('#vbody7').append(vv7)
                    }
                    len2 = pid7.length;
                    pcount7 = 1;
                    for (k = 0; k < len2; k++) {
                        arr = pid7[k].split('#');
                        xx = arr[0];
                        ptitle = arr[1];
                        listImage = arr[2];
                        var pp7 = '<tr width="98%">' +
                            '<td width="80px"><img width="88" height="65" src="' +
                            listImage + '"></td>' +
                            '<td class="showTD">' +
                            '<input type="checkbox" class="pselected" onclick="selectItem(this)">' +
                            '<b>' + pcount7 + '.</b> <a class="pAnchor" href="#" title="' + xx + '" onclick = "loadPLId(this); return false">' +
                            ptitle + '</a></td></tr>';
                        pcount7++;
                        $('#pbody7').append(pp7);
                    }

                    $('.vselected').change(function() {
                        bool = $(this).prop("checked");
                        an = $(this).closest('tbody').find('a');
                        thi = $(this).closest('tr').find('a');
                        xx = $(an).index(thi);
                        anc = $(curObj).closest('tbody').find('a');
                        yy = $(anc).index(curObj);
                        if (xx == yy) {
                            $('.chk1').prop("checked", bool);
                        }
                    });
                }

//////////// COPY THE CONTENT OF AN AREA //////////////
                var copy = function(elementId) {
                    var input = document.getElementById(elementId);
                    var isiOSDevice = navigator.userAgent.match(/ipad|iphone/i);
                    if (isiOSDevice) {
                        var editable = input.contentEditable;
                        var readOnly = input.readOnly;
                        input.contentEditable = true;
                        input.readOnly = false;
                        var range = document.createRange();
                        range.selectNodeContents(input);
                        var selection = window.getSelection();
                        selection.removeAllRanges();
                        selection.addRange(range);
                        input.setSelectionRange(0, 999999);
                        input.contentEditable = editable;
                        input.readOnly = readOnly;
                    } else {
                        input.select();
                    }
                    document.execCommand('copy');
                }
            </script>
    </body>
</html>

THE FILE ytvideo-play.html WORKS ALMOST LIKE THIS DEMO FILE

 / 

  Like ckeckbox (mark the currently playing video)
Before loading another objpage file, tap UPDATE for making objselect file.

A- SIMULATING SEARCH FOR ALL ITEMS     Hide this
The following 4 videos are ready for playing (don't use Like checkbox and Next);
Relaxing Music,  Bolero for Lovers,  Romantic Guitar,  Vienna Hallstatt
NOTE: This is just demo file.
So it allways loads only the file objpage-herald-winkler.js
To start: Choose a file (objpage- ...js) then tap button LOAD JS




 


B1- PLAY SINGLE VIDEOS




B2- PLAY PLAYLISTS


B3- FOR MAKING objselect-....js FILE

Remember this file name: 




B4- VIEW THE CONTAIN OF WORKING JAVASCRIPT FILES

The file objpage-harald-winkler.js


The contain of the file objselect-harald-winkler.js
at loading, before updating.
If you see objselect = [], it means the file objselect ... .js doesn't exist.

The contain of the file objpage-all.js at loading


B5- VIEW TWO JSON PAGES FROM
The page before the last


The last page



Popular posts from this blog

PHP JQUERY PROXY DEMO

Image
Proxy script (or proxy program) is a script, wich is located between the user's browser and the "target server". Here I'would like to make a simple demo for PHP-Jquery-script proxy method. So far in my blog I just use YouTube API v.3 and JavaScript-jQuery to find videos. This time I try to use PHP language and jQuery to find videos. We often hear about "Web scraping with PHP," which can be roughly considered to include 9/10 PHP and 1/10 jQuery. Now I want to do it again but with 1/10 PHP and 9/10 jQuery. This page ("php-jquery-proxy.html") is for web scraping using mainly jquery-ajax in combination with only one function from PHP language (get_file_contents function). Using it I can get video ids, video titles from the source code of youtube pages and watch those videos continuously. To use this page you don't need to have Youtube API-3 key but need to download from Internet the XAMPP package...
Read more

WEB PROGRAMMING ON IPAD. Search yt videos by keyword and load js file to play

Previously in March and April 2016 I posted OBSERVE nextPageToken IN YOUTUBE JSON DATA and SEARCH BY KEYWORD - GETTING MAXIMAL NUMBER OF ITEMS. Now those posts were old, some links were broken, They are written for PC and then youtube did not restrict video search by granting quota. Now I update it to suit the quota situation and write for programming on the ipad. <!DOCTYPE html> <html> <meta charset= "utf-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <meta name= "author" content= "pvhung20" > <head> <script src= "https://code.jquery.com/jquery-3.6.0.js" ></script> <style> body { font-family :Arial; font-size : 14pt ; background-color : #003333 ; margin : 0px ; padding : 0px ; margin-bottom : 50px ; color : white ; } button , input , textarea , span { font-size : 14pt ; } textarea { ...
Read more