Js视频播放器插件Video.js使用方法详解


Posted in Javascript onFebruary 04, 2020

Video.js快速入门

我们可以下载 Video.js 的源码放到自己的服务器上,或者使用免费的 CDN 托管版本。

在页面中引用video-js.cs样式文件和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路径,Video.js会在不支持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="//3water.com/视频地址格式1.mp4" type='video/mp4' />
  <source src="//3water.com/视频地址格式2.webm" type='video/webm' />
  <source src="//3water.com/视频地址格式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{/*这里的样式重写*/}。

<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 页面或者应用是动态加载 video 标签的(ajax,appendChild),这样在页面加载后这个元素是不存在的,那么你会想要手动设置播放器而不是依靠 data-setup 属性。要做到这一点,首先将 data-setup 属性从 video 标签中移除掉,这样在播放器初始化的时候就不会混乱了。

videojs("xttblog", {}, function(){
 // Player (this) is initialized and ready.
});

videojs 方法中的第一个参数是你的 video 标签的 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类型 的内容

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="//3water.com/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视频播放器插件的文章请点击下面的相关链接

Javascript 相关文章推荐
Prototype源码浅析 String部分(二)
Jan 16 Javascript
查找iframe里元素的方法可传参
Sep 11 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
JavaScript入门教程之引用类型
May 04 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 Javascript
javascript 操作cookies详解及实例
Feb 22 Javascript
JS一个简单的注册页面实例
Sep 05 Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 #jQuery
JS代码优化的8点建议
Feb 04 #Javascript
9种方法优化jQuery代码详解
Feb 04 #jQuery
JS代码检查工具ESLint介绍与使用方法
Feb 04 #Javascript
使用typescript改造koa开发框架的实现
Feb 04 #Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 #Javascript
Vue实现剪切板图片压缩功能
Feb 04 #Javascript
You might like
怎么使 Mysql 数据同步
2006/10/09 PHP
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
基于php伪静态的实现详细介绍
2013/04/28 PHP
PHP读取Excel类文件
2017/05/15 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
jQuery的强大选择器小结
2009/12/27 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
AngularJS快速入门
2015/04/02 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
React实现轮播效果
2020/08/25 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
Python datetime时间格式化去掉前导0
2014/07/31 Python
Python基于twisted实现简单的web服务器
2014/09/29 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
Python通过future处理并发问题
2017/10/17 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
青蓝工程实施方案
2014/03/27 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
2015年暑期社会实践报告
2015/07/13 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS