html5中嵌入音频和字幕

在网页中嵌入音频：

用audio元素

<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<audio src="img/e.mp3" controls>
		非常抱歉
	</audio>
</body>
</html>

track元素：

添加字幕，

WebVVT：

互联网视频文本轨道格式，根据该格式编写的文本文件，可以根据不同的需求来显示各种不同样式的字幕，编写字幕文件，文件后缀为.vtt。用小时、分钟、秒和毫秒来标记字幕的位置。

.vtt文件编写样例：

WEBVTT

00:00:01.000 --> 00:00:02.000
Never drink liquid nitrogen.

00:00:02.000 --> 00:00:03.000
第一个

00:00:01.102 --> 00:00:11.234
这就是抛瓦！

00:00:04.100 --> 00:00:05.100
零之力

00:00:06.100 --> 00:00:07.100
第二个

00:00:08.000 --> 00:00:09.000
哈哈哈哈哈哈哈

00:00:10.100 --> 00:00:11.100
第三个

<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<video src="img/f.mp4" width="544px"  controls >
		<track src="track.vtt" srclang="zh" label="中文字幕" kind="subtitles" default >
		非常抱歉
	</video>
</body>
</html>

source元素：

可以添加多个视频格式作为src

<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8">
</head>
<body>
	<video controls>
		<source src="a.mp4" type="video/mp4">
		<source src="b.ogv" type="video/mp4">
		<source src="c.webm" type="video/mp4">
		非常抱歉
	</video>
</body>
</html>
posted @ 2021-02-20 10:03  ice--cream  阅读(774)  评论(0)    收藏  举报