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 相关文章推荐
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
JS上传前预览图片实例
Mar 25 Javascript
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
js获取表格的行数和列数的方法
Oct 23 Javascript
AngularJS入门教程之控制器详解
Jul 27 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 Javascript
原生JS使用Canvas实现拖拽式绘图功能
Jun 05 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 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
php根据用户语言跳转相应网页
2015/11/04 PHP
详解PHP中array_rand函数的使用方法
2016/09/11 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
2020/09/04 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
Python中的类学习笔记
2014/09/23 Python
python实现的文件同步服务器实例
2015/06/02 Python
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
在centos7中分布式部署pyspider
2017/05/03 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
师范毕业生求职自荐信
2013/09/25 职场文书
前台文员的岗位职责
2013/11/14 职场文书
篮球社团活动总结
2014/06/27 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
mysql函数全面总结
2021/11/11 MySQL