主页 > 外域环境 >如何使用HTML5的影片播放? >

如何使用HTML5的影片播放?

2020-07-02来源:外域环境
点赞:595

笔者在前几篇文章中曾经谈过 HTML5 在影片播放上与 Flash 相比之下的优点 ,也提到现在许多先进的浏览器、网站均已经开始使用 HTML5 作为影片播放。而在这篇文章中,笔者将会在简短的篇幅内介绍如何使用 HTML5 的标籤来播放影片,并且讨论跨平台的播放方法。

Safari、Chrome

这在一次的实做中,我们将先採用 Apple Safari 跟 Google Chrome 作为练习的对象,并逐步扩展所支援的浏览器。之所以使用 Safari/Chrome,乃是因为其对于 H.264 编码器提供了完整的支援,而 H.264 证是目前 iPad/iPhone 上唯一支援的编码格式、也是大多数数位相机、摄影机所拍摄出来的格式。

要使用 H.264 作为影片播放,首先我们当然得先取得 H.264 的档案,诚如前面所提及的,若是你是从手机、摄影机或照相机等装置拍摄影片,那大多数的影片便是 H.264 格式。而若是其他来源的影片,则可以参考网路上众多的转档教学先行进行转档。

在 HTML5 中的影片播放均得透过标籤,架构大约如下:

我们可以看到在

而下方的 标籤自然就是记载你影片档案所存放的路径,这样就能正常使用了!

Firefox、Opera

笔者前一篇谈 HTML5 影片播放的文章曾经提过,由于 H.264 并非免费开放的授权,故 Firefox/Opera 虽然支援 HTML5 影片播放,但 source 并不能使用 H.264 作为影片的格式、而是使用 OGG 作为影片格式。

聪明的读者可能已经注意到,在 HTML5 中的标籤中含有可以指定影片来源,所以我们只需要在 H.264 的后在新增一个 OGG 的影片来源就可以了!

因此程式码变成如下:

这样一来,当使用者使用 iPad/iPhone 或是其他各种支援 H.264 的浏览装置读到这段程式码时,便会优先使用 H.264 格式的档案,若是使用的浏览器无法读取时,则会跳到下一则 所提供的 ogg 格式档案作为播放。

Internet Explorer 与其他

但若是遇到完全不支援 HTML5 的浏览器时又该怎幺办?别担心,我们可以在

透过加入 Flash 的支援,便可以几乎确保所有浏览装置用最佳的影片播放方案。程式码如下:

中,你可以如同一般的 Flash 嵌入一般的自由设定、加入

标籤。或者是你也可以直接加入 YouTube、Vimeo 等外嵌程式片段。

範例

以下範例为 HTML5 的影片播放实做,只提供 H.264 的档案编码,还请各位读者使用 Safari 或 Chrome 等浏览器浏览。

结论

在这一次的内容中,我们简单的介绍了如何透过 HTML5 在网页中加入影片播放,并且使用 Flash 作为 IE 相容的解决方法。若是读者有任何疑惑、心得,还请留言与我们讨论!

参考资源

相关阅读

随便看看