如何在YouTube5的“视频”标签中使用youtube视频作为来源

时间:2012-05-03 07:17:53

标签: html5 javascript-events html5-video youtube-api

我需要将YouTube视频作为HTML5中视频标记的来源,一旦视频播放完毕,“onended”事件将被触发,因为我会编写一些将运行的脚本。

<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>

这里一切正常与本地视频文件,唯一的事情是我需要提供YouTube视频作为源它不工作所以请任何人都知道这帮助我.. 在此先感谢。

2 个答案:

答案 0 :(得分:2)

Html5不支持youtube网址,如果你需要为你的网站提供视频src,你可以这样做:

第1步:将&html5=True添加到您最喜欢的YouTube网址

第2步:在源

中查找<video/>标记

第3步:将controls="controls"添加到视频代码:<video controls="controls"..../>

示例:

<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>

注意似乎有一些expire的东西。我不知道src字符串可以工作多长时间。

仍在测试自己。

请注意,此视频src特定于您用于检索页面源的浏览器。我认为Youtube会动态生成这个HTML(至少目前是这样)所以在测试中我是否可以在Firefox中复制,而不是Chrome。

答案 1 :(得分:0)

需要填充物。转到http://html5polyfill.com/并向下滚动到&#34;视频&#34;获得当前列表。

MediaElement.js是我唯一使用的,它有一个&#34;结束&#34;你可以挂钩的事件。其他人也可能这样做。