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

Question

I need to give the YouTube video as a source to video tag in HTML5, once the video has finished playing "onended" event will fired in that I 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 all working fine with local video file, only thing is I need to give a YouTube video as a source it's not working so please any one knows this help me..

Answer 1

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

Step 1: add &html5=True to your favorite youtube url

Step 2: Find <video/> tag in source

Step 3: Add controls="controls" to 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>

Note there seems to some expire stuff. I don't know how long the src string will work.

Still testing myself.

Note that this video src is specific to the browser you use to retrieve the page source. I think Youtube generates this HTML dynamically (at least currently) so in testing if I copy in Firefox this works in Firefox, but not Chrome.