我需要将 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 视频作为来源,但它不起作用,所以请任何知道这的人帮助我..
最佳答案
Html5 不支持 youtube url,如果您的网站需要视频源,您可以这样做:
第 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&itag=43&ipbits=0&signature=D2BCBE2F115E68C5FF97673F1D797F3C3E3BFB99.59252109C7D2B995A8D51A461FF9A6264879948E&sver=3&ratebypass=yes&expire=1300417200&key=yt1&ip=0.0.0.0&id=37da319914f6616c"></video>
注意似乎有些expire
东西。我不知道 src
有多长字符串将起作用。
仍在测试自己。
请注意,此视频源特定于您用来检索页面源的浏览器。我认为 Youtube 会动态生成此 HTML(至少目前是这样),因此在测试中如果我在 Firefox 中复制,这在 Firefox 中有效,但在 Chrome 中无效。
关于javascript - 如何在 HTML5 的 "video"标签中使用 youtube 视频作为源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10426821/