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>
原文地址:https://www.cnblogs.com/fate-/p/14419349.html