如何使用YouTube视频作为HTML5中的“视频”标签中的源码

我需要将YouTube视频作为HTML5中视频标签的源，一旦视频播放完毕后，“onended”事件将会触发我写入某种脚本会运行。如何使用YouTube视频作为HTML5中的“视频”标签中的源码

<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视频，因为它不工作，所以请任何人知道这帮助我.. 由于提前源。

来源

2012-05-03 Yuva

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，这可以在Firefox中使用，但不适用于Chrome。

来源

2012-05-03 07:37:11

感谢您的回答。我已经尝试了上面的代码，但它不显示视频..它显示'X'标记.. – Yuva

需要polyfill。转到http://html5polyfill.com/并向下滚动到“视频”以获取当前列表中的内容。

MediaElement.js是我用过的唯一一个，它有一个可以挂钩的“结束”事件。其他人也可能也是。

来源

2014-05-23 18:10:27

如何使用YouTube视频作为HTML5中的“视频”标签中的源码

回答

相关问题