最新公告  | 
  • CTRL + D 加入收藏不迷路哦

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

Html5视频播放插件video.js使用技巧及细节优化

最近公司项目有一个网页播放需求,在百度搜索了一大圈发现video.js这个视频播放插件能够很好满足需求,于是果断拿下来使用,其中也对video.js视频插件默认的样式进行了一个优化,特此整理一下,方便需要的小伙伴提供参考,也是对自己使用过程的一个总结。

插件描述

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。(要支持ie低版本请下载5.4.3版,文章最下方会附上相关版本链接,下载即可! )

使用方法

在页面中引用video-js.css样式文件和video.js文件

<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>

设置flash路径

Video.js会在不支持html5的浏览中使用flash播放视频文件,具体设置如下:

videojs.options.flash.swf = "video-js.swf";

html结构

<video id="example_video_1" class="video-js vjs-default-skin" poster="default.jpg" preload="none" controls="controls" width="640" height="264" data-setup="{}">
    <source src="http://视频地址格式1.mp4" type="video/mp4" />
    <source src="http://视频地址格式2.webm" type="video/webm" />
    <source src="http://视频地址格式3.ogv" type="video/ogg" />
    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English" /><!-- Tracks need an ending tag thanks to IE9 -->
    <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English" /><!-- Tracks need an ending tag thanks to IE9 -->
</video>

poster="default.jpg"是用来设置播放的初始图。可使用三种视频格式,大家根据所需要格式选择对应的。

注意:在<video>标签里面的class="video-js"data-setup='{}'属性,两者缺一不可。

刚开始的时候我觉得后面的值为空对象{},不放也行,

导致播放器加载不出来,后来加上来就可以了。

设置自动播放将下面代码加到html中代码后面:

var myPlayer = videojs('example_video_1');
videojs("example_video_1").ready(function(){
  var myPlayer = this;
  myPlayer.play();
});

另外一种初始化 video.js 的方法是通过JS,格式:

var player = videojs('my-player');

这样有个要求,就是不能配置data-setup,并且需要传入<video>id

当然,如果不想一个个初始化,可以这样:

(function(){
    var videos = document.getElementsByTagName('video');
    for(i=0; i<videos.length; i++) { var video = videos[i]; if(video.className.indexOf('video-js') > -1) {
            videojs(video.id).ready(function(){
            });
        }
    }
})();

播放按钮居中

默认情况下,大的播放按钮是被定为在左上角的,这样就不会覆盖视频内容。如果你想让这个播放按钮居中,可以通过参数修改的,在<video>标签中加入vjs-big-play-centered类,就可以了,像这样:

class="video-js vjs-big-play-centered"

支持<audio>音乐标签

video.js 4.9版本开始支持<audio>标签,与video不同的是:播放audio时封面不会消失。

但是上面的播放框还是一直在的,配置方式和<video>标签一样,也必须要配置data-setup参数。

禁止在iPhone safari中自动全屏

方法如下,在<video>标签中加入playsinline参数,

<video playsinline ></video>

注意,在iOS10之前用的是webkit-playsinline

暂停时显示播放按钮

video.js 在未播放时,会显示一个大的播放按钮,上面我们提到如何让他居中。

那么,如何在视频暂停时也显示这个播放按钮呢?如下图:

Html5视频播放插件video.js使用技巧及细节优化

有很多用JS的解决办法,感觉都挺麻烦的。

其实用CSS就可以搞定了:

.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
    display: block;
}

是不是很轻便很简单,哈哈.

播放按钮变○圆形

video.js 默认的播放按钮是圆角矩形,

我们一般更熟悉播放按钮为圆形的,如下图:

播放按钮变○圆形

如何修改呢?当然还是用CSS来解决喽。

.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;
}

因为原来居中的时候宽度和高度改变了,所以margin的值也要相应改变

点击屏幕播放/暂停

这个是视频播放的时候用得较多的功能,解决方法如下。

