HTML5自制网页视频播放器的实现

HTML5自制网页视频播放器的实现

作者：纪翠竹

来源：《数字技术与应用》2017年第04期

摘要：本文利用HTML5的标签，以及为Video对象提供的用于DOM操作的方法和事件，通过JavaScript代码操作Video对象和脚本化控制API，完成一个自定义控制栏的HTML5网页富媒体视频播放器，使网站视频浏览摆脱了第三方插件的限制和束缚，避免了安装插件带来的诸多问题，增强了网站的富媒体视频元素播放的稳定性和浏览器的兼容性，从而获得良好的用户体验。

关键词：HTML5；富媒体；视频；播放器；JavaScript

中图分类号：TP393 文献标识码：A 文章编号：1007-9416（2017）04-0195-01

大数据时代，富媒体元素早已突破了传输的瓶颈，成为互联网的重要组成部分。本文从提升用户体验出发，兼顾各浏览器对视频文件的支持情况，介绍基于HTML5的自定义控制栏的视频播放器技术的应用。

1 标签

标签支持的视频格式为Ogg、MPEG4、WebM，其中，Ogg和WebM格式Firefox4.0、Opera10.6、Chrome6.0浏览器均支持，MPEG4格式IE9、Chrome6.0、Safari3.0浏览器支持。目前，HTML5提供了标签，用于指定多个备用的不同格式的文件，以解决一种视频格式让所有浏览器都支持的问题。Src和controls是标签的基本属性，controls为视频提供播放控件。

2 HTML DOM Video对象

HTML5为Video对象提供了用于DOM操作的方法、属性和事件，下面，我们用一个简单的例子说明一下如何使用JavaScript代码操作Video对象。如图1所示，定义了一个用于控制播放或暂停的按钮，然后为该按钮的onclick事件定义方法playPause（），使用JavaScript 的条件语句进行状态的判断，当该播放器的状态为暂停时调用play（）方法，切换为播放，这个按钮是个反复键，在播放或暂停状态下进行切换。

3 网页的部分

该页面由一个标签、三个标签和六个标签构成。标签分别引用3种不同的视频格式，以获得全部浏览器支持。标签分别定义播放、快进、快退、音量和静音的控制，建议对按钮设置统一的CSS样式和鼠标状态。如图2所示。

4 用JavaScript代码实现功能

控制视频播放或暂停：playPause（），在该方法中需要判断Video对象的状态，如果为paused状态，则调用play（）方法，否则调用paused方法；控制视频快进、快退：goBack （val），在该方法中通过控制currentTime的值来实现效果；控制视频音量：volume（val），在该方法中通过控制volume的属性值来实现效果；控制是否静音：isMuted（），在该方法中需要判断Video对象的muted状态。代码如图3所示。