0

ビデオ プレイリストを作成したい (ソース ビデオはキャンバスにコピーされ、コントロールやダウンロード ビデオなどのオプションをブロックする)、2 つのドラッグ アンド ドロップ リストを作成し、1 つのドラッグ アンド ドロップ リストをキャンバスに接続したい (そのビデオプレーヤーボックスでもあります）、ビデオを1つずつ再生し、停止せず、クリック関数なし、関数AddEventListenerがキャンバスボックスで終了しました。

私は 2 つのビデオの価値があります。コードの一部を次に示します。

    <script type="text/javascript">
    // listener function changes src
    function myNewSrc() {
        var myVideo = document.getElementsByTagName('video')[0];
        myVideo.src = "videos/80s_Mix_II-700.mp4";
        myVideo.src = "videos/80s_Mix_II-700.webm";
        myVideo.load();
        myVideo.play();
    }



    // add a listener function to the ended event
    function myAddListener() {
        var myVideo = document.getElementsByTagName('video')[0];
        myVideo.addEventListener('ended', myNewSrc, false);
    }

</script>



<body onload="myAddListener()">

    <div id="video_player_box">

        <video id="video" autoplay autobuffer width="1" height="1" >
            <source src="videos/milenio_6_minimix_700.mp4" type="video/mp4">
            <source src="videos/milenio_6_minimix_700.webm" type="video/webm">
            <source src="videos/milenio_6_minimix_700.ogg" type="video/ogg">
        </video>

        <div align="center">
            <canvas id="myCanvas" width="1130" height="560">
                Your browser does not support the HTML5 canvas tag.</canvas>
        </div>



        <script>

            var v = document.getElementById("video");
            var c = document.getElementById("myCanvas");
            ctx = c.getContext('2d');

            v.addEventListener('play', function() {
                var i = window.setInterval(function()
                {
                    ctx.drawImage(v, 5, 5, 1130, 560)
                }, 20);
            }, false);
            v.addEventListener('pause', function() {
                window.clearInterval(i);
            }, false);
            v.addEventListener('ended', function() {
                clearInterval(i);
            }, false);

        </script>

    </div> 


    <div id="cadre2" ondrop="drop(event)" ondragover="allowDrop(event)"> <p> Canal VIP </p>
        <ol><li> <video src="videos/milenio_6_minimix_700.mp4" draggable="true"   
                        ondragstart="drag(event)" id="drag1" width="288" height="188" alt="Video 1">
                </video></li>

...

#cadre2 からビデオを取得し、キャンバス内で 1 つずつ再生し、最後までループして、同じパスを作成します。

私は自分のリストをドラッグ アンド ドロップして、ビデオ プレイリストをオンラインでより柔軟に変更できるようにしました。

アドバイスをいただければ幸いです!! 私は PHP と動的のプロではありません。Javascript を始めましたが、プロになるには時間がかかります。

コードがあれば、本当に感謝します!! 前もって感謝します！！！

4

1 に答える 1