点击下载教程相关资源
成功创建 Video.js 播放器的实例后，可以通过两种方式对其进行全局访问：
直接调用 videojs('example_video_id') 方法将返回播放器的引用，如下：
<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>
<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>
<p id="message"></p>
<!-- 引入 Video.js 库 -->
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
<script>
const player = videojs("vid1");
document.getElementById("message").innerText = ("id=" + player.id());
</script>
</body>
</html>效果图：
通过 videojs.players.example_video_id 直接使用，例如：
<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>
<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>
<p id="message"></p>
<!-- 引入 Video.js 库 -->
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
<script>
videojs("vid1", null, function(){
// 注意：这里需要等待播放器就绪才能获取到，否则为 undefined
const player = videojs.players.vid1;
document.getElementById("message").innerText = ("id=" + player.id());
});
</script>
</body>
</html>效果图见上面示例。
川公网安备51010802032098