Databases
StackOverflow2013
Postsdbo
POMission : Create a connection with a list of videos and a canvas make them plays 1 by 1, without stops, no click function, ended AddEventListener
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMission : Create a connection with a list of videos and a canvas make them plays 1 by 1, without stops, no click function, ended AddEventListener
    text
    copied!<p>I would like to make a video playlist, (Source video is copied in a canvas to block controls, options like download video), i made 2 Drag and Drop lists and i would like to connect 1 drag n Drop list to the canvas (that is also the video player box) then play the videos 1 by 1, witout stops, no click function, function AddEventListener ended in the canvas box.</p> <p>I worth for 2 videos, here is some parts of the code : </p> <pre><code> &lt;script type="text/javascript"&gt; // 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); } &lt;/script&gt; &lt;body onload="myAddListener()"&gt; &lt;div id="video_player_box"&gt; &lt;video id="video" autoplay autobuffer width="1" height="1" &gt; &lt;source src="videos/milenio_6_minimix_700.mp4" type="video/mp4"&gt; &lt;source src="videos/milenio_6_minimix_700.webm" type="video/webm"&gt; &lt;source src="videos/milenio_6_minimix_700.ogg" type="video/ogg"&gt; &lt;/video&gt; &lt;div align="center"&gt; &lt;canvas id="myCanvas" width="1130" height="560"&gt; Your browser does not support the HTML5 canvas tag.&lt;/canvas&gt; &lt;/div&gt; &lt;script&gt; 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); &lt;/script&gt; &lt;/div&gt; &lt;div id="cadre2" ondrop="drop(event)" ondragover="allowDrop(event)"&gt; &lt;p&gt; Canal VIP &lt;/p&gt; &lt;ol&gt;&lt;li&gt; &lt;video src="videos/milenio_6_minimix_700.mp4" draggable="true" ondragstart="drag(event)" id="drag1" width="288" height="188" alt="Video 1"&gt; &lt;/video&gt;&lt;/li&gt; </code></pre> <p>... </p> <p>The idea is to say get the videos from #cadre2, play them, 1 by 1, in the canvas until the end and loop, make the same path.</p> <p>I made my list Drag and drop to have the decision to modify online the video playlist, more flexible. </p> <p>Hope to have some advises!! I'm not pro of Php and dynamic, i've started Javascript but it takes time to be pro!</p> <p>If you have some code, it will be really appreciated!! Thanks in advance!!!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload