***创建一个视频播放器实例

let myPlayer = this.$video(myVideo, {
controls: true,
autoplay: 'muted',
preload: "auto",
});
  • 创建实例后,可以通过两种方式全局访问它:
this.$video.players.myVideo;
this.$video(myVideo);
  • 删除实例:dispose()

从播放器中删除所有事件侦听器。
删除播放器的DOM元素

myPlayer.on("ended", function() {
this.dispose();
});
  • 改变播放器音量:volume

可以通过volume播放器上的功能更改播放器的音量。音量功能接受0-1的数字。不带参数调用它将返回当前音量

myPlayer.ready(function() {
// get
let howLoudIsIt = myPlayer.volume();
// set
myPlayer.volume(0.1);
});

使用播放信息功能
play 可用于在具有源的播放器上开始播放。
 myPlayer.ready(function() {
myPlayer.play();
});

pause 可用于暂停正在播放的播放器的播放。

myPlayer.ready(function() {
myPlayer.play();
myPlayer.pause();
});

paused 可用于确定播放器当前是否暂停。

myPlayer.ready(function() {
// true
console.log(myPlayer.paused());
// false
console.log(!myPlayer.paused()); myPlayer.play();
// false
console.log(myPlayer.paused());
// true
console.log(!myPlayer.paused()); myPlayer.pause();
// true
console.log(myPlayer.paused());
// false
console.log(!myPlayer.paused());
});

currentTime 提供当前正在播放的当前时间(以秒为单位)。

myPlayer.ready(function() {
// 将当前时间设置为视频中的10秒钟
myPlayer.currentTime(10);
// 得到当前时间 10
let whereYouAt = myPlayer.currentTime();
});

duration 提供正在播放的视频的总持续时间

let lengthOfVideo = myPlayer.duration()

bufferedPercent 提供缓冲视频的当前百分比。

let howMuchIsDownloaded = myPlayer.bufferedPercent();

处理播放器上的来源或海报

 myPlayer.src({type: "video/mp4", src: "http://www.example.com/path/to/video.mp4"});

提供多个版本,以便可以跨浏览器使用HTML5播放,可以使用源对象数组。Video.js将检测支持的版本并加载该文件

myPlayer.src([
{type: "video/mp4", src: "http://www.example.com/path/to/video.mp4"},
{type: "video/webm", src: "http://www.example.com/path/to/video.webm"},
{type: "video/ogg", src: "http://www.example.com/path/to/video.ogv"}
]);

通过API更改设置海报。

// set
myPlayer.poster('http://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1503383566,3103179148&fm=26&gp=0.jpg');
// get
console.log(myPlayer.poster());

获取播放器所有信息

var tech = myPlayer.tech({IWillNotUseThisInPlugins: true});
console.log(tech)

  

最新文章

  1. eayui datagrid 分页 排序 详解
  2. ffmpeg-20160517-git-bin
  3. MVC4 @RenderBody、@RenderSection、@RenderPage、Html.RenderPartial、Html.RenderAction的作用和区别
  4. [题解]某模拟题(USACO月赛部分题+noip2005部分题)
  5. Tempter of the Bone---hdu1010(dfs+剪枝)
  6. [ZZ]Android UI Automated Testing
  7. 51nod1084 矩阵取数问题 V2
  8. Google v8 - Hello world
  9. Spring MVC和Struts2的区别
  10. Java学习的随笔(3)接口
  11. Nubia Z5S 官方4.4 201内測版 内核版本号信息
  12. js中const,var,let区别(转载)
  13. angular笔记_4(函数)
  14. (备忘)怎么去除WinRAR弹窗广告?
  15. IDEA里面添加lombok插件,编写简略风格Java代码(转)
  16. 4.1 C++多态的概念及前提条件
  17. November 08th, 2017 Week 45th Wednesday
  18. CSS-3 Transform 的使用
  19. 使用openstackclient调用Keystone v3 API
  20. QT编译错误:cannot find file: *.pro

热门文章

  1. 微信小程序下拉框实现
  2. AC+AP组网无线WiFi网速超慢延迟卡顿问题解决
  3. 17 数组 Arrays类
  4. 9.Flink实时项目之订单宽表
  5. 昇腾CANN论文上榜CVPR,全景图像生成算法交互性再增强!
  6. SpringDoc-OpenApi与Fastjson冲突——FastJsonHttpMessageConverter对String的默认处理
  7. Spring Security实现统一登录与权限控制
  8. python 实现批量md转word
  9. tomcat启动 ssm项目出现乱码的解决
  10. 记-Golang获取本机IP及快速搭建局域FTP