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文件。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
