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

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)

  

视频Video放器的部分实例方法的更多相关文章

  1. HandBrake 开源视频转码器、编码转换器、格式转换器

    HandBrake 开源视频转码器.编码转换器.格式转换器 点击下图进入官网下载页面:https://handbrake.fr/downloads.php macOS 下可能会阻止安装! 其实也不是安 ...

  2. iOS视频倒放

    iOS视频倒放 视频的倒放就是视频从后往前播放,这个只适应于视频图像,对声音来说倒放只是噪音,没什么意义,所以倒放的时候声音都是去除的. 倒放实现 一般对H264编码的视频进行解码,都是从头至尾进行的 ...

  3. canvas 视频音乐播放器

    canvas 视频音乐播放器 var play_nor_img_path = 'images/play_btn_n.png'; //播放按钮 正常时 60x60 px var play_sec_img ...

  4. 基于VLC库C#开发可播放摄像头及任意格式视频的播放器

    前言 本文主要讲述,在WPF中,借助Vlc.DotNet调用VLC类库,实现视频播功能,下面我们先来做开发前的准备工作. 准备工作 首先,我们创建一个项目WpfVLC,然后,进入Neget搜索Vlc. ...

  5. hapv-一个可以播放,下载国内主流视频的播放器

    electron 开发的一个可以播放,下载国内主流视频的播放器.A player developed by electron that can play and download domestic m ...

  6. 最简单的基于FFmpeg的移动端例子:IOS 视频转码器

    ===================================================== 最简单的基于FFmpeg的移动端例子系列文章列表: 最简单的基于FFmpeg的移动端例子:A ...

  7. 去掉video视频播放器下的下载按钮

    去掉video视频播放器下的下载按钮: video::-internal-media-controls-download-button { display:none; } video::-webkit ...

  8. 最简单的基于FFmpeg的移动端样例:IOS 视频转码器

    ===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...

  9. 最简单的基于FFmpeg的移动端样例:Android 视频转码器

    ===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...

随机推荐

  1. 【SQL登录问题】

    essay from:http://www.jb51.net/article/59352.htm 在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误.未找到或无法访问服务器 今早 ...

  2. Laravel—数据库操作与Eloquent模型使用总结

    数据库操作 执行原生SQL //查询 $emp = DB::select('select * from employees where emp_no = 1'); $emp = DB::select( ...

  3. AngularJS集成富文本编辑器

    最近在Angular中需要集成富文本编辑器,本来已经集成好百度的UEditor,后台觉得配置太多,让我弄个别的,然后就找到了wangEditor,这个配置和上手都要简单一些,下面来看看具体操作步骤吧: ...

  4. web自动化之selenium(二)

    selenium自动化测试框架 一.什么是自动化测试 利用软件(或者说机器代替人)实现全部或者部分测试任务的过程 二.为什么要进行自动化测试 ​ 自动化测试可以完成许多手工测试无法实现或难以实现的功能 ...

  5. C语言链接属性

    什么是链接属性 链接属性与C语言中各个目标文件及函数的链接过程有关,用于认定不同文件的标识符(即程序中定义的各种名称,包括变量名.函数名)是否是同一个实体.更通俗地说,就是在两个不同文件中的变量.函数 ...

  6. OpenCv基础_四

    Harris角点检测 理解 内部点:蓝框所示,无论滑动窗口水平滑动还是竖直滑动,框内像素值都不会发生大的变化 边界点:黑框所示,滑动窗口沿着某一个方向滑动框内像素点不会发生大的改变,但是沿着另一个方向 ...

  7. VMware Workstation网络修改vlan id值

    我们捣鼓虚拟机时,有时候网卡是需要承载多个vlan的,比如说部署fuel时网卡3需要承载私有,管理,存储网络的流量. 在virtualbox中我们可以直接在混杂模式项选择全部允许,但是在VMware ...

  8. python3 使用mongo数据库

    0让服务器端开启服务 sudo mongod --port 27017 --dbpath /data/db --logpath /data/log --logappend --fork --auth ...

  9. 什么是内部类?Static Nested Class和Inner Class的不同?

    内部类就是在一个类的内部定义的类,内部类中不能定义静态成员,内部类可以直接访问外部类中的成员变量,内部类可以定义在外部类的方法外面,也可以定义在外部类的方法体中.在方法外部定义的内部类前面可以加上st ...

  10. 使用docker-compose+nginx+uwsgi+django部署项目

    (1)centos上下载docker + docker-compose (2)基础目录 (3)首先创建一个纯净的python+django+uwsgi的镜像,便于后期使用(也可不用创建,后期docke ...