点击下载教程相关资源
Video.js 旨在增强 HTML5 中的视频元素，多年来，其嵌入代码一直只是一个 <video> 元素。然后，Video.js 将视频元素封装在一个 div 中，用于放置控件和播放器所需的其他内容。
在很长一段时间里，这已经足够了。在 2016 年，Video.js 添加了“div ingest”，它允许开发者为 Video.js 提供一个播放器 div 供其使用，而不用自己制作。这一方面是为了帮助内容回流，另一方面也是为了帮助 iOS，因为在 iOS 中有时需要对视频元素进行预处理，而我们在创建播放器 div 时会重新创建视频元素。然而，将 <video> 元素与包装在其周围 <div> 一起嵌入会有些奇怪。因此，我们构建了一个新的嵌入，<video-js> 嵌入。
下面详细介绍了三种嵌入方式：
经典的 Video.js 嵌入。您可以通过 data-setup 或 videojs 方法对其进行初始化。
data-setup 方式：
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video.js</title>
<!-- 引入 Video.js 样式 -->
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
<!-- 如果您想支持 IE8（适用于 v7 之前的 Video.js 版本） -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
<!-- 通过 data-setup -->
<video id="vid1"
data-setup='{"preload":"auto","controls":true,"width":"640","height":"264px","poster":"../resources/oceans.jpg"}'>
<source src="../resources/oceans.mp4" type="video/mp4" />
<source src="../resources/oceans.webm" type="video/webm" />
</video>
<!-- 引入 Video.js 库 -->
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
</body>
</html>videojs 方式：
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video.js</title>
<!-- 引入 Video.js 样式 -->
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
<!-- 如果您想支持 IE8（适用于 v7 之前的 Video.js 版本） -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
<!-- 通过 videojs -->
<video id="vid1">
<source src="../resources/oceans.mp4" type="video/mp4" />
<source src="../resources/oceans.webm" type="video/webm" />
</video>
<!-- 引入 Video.js 库 -->
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
<script>
const player = videojs('vid1', {
preload: "auto",
controls: true,
width: "640",
height: "264px",
poster: "../resources/oceans.jpg"
});
</script>
</body>
</html>增强型经典嵌入。您也可以通过 data-setup 或 videojs 方法对其进行初始化。例如：
data-setup 方式：
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video.js</title>
<!-- 引入 Video.js 样式 -->
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
<!-- 如果您想支持 IE8（适用于 v7 之前的 Video.js 版本） -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
<!-- 通过 data-setup -->
<div data-vjs-player>
<video id="vid1"
data-setup='{"preload":"auto","controls":true,"width":"640","height":"264px","poster":"../resources/oceans.jpg"}'>
<source src="../resources/oceans.mp4" type="video/mp4" />
<source src="../resources/oceans.webm" type="video/webm" />
</video>
</div>
<!-- 引入 Video.js 库 -->
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
</body>
</html>videojs 方式：
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video.js</title>
<!-- 引入 Video.js 样式 -->
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
<!-- 如果您想支持 IE8（适用于 v7 之前的 Video.js 版本） -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
<!-- 通过 videojs -->
<div data-vjs-player>
<video id="vid1">
<source src="../resources/oceans.mp4" type="video/mp4" />
<source src="../resources/oceans.webm" type="video/webm" />
</video>
</div>
<!-- 引入 Video.js 库 -->
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
<script>
const player = videojs('vid1', {
preload: "auto",
controls: true,
width: "640",
height: "264px",
poster: "../resources/oceans.jpg"
});
</script>
</body>
</html>如您所见，它与经典的 <video> 嵌入并无太大区别，它还能让您更轻松地使用 React。
它看起来非常像 <video> 嵌入，但不是 video，而是 video-js 嵌入。这对播放器 div 摄录的所有功能都很有用，而且与我们的库名相匹配。例如：
data-setup 方式：
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video.js</title>
<!-- 引入 Video.js 样式 -->
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
<!-- 如果您想支持 IE8（适用于 v7 之前的 Video.js 版本） -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
<!-- 通过 data-setup -->
<video-js id="vid1"
data-setup='{"preload":"auto","controls":true,"width":"640","height":"264px","poster":"../resources/oceans.jpg"}'>
<source src="../resources/oceans.mp4" type="video/mp4" />
<source src="../resources/oceans.webm" type="video/webm" />
</video-js>
<!-- 引入 Video.js 库 -->
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
</body>
</html>videojs 方式：
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video.js</title>
<!-- 引入 Video.js 样式 -->
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
<!-- 如果您想支持 IE8（适用于 v7 之前的 Video.js 版本） -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
<!-- 通过 videojs -->
<video-js id="vid1">
<source src="../resources/oceans.mp4" type="video/mp4" />
<source src="../resources/oceans.webm" type="video/webm" />
</video-js>
<!-- 引入 Video.js 库 -->
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
<script>
const player = videojs('vid1', {
preload: "auto",
controls: true,
width: "640",
height: "264px",
poster: "../resources/oceans.jpg"
});
</script>
</body>
</html>此嵌入无需再添加“video-js”class ，因为它会自动添加缺失的 class“video-js”。
根据 "Can I Use (https://caniuse.com/#feat=custom-elementsv1)"，本地自定义元素的支持相对较少，而且由于我们不想包含多层填充，所以我们只使用了一个名为 video-js 的元素，而不是一个完整的自定义元素。
这是一种易于使用的方法，可让 Video.js 自动设置播放器。它是一个 HTML 属性，以播放器选项的 JSON 字符串表示值，使用编程方法可能更好。例如：
<!-- 通过 data-setup -->
<video-js id="vid1"
data-setup='{"preload":"auto","controls":true,"width":"640","height":"264px","poster":"../resources/oceans.jpg"}'>
<source src="../resources/oceans.mp4" type="video/mp4" />
<source src="../resources/oceans.webm" type="video/webm" />
</video-js>
川公网安备51010802032098
