如何使用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中的「視頻」標籤中的源碼

回答

相關問題