video.js使用改变ui过程

 更新时间:2017年03月05日 10:01:03   作者:joesonwho  
这篇文章主要介绍了video.js使用改变ui的过程,非常不错,具有参考借鉴价值,需要的朋友可以参考下

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判断对象是否为空对象的几种常见方法

    经典面试题,研发时也经常遇见的一个问题,如何判断一个对象是空对象,这篇文章主要给大家介绍了关于JavaScript判断对象是否为空对象的几种常见方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • js生成验证码并直接在前端判断

    js生成验证码并直接在前端判断

    众所周知,js是客户端的,那么把验证都做在客户端有意义吗?还是必须从服务器生成的验证码安全啊?前端生成的验证码安全吗?x下面我们来看个例子
    2015-05-05
  • 原生js封装的一些jquery方法(详解)

    原生js封装的一些jquery方法(详解)

    下面小编就为大家带来一篇原生js封装的一些jquery方法(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • javascript showModalDialog,open取得父窗口的方法

    javascript showModalDialog,open取得父窗口的方法

    showModalDialog,open取得父窗口的代码,需要的朋友可以参考下。
    2010-03-03
  • 微信公众号weixin-js-sdk使用方法总结

    微信公众号weixin-js-sdk使用方法总结

    最近做了一个活动页面,需要自定义微信分享的标题、详情、缩略图和url,使用到了jssdk,这篇文章主要给大家介绍了关于微信公众号weixin-js-sdk使用方法的相关资料,需要的朋友可以参考下
    2022-12-12
  • 关于微信jssdk实现多图片上传的一点心得分享

    关于微信jssdk实现多图片上传的一点心得分享

    这篇文章主要介绍了关于微信jssdk实现多图片上传的一点心得分享,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-12-12
  • 原生js实现表格循环滚动

    原生js实现表格循环滚动

    这篇文章主要为大家详细介绍了原生js实现表格循环滚动,每次滚动一行停顿,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • JS获取URL中的参数数据

    JS获取URL中的参数数据

    这篇文章主要介绍了JS获取URL中的参数数据,有需要的朋友可以参考一下
    2013-12-12
  • JS使用getComputedStyle()方法获取CSS属性值

    JS使用getComputedStyle()方法获取CSS属性值

    经常会用到js来获取元素的CSS样式,由于方法众多,在下面的文章中为大家详细整理下
    2014-04-04
  • webgl实现物体描边效果的方法介绍

    webgl实现物体描边效果的方法介绍

    这篇文章主要给大家介绍了关于webgl实现物体描边效果的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用webgl具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-11-11

最新评论