点击下载教程相关资源
不建议尝试切换 Video.js 播放器的可见性或显示。相反，应根据需要创建和删除（ disposed）播放器。
这与在模态/叠加中显示播放器等用例有关。与在 DOM 元素中保留隐藏的 Video.js 播放器相比，建议在打开模态时创建播放器，并在关闭模态时将其删除（ disposed）。
注意：在涉及内存/资源使用时（如移动设备），这一点尤为重要。
根据所使用的库/框架，实现方式可能如下：
modal.on('show', function() {
var videoEl = modal.findEl('video');
modal.player = videojs(videoEl);
});
modal.on('hide', function() {
modal.player.dispose();
});完整示例：
<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://www.hxstrive.com/cdn/libs/video.js/8.9.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>
<div id="container">
<!-- 放置播放器 -->
</div>
<p>
<button onclick="show()">显示</button>
<button onclick="hide()">隐藏</button>
</p>
<!-- 引入 Video.js 库 -->
<script src="https://www.hxstrive.com/cdn/libs/video.js/8.9.0/video.min.js"></script>
<script>
let player = undefined;
// 显示
function show() {
document.getElementById("container").innerHTML =
"<video id=\"vid1\" class=\"video-js\">\n" +
" <source src=\"https://www.hxstrive.com/hxstrivedocs/source/oceans.mp4\" type=\"video/mp4\" />\n" +
" <source src=\"https://www.hxstrive.com/hxstrivedocs/source/oceans.webm\" type=\"video/webm\" />\n" +
"</video>";
player = videojs('vid1', {
preload: "auto",
controls: true,
width: "640",
height: "264px",
poster: "https://www.hxstrive.com/hxstrivedocs/source/oceans.jpg"
});
player.play();
}
// 隐藏
function hide() {
if (!!player) {
// 同时从 DOM 和内存中移除 Video.js 播放器
player.dispose();
}
}
</script>
</body>
</html>运行示例，效果图：
川公网安备51010802032098