HTML Video

May maraming paraan upang magpalabas ng video sa HTML.

实例

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

亲自试一试

Problema, problema, at lutas na ito

Hindi madaling magpalabas ng video sa HTML!

Kailangan mong masarap na malaman ang maraming kasanayan upang siguraduhin na ang iyong video file ay makapalabas sa lahat ng browser (Internet Explorer, Chrome, Firefox, Safari, Opera) at lahat ng hardware (PC, Mac, iPad, iPhone).

Sa kasalukuyang kabanata, CodeW3C.com ay nagpabilin sa iyo ng mga problema at ang mga lutas na ito.

Gamit ang <embed> tag

Ang ginagampanan ng <embed> tag ay ang pag imbak ng multimedia element sa HTML page.

Ang HTML code sa ibaba ay nagpapakita ng inimbak na Flash video sa web page:

实例

<embed src="movie.swf" height="200" width="200"/>

亲自试一试

Problema

  • Hindi makikilala ng HTML4 ang <embed> tag. Ang iyong page ay hindi makapasa ang pagpapatibay.
  • Kung hindi sumusuporta ang browser sa Flash, hindi makapalabas ang video.
  • Hindi maipapakita ng iPad at iPhone ang Flash video.
  • Kung ikaw ay nagkonversa ng video sa ibang format, hindi pa rin ito makapalabas sa lahat ng browser.

Gamit ang <object> tag

Ang ginagampanan ng <object> tag ay ang pag imbak ng multimedia element sa HTML page.

Ang HTML na pahina sa ibaba ay nagpapakita ng inimbak na Flash video sa web page:

实例

<object data="movie.swf" height="200" width="200"/>

亲自试一试

Problema

  • Kung hindi sumusuporta ang browser sa Flash, hindi makapalabas ang video.
  • Hindi maipapakita ng iPad at iPhone ang Flash video.
  • Kung ikaw ay nagkonversa ng video sa ibang format, hindi pa rin ito makapalabas sa lahat ng browser.

Gamit ang <video> tag

Ang <video> ay bagong tag sa HTML 5.

Ang <video> tag ay gumagamit upang i-embed ang video element sa HTML page.

Ang sumusunod na HTML fragment ay magpapakita ng isang nakakabit na video sa web page sa format ng ogg, mp4 o webm:

实例

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Hindi suportado ng iyong browser ang video tag.
</video>

亲自试一试

Problema

  • Kailangan ninyong i-convert ang video sa maraming iba't ibang format.
  • Ang <video> element ay hindi gumagana sa lumang browser.
  • <video> element ay hindi pinapayagan sa HTML 4 at XHTML walang patotohanan.

Pinakamahusay na Solusyon sa HTML

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

亲自试一试

Sa halimbawa, ginamit ang apat na iba't ibang format ng video. Ang HTML 5 <video> element ay sumusubok na i-play ang video sa kahit anong format ng mp4, ogg o webm. Kung lahat ay nabigo, ito ay balik sa <embed> element.

Problema

  • Kailangan ninyong i-convert ang video sa maraming iba't ibang format
  • <video> element ay hindi pinapayagan sa HTML 4 at XHTML walang patotohanan.
  • <embed> element ay hindi pinapayagan sa HTML 4 at XHTML walang patotohanan.

Komentaryo:Gamit ang <!DOCTYPE html> (HTML5) upang malutas ang problema ng walang patotohanan.

Solusyon sa Youku

Ang pinakasimpleng paraan para ipakita ang video sa HTML ay gamit ang YouTube at ibang video website.

Kung gusto ninyong i-play ang video sa web page, maaring ilagay ninyong ang video sa YouTube at ibigay ang HTML code para i-play ang video:

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

亲自试一试

使用超链接

如果网页包含指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件。

以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接，浏览器会启动“辅助应用程序”，比如 Windows Media Player 来播放这个 AVI 文件：

实例

<a href="movie.swf">Play a video file</a>

亲自试一试

关于内联视频的一段注释

当视频被包含在网页中时，它被称为内联视频。

如果您打算在 web 应用程序中使用内联视频，您需要意识到很多人都觉得内联视频令人恼火。

同时请注意，用户可能已经关闭了浏览器中的内联视频选项。

我们最好的建议是只在用户希望看到内联视频的地方包含它们。一个正面的例子是，在用户需要看到视频并点击某个链接时，会打开页面然后播放视频。

HTML 4.01 多媒体标签

标签 描述
<applet> 不赞成。定义内嵌 applet。
<embed> 不赞成。定义内嵌对象。（HTML5 中允许）
<object> 定义内嵌对象。
<param> 定义对象的参数。

HTML 5 多媒体标签

标签 描述
<video> 标签定义声音，比如音乐或其他音频流。
<embed> 标签定义嵌入的内容，比如插件。