本文详细介绍 Video.js 插件的集成方法与核心 API 使用。涵盖从 CDN 引入、Flash 兼容配置到动态元素初始化的完整流程。重点解析播放器实例化后的常用方法，包括播放控制、进度与音量调节、尺寸调整及全屏功能，并列举关键事件监听与模态窗口集成方案，帮助开发者高效实现 Web 端视频播放功能。
Video.js 集成与初始化
Video.js 快速入门指南
开发者可选择下载 Video.js 源码部署至自有服务器，或直接调用免费的 CDN 托管资源。
在网页中引入 video-js.css 样式表及 video.js 脚本文件。
<link href="video-js.css" rel="external nofollow" rel="stylesheet" type="text/css">
<script src="video.js"></script>若选择使用免费 CDN 托管版本，需正确引用相关资源。
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="external nofollow" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>配置 Flash 路径，以便在不支持 HTML5 的浏览器中通过 Flash 插件播放视频文件。
<script>
videojs.options.flash.swf = "video-js.swf";
</script>引入 video 标签以实现视频播放功能。
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup="{}">
<source src="https://www.jb51.net/视频地址格式1.mp4" type='video/mp4' />
<source src="https://www.jb51.net/视频地址格式2.webm" type='video/webm' />
<source src="https://www.jb51.net/视频地址格式3.ogv" type='video/ogg' />
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
</video>如需启用自动播放，请将相关代码添加至 video 标签之后。
实现播放按钮居中显示。
默认情况下，大型播放按钮位于左上角以避免遮挡视频内容。若需将其居中，可为 video 标签添加 vjs-big-play-centered 样式类。若对播放按钮外观不满意，可通过重写 .video-js .vjs-big-play-button 的 CSS 样式进行调整。
<video id="xttblog" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" width="640" height="264"
poster="http://www.xttblog.com/test/oceans-clip.png"
data-setup='{"example_option":true}'>
</video>为动态加载的 HTML 元素配置 Video.js。
当 Web 页面或应用通过 AJAX 或 appendChild 动态加载 video 标签时，该元素在页面初始加载阶段并不存在。此时，应手动初始化播放器，而非依赖 data-setup 属性。操作时，首先从 video 标签中移除 data-setup 属性，以避免播放器初始化时的冲突。
videojs("xttblog", {}, function(){
// Player (this) is initialized and ready.
});videojs 方法的第一个参数为 video 标签的 ID，请替换为您实际的 ID。
第二个参数为选项对象，允许您以与设置 data-setup 属性相同的方式配置额外选项。
第三个参数为 'ready' 回调函数，Video.js 初始化完成后将触发此回调。
您也可以直接传入元素引用代替元素 ID。
videojs(document.getElementById('example_video_1'), {}, function() {
// This is functionally the same as the previous example.
});
videojs(document.getElementsByClassName('awesome_video_class')[0], {}, function() {
// You can grab an element by class if you'd like, just make sure
// if it's an array that you pick one (here we chose the first).
});若内容无法播放，请确保使用了正确的格式，并确认 HTTP 服务器能够提供正确的 MIME 类型。
播放器 API 常用方法
Video.js 的详细使用方法如下
var videoObj = videojs(“videoId”);ready:
myPlayer.ready(function(){
//在回调函数中，this代表当前播放器，
//可以调用方法，也可以绑定事件。
})播放：
myPlayer.play();暂停：
myPlayer.pause();获取播放进度：
var whereYouAt = myPlayer.currentTime();设置播放进度：
myPlayer.currentTime(120);视频持续时间：仅在视频加载完成后才能获取，且在 Flash 模式下无效。
var howLongIsThis = myPlayer.duration();缓冲状态：返回已下载的数据量。
var whatHasBeenBuffered = myPlayer.buffered();缓冲百分比。
var howMuchIsDownloaded = myPlayer.bufferedPercent();音量大小（取值范围 0-1）。
var howLoudIsIt = myPlayer.volume();设置音量大小。
myPlayer.volume(0.5);获取视频宽度。
var howWideIsIt = myPlayer.width();设置宽度：
myPlayer.width(640);获取高度。
var howTallIsIt = myPlayer.height();设置高度：
myPlayer.height(480);一步到位设置大小：
myPlayer.size(640,480);进入全屏。
myPlayer.enterFullScreen();退出全屏。
myPlayer.enterFullScreen();事件监听与高级应用
添加事件监听。
durationchange
ended //播放结束
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause //暂停
play //播放
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited
var myFunc = function(){
// Do something when the event is fired
};事件绑定。
myPlayer.on("ended", function(){
console.log("end", this.currentTime());
});
myPlayer.on("pause", function(){
console.log("pause")
});删除事件监听。
myPlayer.removeEvent(“eventName”, myFunc);页面包含多个视频时，点击后可触发 Bootstrap 模态窗口并弹出视频。
html:
<a videohref="//www.jb51.net/xxx.mp4" class="video_link"><img src="../images/xxx.jpg"/></a>JS:
$(".video_link").click(function() {
var myPlayer = videojs('my-video');
var videoUrl = $(this).attr("videohref");
videojs("my-video", {}, function() {
window.myPlayer = this;
$("#mymoda .video-con #my-video source").attr("src", videoUrl);
myPlayer.src(videoUrl);
myPlayer.load(videoUrl);
myPlayer.play();
});
$(".click-modal").click();
});
// 模态窗消失时，关闭视频
$('#mymoda').on('hidden.bs.modal', function() {
myPlayer.pause();更多关于 Js 视频播放器插件的文章请点击下面的相关链接