將YouTube視頻嵌入到HTML5中

我已經嘗試了我已閱讀過的有關將YouTube視頻嵌入到我的HTML5中的每種方法，但它不適用於任何瀏覽器。我得到的最好的是一個表示網站無法找到的廣場。我嘗試過使用舊的嵌入代碼，我嘗試過使用iframe ......我也嘗試過使用新的視頻標籤......我將每個代碼都放到了自己的單獨部分（意思是不包含包含在一個div或類似的東西中）......它所包含的唯一東西是身體本身......我也嘗試了相反的做法，把所有這三種方法放在某種像div這樣的容器中。這並不是說在一個正在或在一個不是應該不會影響它的可玩性，但我想一切......我不明白爲什麼它是行不通的將YouTube視頻嵌入到HTML5中

來源

2013-10-01 MddHtt13

你是不是顯示你試過沒什麼「T工作，但我感覺今天通靈所以這裏的野生刺：

YouTube目前給予了看起來像這樣的嵌入鏈接：

<iframe width="640" height="360"  
    src="//www.youtube.com/embed/sLAEg5aTXAE?feature=player_detailpage" 
    frameborder="0" allowfullscreen></iframe>

有什麼不尋常，這是該URL - 在IFrame標籤的「src」屬性中 - 不指定協議。

上述src屬性的格式是一種相對URL，稱爲協議相關URL，它允許embed標籤工作，而不管您的頁面是使用http：//還是https訪問：// 協議。（您不允許在單頁混合使用這些），但

- 我猜測這是你要去哪裏錯了 - 如果你打開一個HTML5本地文件，而不是通過Web服務器它有一個file：// URL。由於相對URL（包括此古怪協議相對URL）始終從當前頁面位置獲取其未指定位，因此計算的完整URL無效：

file：//www.youtube.com/embed/sLAEg5aTXAE？feature = player_detailpage

要解決問題，只需更改src屬性以指定協議，將相對URL更改爲從file：//和http：//協議提供的頁面中運行的絕對URL。

<iframe width="640" height="360"  
    src="http://www.youtube.com/embed/sLAEg5aTXAE?feature=player_detailpage" 
    frameborder="0" allowfullscreen></iframe>

缺點是你不能把它放在通過https傳遞的頁面上。

從長遠來看，您應該養成從真實網絡服務器而不是文件URL進行測試的習慣。對於本地安裝的測試服務器，WAMP/MAMP是一種簡單而流行的選擇。

來源

2013-10-02 05:44:45 Umopepisdn

謝謝你，我的朋友，你是現貨。這正是我所做的。我很抱歉發佈說明而不是代碼，我是這款遊戲的新手。我甚至沒有想到這是一個相對的聯繫。我也不知道http/https衝突。另外，我並不知道有一個網站可以測試我的網頁，就好像它在服務器上一樣。感謝您的幫助。 – MddHtt13

太棒了，@ user2808962！很高興聽到這個幫助。 – Umopepisdn

另外，只是要清楚，WAMP不是一個網站。這是一個程序（實際上是一個軟件捆綁），您可以在系統上安裝。當程序運行時，它使您的計算機的Web服務器。 – Umopepisdn

將YouTube視頻嵌入到HTML5中

回答

相關問題