朱 倩

（四川职业技术学院，四川 遂宁 629000）

0 引言

在HTML5之前，如果要在网页中插入视频和音频文件，必须借助于第三方的插件来完成，这样会产生冗长的代码，而且有可能造成系统崩溃，漏洞也很多[1]。在HTML5中新增了视频和音频标签，该标签专门用来处理视频文件和音频文件的播放问题，该标签简单易学，通俗易懂，很好地实现了视频音频文件的处理。

在使用视频标签和音频标签的过程中，可以使用标签自带的contrls进行视频、音频的播放控制，为了更灵活地实现播放控制也可以在其中加入JavaScript代码来控制，本文旨在通过两个案例介绍使用JavaScript完成对视频、音频控制的方法[2]。

1 常见属性和方法

在HTML中每个标签都有自己的属性和方法，视频和音频也不例外[3]，他们也有自己的属性和方法，通过属性和方法，更大程度上增强了标签的实用性。

表1 标签常见属性

表2 标签常见方法

2 综合案例

2.1 使用图标控制视频的播放

该案例不使用视频自带的constrols控制条，而是使用自定义播放/暂停按钮。在暂停时向视频插入广告，当鼠标移出视频区域，隐藏控制按钮；当鼠标移入视频区域，显示控制按钮。

图1 案例初始效果

案例分析：首先采用绝对定位和相对定位完成案例的界面效果图，如图2所示，在实现中通过外边距，实现图片的向上和向左。然后通过JavaScript代码实现鼠标事件和控制图标的单击事件。

图2 播放效果

参考代码：

…..

2.2 简单音乐播放器

该案例模仿流行的播放器进行设置，采用分组框进行页面布局，页面效果如图3所示。采用单选按钮和音频标签实现对音乐播放的控制，播放效果如图4所示。

图3 播放器初始效果

图4 播放效果

案列分析：该案例是通过设置音频标签的src属性进行实现，也可以在音频标签中设置autoplay，loop属性实现音乐的自动循环播放。

关键代码如下：

……

audio.src= e.target.value;这句也可改成this.value

3 结语

HTML5中提供视频和音频两个多媒体标签，可以使用这两个标签往页面中插入视频和音频。理论上播放器可以播放任何常规视频或音频格式，但是真正是否支持某个格式文件取决于浏览器是否支持[4]。本文通过上面两个案例，清楚地介绍了如何使用JavaScript完成对视频和音频的控制，当然如何更好、更完全地实现对视频音频的控制，有待于以后更深入的研究。