Video ng YouTube sa HTML

Mga Elective na Kurso

Rekomendasyon ng Kurso:

Ang pinakasimpleng paraan upang ilagay ang video sa HTML ay gamitin ang YouTube.

Nag-aalala ka sa format ng video?

Mag-convert ng video sa iba't ibang format ay maaaring maging mahirap at matagal na.

Ang isang mas simpleng solusyon ay upang hayaan ang YouTube na mag-play ng video sa iyong web page.

YouTube Video Id

Save (o play) ang video, ipapakita ng YouTube ang isang id (halimbawa, ih1l6wb7LhU).

Maaari mong gamitin ang id na ito, at mag-referensiya sa iyong video sa HTML code.

  • Maglagay ng YouTube video sa HTML
  • Kung gusto mong mag-play ng video sa web page, gawin ang sumusunod:
  • I-upload ang video sa YouTube Tandaan ang id ng video sa iyong web page
  • <iframe> Upang hayaan ang elemento src
  • Gamitin ang katangian upang i-point sa URL ng video width at height Ang mga katangian ay ginagamit upang tugisin ang sukat ng player
  • Magdagdag ng iba pang parametro sa URL (tingnan ang ibaba)

Mga Halimbawa

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU">
</iframe>

亲自试一试

YouTube Autoplay + Mute

Maaari mong mag-play ng awtomatik ang video kapag binibisita ng user ang pahina sa pamamagitan ng pagdagdag ng autoplay=1 sa URL ng YouTube. Gayunpaman, ang awtomatikong pag-play ng video ay maaring magdulot ng kahirapan sa iyong mga bisita!

注意：在大多数情况下，Chromium 浏览器都不允许自动播放。但始终允许静音自动播放。

在 autoplay=1 之后添加 mute=1，可让您的视频自动开始播放（但已静音）。

YouTube - Autoplay + Muted

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?autoplay=1&mute=1">
</iframe>

亲自试一试

YouTube Playlist

以逗号分隔的要播放的视频列表（原始 URL 除外）。

YouTube Loop

添加 loop=1 会让您的视频永远循环。

值 0（默认）：视频将播放一次。

值 1：视频将循环（永远）。

YouTube - Loop

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?playlist=ih1l6wb7LhU&loop=1">
</iframe>

亲自试一试

YouTube 控件

添加 controls=0 会使视频播放器不显示控件。

值 0：播放器控件不显示。

值 1（默认）：播放器控件显示。

YouTube - Controls

<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?controls=0">
</iframe>

亲自试一试