video.js的字幕设置

最新推荐文章于 2024-04-26 16:47:03 发布

goaler

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量1.4k

点赞数

文章标签： javascript 前端 html video.js

本文链接：https://blog.csdn.net/goaler/article/details/130458184

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="//vjs.zencdn.net/8.3.0/video-js.css" rel="stylesheet" />
<title>video.js test</title>
</head>

<body>
	<video
		id="my-video"
		class="video-js"
		controls
		preload="auto"
		width="1280"
		height="640"
		data-setup="{}"
	  >
		<source src="video/1.mp4" type="video/mp4" />
		<track kind='captions' src='video/1.vtt' srclang='zh' label='Chinese' default />
		<p class="vjs-no-js">
			To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
		</p>
	 </video>

	<script src="//vjs.zencdn.net/8.3.0/video.min.js"></script>
</body>
</html>

基本设置就是上面这样

注意这里用的字幕文件扩展名是vtt，你需要在服务器上添加MIME，类型为text/vtt，据说是因为这个格式，所有浏览器都支持！

然后是我们平时下载的srt字幕文件，格式一般都是下面这样的