.video-js.vjs-playing .vjs-tech {
    pointer-events: auto;
}

pointer-eventsCSS的一个属性,用来控制鼠标的动作。

重载视频文件

总有那么一些情形,我们需要 video.js 重新载入视频文件。

比如,立即播放刚上传的文件。

例如这样的标签:

<video id="example_video">
    <source id="videoMP4" src="1.mp4" />
</video>
<button id="reload">重载</button>

在video.js中,用现成的js方法就可以实现:

var video = document.getElementById('example_video');
var source = document.getElementById('videoMP4');
$("#reload").click(function() {
    video.pause()
    source.setAttribute('src', '2.mp4');
    video.load();
    video.play();
});

或者:

var video = document.getElementById('example_video');
$("#reload").click(function() {
    video.pause()
    video.setAttribute('src', '2.mp4');
    video.load();
    video.play();
});

进度显示当前播放时间

video.js 默认倒序显示时间,也就是视频播放的剩余时间,如下图:

进度显示当前播放时间

要显示当前的播放时间,以及总共视频时长,加2行CSS解决:

.video-js .vjs-time-control{display:block;}
.video-js .vjs-remaining-time{display: none;}

最终效果如下:

进度显示当前播放时间

其他方法

var myPlayer = videojs('example_video_1');

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);

相关版本下载地址

Video.js最新v7.5.5版 2019-7-4最新

Bug修复:

  • 在自动播放直播时的一些问题

点击下载地址  提取码:56oa

Video.js最新v7.4.1版 2019-1-9更新

错误修复:

  • 使用VoiceOver显示当前时间和持续时间
  • 修复进度栏中隐藏的控制文本
  • 更好的适应屏幕阅读器用户
  • 追加UKR翻译并修复检查翻译命令
  • 改进sv lang文件

点击下载地址 提取码:y5gc

Video.js最新v7.1.0版 2018-7-16

(7.0以上版本相比之前版本文件大了很多,对文件大小有要求的朋友请选择7.0以下版本)

功能:

  • 自动播放:扩展自动播放选项以获得更好的效果
  • 浏览器:在检测谷歌浏览器时包含iOS Chrome UA模式
  • 全屏切换:如果全屏不可用,则禁用fs按钮

Bug修复:

  • 除了DOM对象外,允许对象(如组件和插件)监听窗口对象。
  • 浏览器:使用Win10进行TOUCH_ENABLED检测

代码重构:

  • 删除了旧的bug解决方法代码

性能改进:

  • setTimeout和requestAnimationFrame内存泄漏

还原:

  • 修复:除了DOM对象之外,允许对象(例如组件和插件)监听窗口对象

点击下载地址 提取码:hfh6

Video.js最新v6.6.2版 2018-1-02更新

Bug 修复:

  • 进度条时间工具提示bug通过添加word-break css reset
  • 在寻求  时, 在Safari中拒绝未处理的承诺

例行工作:

  • netlify:在netlify命令中添加一些调试信息

点击下载地址 提取码:n8f3

Video.js v6.2.8版 2017-11-09更新

点击下载地址 提取码:a4gn

Video.js v6.2.5版 2017-8-21更新

点击下载地址 提取码:mo20

Video.js v5.18.4版 2017-3-24更新(支持ie8)

点击下载地址 提取码:5vxs

Video.js v5.16版 2017-2-16更新

点击下载地址 提取码:2dd5

Video.js v5.10.8版 2016-10-11更新

点击下载地址 提取码:xbi4

Video.js v5.8.8版 2016-4-11更新

点击下载地址 提取码:6wt1

Video.js历史v5.4.3版 2015-12-09更新

点击下载地址 提取码:jbq5

结语

以上就是码云笔记整理的关于Html5视频播放插件video.js使用技巧及细节优化全部内容,因为我也是第一次使用video.js,所以有些不足欢迎留言讨论。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » Html5视频播放插件video.js使用技巧及细节优化

发表评论