video.js的字幕设置

最新推荐文章于 2024-08-30 07:45:16 发布

goaler

最新推荐文章于 2024-08-30 07:45:16 发布

阅读量1.9k

点赞数

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

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

版权

该代码示例展示了如何使用video.js库在网页中嵌入一个MP4视频，并添加VTT格式的中文字幕。为了使字幕正常工作，需要在服务器上配置MIME类型为text/vtt，同时将SRT字幕文件的时间轴逗号替换为点，且第一行需注明WEBVTT作为文件格式声明。

摘要由CSDN通过智能技术生成

<!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字幕文件，格式一般都是下面这样的