HTML5视频与音频

HTML5的video元素

1、使用video标记插入视频

<video src="url" controls="controls">替代文字</video>

video标记常用属性及说明

2.、video元素的访问控制

video元素重要的方法和事件。调用这些方法和事件可以访问和控制video对象。

video标记常用方法和事件

例子

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css"></style></head><body><div><video id="video1" autoplay="autoplay" controls="controls"><source src="../source/立方体.mp4"></source></video></div><button id="btn" onclick="playpause()">播放/暂停</button><button id="btn" onclick="makebig()">大</button><button id="btn" onclick="makecenter()">中</button><button id="btn" onclick="makesmall()">小</button></body><script>var video=document.getElementById('video1');var btn=document.getElementById('btn');function playpause(){if (video.paused) video.play(); else video.pause(); }function makebig(){video.width=800;}function makecenter(){video.width=600;}function makesmall(){video.width=400;}</script>
</html>

HTML5的audio元素

1、使用audio标记插入音频

<audio src="url" controls="controls">替代内容</audio>

audio标记的常用属性、取值及说明

2.、audio元素的访问控制

通过单击按钮触发对象的play()方法和pause()方法实现播放状态的改变；

音量和静音控制则是通过修改对象的volume属性和muted属性实现。

使用track元素添加字幕

1、使用track标记插入字幕文件

track元素是video元素的子元素，

标记必须被书写在 video元素的开始标记与结束标记之间。

track标记的常用属性及说明

2、建立WebVTT文件

track元素引用的文件是内部包含了一系列时间标记的文本文件，WebVTT文件是可以添加到轨道中的视频播放器可以显示的文本文件。

在 HTML5中通过标记引用WebVTT文件，这表示可以为音频或视频等媒体资源提供诸如字幕、标题或描述等信息，并将这些信息同步显示在媒体资源中。

（1）WebVTT文件格式

WebVTT (Web Video Text Tracks)是一种文件格式，本质上是是一种文本文件，使用UTF-8编码，文件扩展名为.vtt。

（2）WebVTT标记

WebVTT文件内容由一些WebVTT标记组成，标记之间用行分隔符分开。用户可以在WebVTT标记中书写字幕与字幕应用的时间范围。

（3）使用Video
Caption Maker生成WebVTT文件

为媒体添加字幕的关键是构建WebVTT轨道文件。WebVTT文件可以手动创建，也可以使用创作工具构建。如果手工创建文件，写代码非常麻烦，并且字幕与媒体的同步需要反复测试修改。

HTML5视频字幕制作工具是一个简单有效的工具，该工具可以用于创建 WebVTT文件。