将HTML5视频添加到您的网站

  • 所需知识:基本HTML5CSS
  • 要求:Ogg Theora中的视频和MP4 / H.264视频(如果需要,我们还会向您展示如何转换为Ogg格式),现代网络浏览器(Opera,Firefox,Chrome,Safari)和文本编辑器
  • 项目时间:1小时
  • 支持文件

想要将HTML5视频添加到您的网站?您可以像放置图像一样轻松地完成此操作元素 - 在本教程中,我们将向您展示魔术是如何完成的。

在下面的示例代码中,SRC属性指向视频文件和控制表示我们希望浏览器显示控制按钮(播放/暂停,音量等)。可选的值海报Attribute是浏览器在加载视频时以及在用户点击播放之前显示的静态图像的路径。选择一个吸引用户观看视频的吸引人的框架是个好主意。如果你不使用海报,将显示视频的第一帧。开始和结束视频标签之间的代码是没有HTML5视频支持的浏览器的后备内容。

您的浏览器无法播放HTML5视频。 改为下载


如您所见,这里的语法非常简单。嗯,这就是理论。要拥有真正的跨浏览器视频,我们需要包含两个文件:一个编码为Ogg Theora,一个编码为H.264格式。要为视频元素指定多个源,我们将删除SRC属性,而是包含所有替代格式内容:

在这种情况下,type属性告诉浏览器有关视频的容器格式(以及可选的编解码器)。看到Netm.ag/ftPIES了解更多详情和Netm.ag/hFlpJ4用于演示。

01.向旧浏览器提供Flash

为了与不太新的浏览器的额外兼容性,让我们将旧式Flash嵌入代码放入其中视频元素作为后备,因此如果浏览器对HTML5原生视频的美感一无所知,则默认为标签内的Flash后备内容。

Flash支持播放H.264视频,因此我们所需要的只是我们现成的Flash播放器(at米/ Player.swf),我们将传递视频的H.264版本的URL作为参数。值得注意的是,MP4的路径必须是绝对的或相对于SWF文件的位置 - 为简单起见,我们将播放器和视频放在同一目录中。






视频

您的浏览器无法播放HTML5视频。 改为下载


所以,如果我们将所有这些结合在一起,我们的最终代码如下所示:

02.制作自己的控件

现在一切看起来都很好:旧版浏览器会显示Flash播放器,现代浏览器将使用其原生视频功能来显示他们可以支持的任何格式视频。作为我们的视频元素有控制属性集,具有原生视频的浏览器将使用其默认播放控件。对于许多人来说,这已经足够了,但是默认控件在浏览器与浏览器之间略有不同,或者不适合您的网站设计可能会出现问题。

Add HTML5 video

控制视频所需的只是一些简单的JavaScript。在这里,我们添加了两个基本按钮,一个用于播放视频,另一个用于静音

所以,让我们尝试创建我们自己的基于HTML的面板,它可以通过JavaScript控制视频。我们会保持简单,只需添加一个播放和静音按钮。这些最合乎逻辑的选择是使用可靠的



翻译字数超限