video.js使用改变ui过程的示例分析
这篇文章主要介绍了video.js使用改变ui过程的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
成都创新互联主营黄岩网站建设的网络公司,主营网站建设方案,成都App定制开发,黄岩h5重庆小程序开发搭建,黄岩网站营销推广欢迎黄岩等地区企业咨询
Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。(要支持ie低版本请下载5.4.3版 )
废话不多说了,直接给大家贴代码了,具体代码如下所示:
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
//在自定义的全屏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过程的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
网站标题:video.js使用改变ui过程的示例分析
分享链接:http://myzitong.com/article/jhisoj.html