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

【问题标题】：How to use youtube video as a source in "video" tag in HTML5如何在 HTML5 的“视频”标签中使用 youtube 视频作为来源
【发布时间】：2012-05-12 16:46:35
【问题描述】：

我需要将 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 视频作为它不工作的来源，所以请任何知道这帮助我的人..

【问题讨论】：

标签： javascript html youtube-api html5-video dom-events

【解决方案1】：

Html5 不支持 youtube url，如果您的网站需要视频 src，您可以这样做：

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

第二步：在源码中找到<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 中无效。

【讨论】：

感谢您的回答..