最新的Web開發教程

HTML YouTube視頻


在HTML中播放視頻的最簡單方法,就是使用YouTube。


與視頻格式掙扎?

不同版本不同的瀏覽器都支持不同的視頻格式。

在本教程的前面,你所看到的,你可能有您的視頻轉換成不同的視頻格式,使之發揮在所有瀏覽器。

視頻轉換到不同的格式可以是困難且耗時。

更簡單的解決方案可能是由YouTube在網頁中播放視頻。


YouTube視頻ID

YouTube將顯示一個ID (like XGSy3_Czz8k)當您保存(or play)視頻。

您可以使用此ID,並參閱您的視頻在HTML中。


播放YouTube視頻在HTML

要播放視頻的網頁上,請執行以下操作:

  • 將視頻上傳到YouTube
  • 請記視頻的ID
  • 定義一個<iframe>在您的網頁元素
  • src屬性點到視頻網址
  • 使用width和height屬性來指定播放器的尺寸
  • 任何其他參數添加到URL

實施例-使用的iFrame (the recommended method)

<iframe width="420" height="315"
src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
</iframe>
試一試»

YouTube的參數

自動隱藏

值0:玩家控制始終可見。

值1:在影片播放的播放器控件會自動隱藏。

值2 (default) :如果播放機有16:9或4:3的比例,同1中,作為否則為0相同。

自動播放

值0 (default) :視頻不會自動播放的播放器加載時。

值1:視頻將自動播放的播放器加載時。

控制

值0:播放器控件不顯示。 緊接在視頻負載。

值1 (default) :播放器控制顯示。 緊接在視頻負載。

值2:球員控制顯示,但用戶發起的播放之前的視頻不加載。

循環

值0 (default) :視頻將只播放一次。

值1:視頻將環(forever)

播放列表

以逗號分隔的視頻播放列表(in addition to the original URL)


的YouTube <object>嵌入功能

YouTube的<object>嵌入視頻,從2015年1月棄用。

您應該遷移應用程序使用<iframe>嵌入。

實施例-使用<object> (deprecated)

<object width="420" height="315"
data="http://www.youtube.com/embed/XGSy3_Czz8k">
</object>
試一試»

實施例-使用<embed> (deprecated)

<embed width="420" height="315"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
試一試»