video.js使用改变ui过程


Posted in Javascript onMarch 05, 2017

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

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<video id="my_video" class="video-js vjs-default-skin vjs-big-play-centered my-vedio" preload="auto" controls width="800" height="600" align="middle" poster="image/vedio.png" data-setup="{}">
  <source src="video/2.mp4" type="video/mp4" />
  <!-- 加载hls视频-->
  <source src="http://live.hkstv.hk.lxdns.com/live/hks/playlist.m3u8" type="application/x-mpegURL">
  <!-- 加载rtmp视频-->
  <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks" type="rtmp/flv" />
</video>

poster属性用于设置预览图

source用于设置视频地址

获取video中各种默认UI

var myPlayer = videojs('my_video');
var c = myPlayer.controlBar.children();
console.log(c);

我只发现了一个比较蠢的办法。

在console中可以看到一个UI数组,选择自己要改变的变量,比如我要删除全屏图标,重新添加全屏事件

myPlayer.controlBar.removeChild(c[15]);
 var SBtn = myPlayer.controlBar.addChild('button');
 SBtn.addClass('vjs-fullscreen-control');
 SBtn.add<br>//在自定义的全屏button中添加id属性
 SBtn.setAttribute('id', 'fs');
 // 播放时处理的代码
 myPlayer.on('play', function(event) {
  event.preventDefault();
  /* Act on the event */
  played = true;
  console.log('play');
  $("#md-video-title").hide();
 });
 // 停止时要处理的代码
 myPlayer.on('pause', function(event) {
  event.preventDefault();
  /* Act on the event */
  played = false;
  console.log('play');
  $("#md-video-title").show();
 });
 $("#fs").on('click', function(event) {
  console.log("放大视频");
  $('#myModal').modal('toggle')
  $("#hide-container").after($("#my_video"));
  $("#my_video").css({
   width: '1140',
   height: '600',
   'border-color':'#ffffff'
  });
  if (played) {
   myPlayer.play();
  }
 });

以上所述是小编给大家介绍的video.js使用改变ui过程,希望对大家有所帮助!

Javascript 相关文章推荐
Javascript 判断客户端浏览器类型代码
Mar 01 Javascript
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
js完整倒计时代码分享
Sep 18 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
validationEngine 表单验证插件使用实例代码
Jun 15 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
Mar 03 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 Javascript
原生JavaScript实现随机点名表
Jan 14 Javascript
Angular开发者指南之入门介绍
Mar 05 #Javascript
JavaScript自定义文本框光标
Mar 05 #Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 #Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 #Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 #Javascript
详解vue父子模版嵌套案例
Mar 04 #Javascript
vue指令以及dom操作详解
Mar 04 #Javascript
You might like
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
原生js实现移动端触摸轮播的示例代码
2017/12/22 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
JS实现放烟花效果
2020/03/10 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
Python实现类的创建与使用方法示例
2017/07/25 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
python实现最长公共子序列
2018/05/22 Python
Python subprocess模块常见用法分析
2018/06/12 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
python nmap实现端口扫描器教程
2020/05/28 Python
Python实现图像的垂直投影示例
2020/01/17 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
女大学生毕业找工作的自我评价
2013/10/03 职场文书
信息科学与技术专业求职信范文
2014/02/20 职场文书
交通违章检讨书
2014/09/21 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书