一、HTML5的Video元素
1.使用video标记插入视频
代码格式：
<video src="url" controls="controls">替代文字</video>
<video>标记常用属性及说明
示例1
代码
效果
2. video元素的访问控制
video元素重要的方法和事件。调用这些方法和事件可以访问和控制video对象。
<video>标记常用方法和事件
示例2
代码
<!--demo0502.html--> <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>视频测试</title> <styletype="text/css"> button { display: block; } </style> </head> <body> <videowidth="600"height="400"> <sourcesrc="images/movie1.mp4"/> 您的浏览器不支持 video 标记 </video> <buttononclick="toggle();">播放</button> <scripttype="text/javascript"> functiontoggle() { varvideo = document.getElementsByTagName("video")[0]; varbnt = document.getElementsByTagName("button")[0]; if (video.paused) { video.play(); bnt.firstChild.nodeValue = "暂停"; } else { video.pause(); bnt.firstChild.nodeValue = "播放"; } } </script> </body> </html>
效果
示例3
代码
<!--demo0503.html--> <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> </head> <body> <videoid="myVideo"width="320"height="240"controls> <sourcesrc="images/lego.ogv"type="video/ogv"> <sourcesrc=" images/lego.mp4"type="video/mp4"> <sourcesrc=" images/lego.webm"type="video/webm"> <objectdata=" images/lego.mp4"width="320"height="240"> <embedwidth="320"height="240"src=" images/lego.swf"> </object> </video> <br> <buttononClick="document.getElementById('myVideo').play()">播放</button> <buttononClick="document.getElementById('myVideo').pause()">暂停</button> <buttononClick="document.getElementById('myVideo').volume += 0.1">音量+</button> <buttononClick="document.getElementById('myVideo').volume -= 0.1">音量-</button> <buttononClick="document.getElementById('myVideo').muted = true">静音</button> <buttononClick="document.getElementById('myVideo').muted = false">取消静音</button> </body> </html>
效果
二、HTML5的Audio元素
1.使用audio标记插入音频
<audio src="url" controls="controls">替代内容</audio>
<audio>标记的常用属性、取值及说明
audio标记插入音频示例
2. audio元素的访问控制
通过单击按钮触发对象的play()方法和pause()方法实现播放状态的改变；
音量和静音控制则是通过修改对象的volume属性和muted属性实现。
三、使用track元素添加字幕
1.使用track标记插入字幕文件
track元素是video元素的子元素， <track>标记必须被书写在 video元素的开始标记与结束标记之间。
<track>标记的常用属性及说明
示例4
代码
<!--demo0507.html--> <!DOCTYPEhtml> <html> <head> </head> <body> <videowidth="600"id="clip"controls> <sourcesrc="images/sintel.mp4"type="video/mp4"/> <trackkind="captions"src="vtt/sintel-en.vtt"srclang="en"label="English captions"/> <trackkind="captions"src="vtt/sintel-zh.vtt"srclang="zh-cn"label="Chinese"default/> </video> </body> </html>
效果
2.建立WebVTT文件
track元素引用的文件是内部包含了一系列时间标记的文本文件，WebVTT文件是可以添加到轨道中的视频播放器可以显示的文本文件。
在 HTML5中通过<track>标记引用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文件。
四、总结
HTML5的Video元素和Audio元素是新出现的元素，对于一些老用户来说可能还不太了解，而且用的也不是特别频繁，但是我们要知道书到用时方恨少，储备一些必要的知识还是很有用的，通过这篇文章的学习，我们可以基本了解多媒体元素的应用。
