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 编程引入命名空间的方法与代码
Aug 13 Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
js实现直播点击飘心效果
Aug 19 Javascript
使用 JavaScript 制作页面效果
Apr 21 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
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 MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
php目录操作函数之获取目录与文件的类型
2010/12/29 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
python重试装饰器示例
2014/02/11 Python
详解Python的Django框架中的通用视图
2015/05/04 Python
python装饰器与递归算法详解
2016/02/18 Python
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
python实现决策树分类(2)
2018/08/30 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
详解python 中in 的 用法
2019/12/12 Python
Python分类测试代码实例汇总
2020/07/23 Python
python自动生成sql语句的脚本
2021/02/24 Python
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
Etam德国:内衣精品店
2019/08/25 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
2014年单位植树节活动方案
2014/03/23 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
Nginx速查手册及常见问题
2022/04/07 Servers
MySQL创建管理RANGE分区
2022/04/13 MySQL