Video.js使用技巧

最新推荐文章于 2025-05-30 15:57:37 发布

转载最新推荐文章于 2025-05-30 15:57:37 发布 · 2.1k 阅读

文章标签：

#video.js #视频播放

Javascript 专栏收录该内容

2 篇文章

订阅专栏

video.js使用技巧

项目中经常要用到视频播放插件，这里介绍一下一款比较不错的video.js的使用方法。
video.js官方网址点击进入.
video.js下载地址点击进入.

1、基本模板

<head>
  <link href="https://vjs.zencdn.net/7.3.0/video-js.css" rel="stylesheet">

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
</head>

<body>
	<!-- playsinline，webkit-playsinline 禁止自动全屏 -->
  <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" playsinline webkit-playsinline width="640" height="264"
  poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
    <source src="MY_VIDEO.mp4" type='video/mp4'>
    <source src="MY_VIDEO.webm" type='video/webm'>
    <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="https://vjs.zencdn.net/7.3.0/video.js"></script>
</body>

2、样式设置

（1）播放按钮居中添加类名：video-js vjs-default-skin vjs-big-play-centered
（2）暂停时显示播放按钮：

/*暂停时显示播放按钮*/
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
    display: block;
}

/*重新定义按钮样式*/
.video-js .vjs-big-play-button{
    font-size: 2.5em;
    line-height: 2.3em;
    height: 2.5em;
    width: 2.5em;
    -webkit-border-radius: 2.5em;
    -moz-border-radius: 2.5em;
    border-radius: 2.5em;
    background-color: #73859f;
    background-color: rgba(115,133,159,.5);
    border-width: 0.15em;
    margin-top: -1.25em;
    margin-left: -1.75em;
}
/* 中间的播放箭头 */
.vjs-big-play-button .vjs-icon-placeholder {
    font-size: 1.63em;
}
/* 加载圆圈 */
.vjs-loading-spinner {
    font-size: 2.5em;
    width: 2em;
    height: 2em;
    border-radius: 1em;
    margin-top: -1em;
    margin-left: -1.5em;
}

3、js基本设置

// 设置flash路径，Video.js会在不支持html5的浏览中使用flash播放视频文件
videojs.options.flash.swf = "video-js.swf";

// 自动播放
var myPlayer = videojs('my-video');
myPlayer.ready(function(){
    var myPlayer = this;
    myPlayer.play();
});

// 播放
myPlayer.play();

// 暂停
myPlayer.pause();

// 获取播放进度
var whereYouAt = myPlayer.currentTime();

// 设置播放进度：
myPlayer.currentTime(120);

// 视频总时长（需视频加载完成后才能获取）
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();
var howTallIsIt = myPlayer.height();

// 设置大小
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);

4、动态插入视频

<a videohref="http://xxx.mp4" class="video_link"><img  src="../images/xxx.jpg"/></a>

$(".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();
});