HTML总结（三）

2022-02-03 171

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： HTML5的Video元素和Audio元素

一、HTML5的Video元素

1.使用video标记插入视频

代码格式：

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

<video>标记常用属性及说明

QQ截图20220202224005.png

示例1

代码

QQ截图20220202224302.png

效果

QQ截图20220202225029.png

2. video元素的访问控制

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

<video>标记常用方法和事件

QQ截图20220202224444.png

示例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>

效果

QQ截图20220202225112.png

示例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>

效果

QQ截图20220202225147.png

二、HTML5的Audio元素

1.使用audio标记插入音频

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

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

QQ截图20220202225414.png

audio标记插入音频示例

QQ截图20220202225607.png QQ截图20220202225636.png

2. audio元素的访问控制

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

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

QQ截图20220202225829.png

三、使用track元素添加字幕

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

track元素是video元素的子元素， <track>标记必须被书写在 video元素的开始标记与结束标记之间。

<track>标记的常用属性及说明

QQ截图20220202225945.png

示例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>

效果

QQ截图20220202230201.png

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文件。

QQ截图20220202230336.png

四、总结

HTML5的Video元素和Audio元素是新出现的元素，对于一些老用户来说可能还不太了解，而且用的也不是特别频繁，但是我们要知道书到用时方恨少，储备一些必要的知识还是很有用的，通过这篇文章的学习，我们可以基本了解多媒体元素的应用。