How to use youtube video as a source in the "video" tag in HTML5

Question

I need to provide youtube video as a source for the HTML5 video tag, as soon as the video finishes the game, the “onended” event will fire in that I will write some kind of script that will run.

<video id="videoSource" style="visibility:visible" width="1000" height="500" controls="controls" onended="hideVideo()"> <source src="**Youtube Video Link Goes here**" type="video/mp4" /> </video> <script type="text/javascript"> function hideVideo() { document.getElementById("videoSource").style.visibility="hidden"; } </script> 

Here everything works fine with the local video file, only I need to give youtube video as a source that it does not work, so please, anyone knows that this will help me .. Thanks in Advance.

Answer 1

Html5 does not support youtube url. If you need video src for your site, you can do:

Step 1: Add &html5=True to your favorite YouTube URL.

Step 2: find the <video/> in the source

Step 3: add controls="controls" in the video tag: <video controls="controls"..../>

Example:

 <video controls="controls" class="video-stream" x-webkit-airplay="allow" data-youtube-id="N9oxmRT2YWw" src="http://v20.lscache8.c.youtube.com/videoplayback?sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Cratebypass%2Coc%3AU0hPRVRMVV9FSkNOOV9MRllD&amp;itag=43&amp;ipbits=0&amp;signature=D2BCBE2F115E68C5FF97673F1D797F3C3E3BFB99.59252109C7D2B995A8D51A461FF9A6264879948E&amp;sver=3&amp;ratebypass=yes&amp;expire=1300417200&amp;key=yt1&amp;ip=0.0.0.0&amp;id=37da319914f6616c"></video> 

Notice that there are some things expire . I don't know how long the src string will work.

Testing yourself.

Please note that this src video is specific to the browser that you use to fetch the page source. I think Youtube generates this HTML dynamically (at least for the time being), so when testing, if I copy to Firefox, this works in Firefox, but not in Chrome.

Answer 2

Polyfill required. Go to http://html5polyfill.com/ and scroll down to “video” to get the current list of what's there.

MediaElement.js is the only one I used, it has a “completed” event that you can hook up. Others probably do too.