video.js使用详解（转载）

原文链接： 

Video.js使用教程一（详解）

版权声明：本文为little__SuperMan原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/little__SuperMan/article/details/89203270

 

 

 

二、Video.js的使用

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器

1、我在这里使用的是5.x版本的下载链接：https://download.csdn.net/download/little__superman/11108903

2、下载解压完成后，引入文件

1.  
   <link href="css/5.0css/video-js.css" rel="stylesheet" type="text/css">
2.  
   <script src="js/5.0js/videojs-ie8.min.js"></script>
3.  
   <script src="js/5.0js/video.min.js"></script>
4.  
   <script src="js/videojs-contrib-hls.js"></script>

3、在页面加入video标签

1.  
   <h1>香港卫视</h1>
2.  
   <video id="example_video" width="800" height="500" class="video-js vjs-default-skin " controls poster="">
3.  
   <!-- RTMP直播源地址:香港卫视-->
4.  
   <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks1" type="rtmp/flv">
5.  
   </video>

poster：是视频的缩略图,也就是未播放是显示的图片

controls：向用户显示播放按钮控件

4、一小段js代码对视频进行一些控制或制定

1.  
   <script>
2.  
   var player = videojs('example_video');
3.  
   </script>

5、效果图：

播放前：

播放中：

6、默认情况下，播放按钮是被定为在左上角的，这样就不会覆盖视频内容。如果你想让这个播放按钮居中，你可以给你的 video 标签添加额外的 vjs-big-play-centered样式。

1.  
   <h1>香港卫视</h1>
2.  
   <video id="example_video" width="800" height="500" class="video-js vjs-default-skin vjs-big-play-centered" controls poster="">
3.  
   <!-- RTMP直播源地址:香港卫视-->
4.  
   <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks1" type="rtmp/flv">
5.  
   </video>

7、进阶-使用video.js的api对videojs全局函数的使用

videojs是全局函数，它可以接收三个参数（id,options,onready）: 第一个参数是video标签的id比如:videojs('#example_video_1'); 第二参数是配置选项，除了在这里给出之外，还可以通过在video标签中，通过data-setup='{}'属性的形式给出。第三个参数实际上是videojs初始化完成之后的回调函数，在这个里函数里边，可以使用this引用videojs的实例对象。进行开始播放、停止等操作。

(1)、常用配置选项

1.  
   autoplay: false, //自动播放：true/false
2.  
   controls: true, //是否显示底部控制栏：true/false
3.  
   width: 300, //视频播放器显示的宽度
4.  
   height: 300, //视频播放器显示的高度
5.  
   loop: false, //是否循环播放:true/false
6.  
   muted: false, //设置默认播放音频：true/false
7.  
   poster:"", //视频开始播放前显示的图像的URL。这通常是一个帧的视频或自定义标题屏幕。一旦用户点击“播放”图像就会消失
8.  
   src:"", //要嵌入的视频资源url，The source URL to a video source to embed.
9.  
   techOrder: ['html5', 'flash'], //使用播放器的顺序,下面的示例说明优先使用html5播放器，如果不支持将使用flash
10.  
    notSupportedMessage: false, //是否允许重写默认的消息显示出来时，video.js无法播放媒体源
11.  
    plugins: {}, //插件
12.  
    sources: [{src: '//path/to/video.mp4', type: 'video/mp4'}] //资源文件等价于html中的形式source标签
13.  
    aspectRatio:"1:1" //将播放器置于流体模式下，计算播放器动态大小时使用该值。
14.  
    //该值应该是比用冒号隔开的两个数字（如“16:9”或“4:3”）。
15.  
    fluid: false, //是否自适应布局,播放器将会有流体体积。换句话说，它将缩放以适应容器。
16.  
    // 如果<video>标签有“vjs-fluid”样式时，这个选项会自动设置为true。
17.  
    preload: "metadata", //建议浏览器是否在加载<video>元素时开始下载视频数据。(预加载)
18.  
    //auto:立即加载视频（如果浏览器支持它）。一些移动设备将不会预加载视频，以保护用户的带宽/数据使用率。这就是为什么这个值被称为“自动”，而不是更确凿的东西
19.  
    // metadata:只加载视频的元数据，其中包括视频的持续时间和尺寸等信息。有时，元数据会通过下载几帧视频来加载。
20.  
    //none

(2)、常用事件

1.  
   this.on('suspend', function() {//延迟下载
2.  
   console.log("延迟下载")
3.  
   });
4.  
   this.on('loadstart', function() { //客户端开始请求数据
5.  
   console.log("客户端开始请求数据")
6.  
   });
7.  
   this.on('progress', function() {//客户端正在请求数据
8.  
   console.log("客户端正在请求数据")
9.  
   });
10.  
    this.on('abort', function() {//客户端主动终止下载（不是因为错误引起）
11.  
    console.log("客户端主动终止下载")
12.  
    });
13.  
    this.on('error', function() {//请求数据时遇到错误
14.  
    console.log("请求数据时遇到错误")
15.  
    });
16.  
    this.on('stalled', function() {//网速失速
17.  
    console.log("网速失速")
18.  
    });
19.  
    this.on('play', function() {//开始播放
20.  
    console.log("开始播放")
21.  
    });
22.  
    this.on('pause', function() {//暂停
23.  
    console.log("暂停")
24.  
    });
25.  
    this.on('loadedmetadata', function() {//成功获取资源长度
26.  
    console.log("成功获取资源长度")
27.  
    });
28.  
    this.on('loadeddata', function() {//渲染播放画面
29.  
    console.log("渲染播放画面")
30.  
    });
31.  
    this.on('waiting', function() {//等待数据，并非错误
32.  
    console.log("等待数据")
33.  
    });
34.  
    this.on('playing', function() {//开始回放
35.  
    console.log("开始回放")
36.  
    });
37.  
    this.on('canplay', function() {//可以播放，但中途可能因为加载而暂停
38.  
    console.log("可以播放，但中途可能因为加载而暂停")
39.  
    });
40.  
    this.on('canplaythrough', function() { //可以播放，歌曲全部加载完毕
41.  
    console.log("可以播放，歌曲全部加载完毕")
42.  
    });
43.  
    this.on('seeking', function() { //寻找中
44.  
    console.log("寻找中")
45.  
    });
46.  
    this.on('seeked', function() {//寻找完毕
47.  
    console.log("寻找完毕")
48.  
    });
49.  
    this.on('timeupdate', function() {//播放时间改变
50.  
    console.log("播放时间改变")
51.  
    });
52.  
    this.on('ended', function() {//播放结束
53.  
    console.log("播放结束")
54.  
    });
55.  
    this.on('ratechange', function() {//播放速率改变
56.  
    console.log("播放速率改变")
57.  
    });
58.  
    this.on('durationchange', function() {//资源长度改变
59.  
    console.log("资源长度改变")
60.  
    });
61.  
    this.on('volumechange', function() {//音量改变
62.  
    console.log("音量改变")
63.  
    });

(3)、常用方法

• 播放：myPlayer.play();
• 暂停：myPlayer.pause();
• 获取播放进度：var whereYouAt = myPlayer.currentTime();
• 设置播放进度：myPlayer.currentTime(120);
• 视频持续时间，加载完成视频才可以知道视频时长，且在flash情况下无效: var howLongIsThis = myPlayer.duration();
• 缓冲，就是返回下载了多少: `var whatHasBeenBuffered = myPlayer.buffered();
• 百分比的缓冲: var howMuchIsDownloaded = myPlayer.bufferedPercent();
• 声音大小（0-1之间）: var howLoudIsIt = myPlayer.volume();
• 设置声音大小: myPlayer.volume(0.5);
• 取得视频的宽度: var howWideIsIt = myPlayer.width();
• 设置宽度：myPlayer.width(640);
• 获取高度: var howTallIsIt = myPlayer.height();
• 设置高度：: myPlayer.height(480);
• 一步到位的设置大小：myPlayer.size(640,480);
• 全屏: myPlayer.enterFullScreen();
• 离开全屏 : myPlayer.enterFullScreen();

(4)、网络状态

• myPlayer.currentSrc; //返回当前资源的URL
• myPlayer.src = value; //返回或设置当前资源的URL
• myPlayer.canPlayType(type); //是否能播放某种格式的资源
• myPlayer.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
• myPlayer.load(); //重新加载src指定的资源
• myPlayer.buffered; //返回已缓冲区域，TimeRanges
• myPlayer.preload; //none:不预载 metadata:预载资源信息 auto:立即加载视频

(5)、播放状态

•     myPlayer.currentTime = value; //当前播放的位置，赋值可改变位置
•     myPlayer.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0
•     myPlayer.duration; //当前资源长度 流返回无限
•     myPlayer.paused; //是否暂停
•     myPlayer.defaultPlaybackRate = value;//默认的回放速度，可以设置
•     myPlayer.playbackRate = value;//当前播放速度，设置后马上改变
•     myPlayer.played; //返回已经播放的区域，TimeRanges，关于此对象见下文
•     myPlayer.seekable; //返回可以seek的区域 TimeRanges
•     myPlayer.ended; //是否结束
•     myPlayer.autoPlay; //是否自动播放
•     myPlayer.loop; //是否循环播放

(6)、视频控制

•     myPlayer.controls;//是否有默认控制条
•     myPlayer.volume = value; //音量
•     myPlayer.muted = value; //静音
•     TimeRanges(区域)对象
•     TimeRanges.length; //区域段数
•     TimeRanges.start(index) //第index段区域的开始位置
•     TimeRanges.end(index) //第index段区域的结束位置

8、综合示例：

效果图：

播放前：

播放后：

上代码：

HTML:

1.  
   <!DOCTYPE html>
2.  
   <html lang="en">
3.  
   <head>
4.  
   <meta charset="UTF-8">
5.  
   <title>电视台</title>
6.  
   <!--引入video.js文件-->
7.  
   <link rel="stylesheet" type="text/css" href="css/5.0css/video-js.css">
8.  
   <script src="js/5.0js/video.min.js"></script>
9.  
   <script src="js/videojs-contrib-hls.js"></script>
10.  
    </head>
11.  
    <body>
12.  
    <section id="videoPlayer">
13.  
    <video id="example-video" class="video-js vjs-default-skin vjs-big-play-centered">
14.  
    <!-- hls直播源地址：CCTV6高清 -->
15.  
    <!--<source src="http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8" type="application/x-mpegURL">-->
16.  
    <!-- 官方案例MP4 -->
17.  
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
18.  
    </video>
19.  
    </section>
20.  
    <br />
21.  
    <button class="control" onclick=operation("play")>播放</button>&nbsp&nbsp&nbsp&nbsp&nbsp
22.  
    <button class="control" onclick=operation("stop")>停止</button>&nbsp&nbsp&nbsp&nbsp&nbsp
23.  
    <button class="control" onclick=operation("reload")>重载</button>&nbsp&nbsp&nbsp&nbsp&nbsp
24.  
    <button class="control" onclick=operation("reset")>重置</button>&nbsp&nbsp&nbsp&nbsp&nbsp
25.  
    <button class="control" onclick=operation("fastForward")>快进</button>&nbsp&nbsp&nbsp&nbsp&nbsp
26.  
    <button class="control" onclick=operation("back")>后退</button>&nbsp&nbsp&nbsp&nbsp&nbsp
27.  
    <button class="control" onclick=operation("volumeUp")>音量+</button>&nbsp&nbsp&nbsp&nbsp&nbsp
28.  
    <button class="control" onclick=operation("volumeUp")>音量-</button>&nbsp&nbsp&nbsp&nbsp&nbsp
29.  
    <button class="control" onclick=operation("fullScreen")>全屏</button>&nbsp&nbsp&nbsp&nbsp&nbsp
30.  
    <button class="control" onclick=operation("exitFullScreen")>退出全屏</button><br /><br /><br />
31.  
    <button class="control" onclick=cut("CCTV1")>CCTV1高清 </button>&nbsp&nbsp&nbsp&nbsp&nbsp
32.  
    <button class="control" onclick=cut("CCTV3")>CCTV3高清 </button>&nbsp&nbsp&nbsp&nbsp&nbsp
33.  
    <button class="control" onclick=cut("CCTV6")>CCTV6高清 </button>&nbsp&nbsp&nbsp&nbsp&nbsp
34.  
    <button class="control" onclick=cut("XHWS")>香港卫视</button>&nbsp&nbsp&nbsp&nbsp&nbsp
35.  
    <button class="control" onclick=cut("MGZW")>美国中文电视</button>&nbsp&nbsp&nbsp&nbsp&nbsp
36.  
    <button class="control" onclick=cut("ocean")>海洋</button>&nbsp&nbsp&nbsp&nbsp&nbsp
37.  
    </body>
38.  
    </html>

js:

1.  
   <script type="text/javascript">
2.  
   // video标签id,
3.  
   // 配置选项(data-setup='{}'),
4.  
   // videojs初始化完成回调函数
5.  
   var myPlayer = videojs('example-video', {
6.  
   "width":"1000",
7.  
   "height":"600",
8.  
   "poster": "",
9.  
   "controls": true,
10.  
    "autoplay" :false,
11.  
    "techOrder" : [ "html5", "flash" ],
12.  
    "loop":false,
13.  
    "muted":false,
14.  
    "preload": 'metadata'
15.  
    }, function onPlayerReady(){
16.  
    var myPlayer = this;
17.  
    //在回调函数中，this代表当前播放器，
18.  
    //可以调用方法，也可以绑定事件。
19.  
    /**
20.  
    * 事件events 绑定事件用on 移除事件用off
21.  
    */
22.  
    this.on('suspend', function() {//延迟下载
23.  
    console.log("延迟下载")
24.  
    });
25.  
    this.on('loadstart', function() { //客户端开始请求数据
26.  
    console.log("客户端开始请求数据")
27.  
    });
28.  
    this.on('progress', function() {//客户端正在请求数据
29.  
    console.log("客户端正在请求数据")
30.  
    });
31.  
    this.on('abort', function() {//客户端主动终止下载（不是因为错误引起）
32.  
    console.log("客户端主动终止下载")
33.  
    });
34.  
    this.on('error', function() {//请求数据时遇到错误
35.  
    console.log("请求数据时遇到错误")
36.  
    });
37.  
    this.on('stalled', function() {//网速失速
38.  
    console.log("网速失速")
39.  
    });
40.  
    this.on('play', function() {//开始播放
41.  
    console.log("开始播放")
42.  
    });
43.  
    this.on('pause', function() {//暂停
44.  
    console.log("暂停")
45.  
    });
46.  
    this.on('loadedmetadata', function() {//成功获取资源长度
47.  
    console.log("成功获取资源长度")
48.  
    });
49.  
    this.on('loadeddata', function() {//渲染播放画面
50.  
    console.log("渲染播放画面")
51.  
    });
52.  
    this.on('waiting', function() {//等待数据，并非错误
53.  
    console.log("等待数据")
54.  
    });
55.  
    this.on('playing', function() {//开始回放
56.  
    console.log("开始回放")
57.  
    });
58.  
    this.on('canplay', function() {//可以播放，但中途可能因为加载而暂停
59.  
    console.log("可以播放，但中途可能因为加载而暂停")
60.  
    });
61.  
    this.on('canplaythrough', function() { //可以播放，歌曲全部加载完毕
62.  
    console.log("可以播放，歌曲全部加载完毕")
63.  
    });
64.  
    this.on('seeking', function() { //寻找中
65.  
    console.log("寻找中")
66.  
    });
67.  
    this.on('seeked', function() {//寻找完毕
68.  
    console.log("寻找完毕")
69.  
    });
70.  
    this.on('timeupdate', function() {//播放时间改变
71.  
    console.log("播放时间改变")
72.  
    });
73.  
    this.on('ended', function() {//播放结束
74.  
    console.log("播放结束")
75.  
    });
76.  
    this.on('ratechange', function() {//播放速率改变
77.  
    console.log("播放速率改变")
78.  
    });
79.  
    this.on('durationchange', function() {//资源长度改变
80.  
    console.log("资源长度改变")
81.  
    });
82.  
    this.on('volumechange', function() {//音量改变
83.  
    console.log("音量改变")
84.  
    });
85.  
    });
86.  
    /**
87.  
    * 方法
88.  
    */
89.  
    function operation(param){
90.  
    console.log(param)
91.  
    if("play"==param){ //开始播放
92.  
    myPlayer.play();
93.  
    playState();
94.  
    }else if("stop"==param){ //停止播放
95.  
    myPlayer.pause();
96.  
    }else if("fastForward"==param){ //快进
97.  
    var whereYouAt = myPlayer.currentTime();
98.  
    myPlayer.currentTime(10+whereYouAt);
99.  
    }else if("reload"==param){ //重新加载
100.  
     myPlayer.pause();
101.  
     myPlayer.load();
102.  
     myPlayer.play();
103.  
     }else if("back"==param){ //后退
104.  
     var whereYouAt = myPlayer.currentTime();
105.  
     myPlayer.currentTime(whereYouAt-10);
106.  
     }else if("fullScreen"==param){ //全屏
107.  
     myPlayer.enterFullScreen();
108.  
     }else if("exitFullScreen"==param){ //退出全屏
109.  
     myPlayer.enterFullScreen();
110.  
     }else if("volumeUp"==param){ //音量加
111.  
     var howLoudIsIt = myPlayer.volume();
112.  
     myPlayer.volume(howLoudIsIt+0.1);
113.  
     }else if("volumeDown"==param){ //音量减
114.  
     var howLoudIsIt = myPlayer.volume();
115.  
     myPlayer.volume(howLoudIsIt-0.1);
116.  
     }else if("reset"==param){ //重置，视频不会播放
117.  
     myPlayer.reset();
118.  
     }
119.  
     }
120.  
     function cut(channel){
121.  
     myPlayer.reset();//重置
122.  
     if("CCTV1"==channel){ //CCTV1
123.  
     myPlayer.src({ type: "application/x-mpegURL", src:"http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" });
124.  
     myPlayer.load("http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8");
125.  
     myPlayer.play();
126.  
     }else if("CCTV3"==channel){ //CCTV3
127.  
     myPlayer.src({ type: "application/x-mpegURL", src:"http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8" });
128.  
     myPlayer.load("http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8");
129.  
     myPlayer.play();
130.  
     }else if("CCTV6"==channel){ //CCTV6
131.  
     myPlayer.src({ type: "application/x-mpegURL", src:"http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8" });
132.  
     myPlayer.load("http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8");
133.  
     myPlayer.play();
134.  
     }else if("XHWS"==channel){ //香港卫视
135.  
     myPlayer.src({ type: "rtmp/flv", src:"rtmp://live.hkstv.hk.lxdns.com/live/hks1" });
136.  
     myPlayer.load("rtmp://live.hkstv.hk.lxdns.com/live/hks1");
137.  
     myPlayer.play();
138.  
     }else if("MGZW"==channel){ //美国中文电视
139.  
     myPlayer.src({ type: "rtmp/flv", src:"rtmp://media3.sinovision.net:1935/live/livestream" });
140.  
     myPlayer.load("rtmp://media3.sinovision.net:1935/live/livestream");
141.  
     myPlayer.play();
142.  
     }else if("ocean"==channel){ //官方案例
143.  
     myPlayer.src({ type: "video/mp4", src:"http://vjs.zencdn.net/v/oceans.mp4" });
144.  
     myPlayer.load("http://vjs.zencdn.net/v/oceans.mp4");
145.  
     myPlayer.play();
146.  
     }
147.  
     }
148.  
     </script>

9、播放样式修改

(1)、播放按钮居中

在<video>标签中加入vjs-big-play-centered类

 <video id="example-video"  class="video-js vjs-default-skin vjs-big-play-centered">

(2)、暂停时显示播放按钮

在css代码中增加一下代码

1.  
   .vjs-paused .vjs-big-play-button,
2.  
   .vjs-paused.vjs-has-started .vjs-big-play-button {
3.  
   display: block;
4.  
   }

(3)、播放按钮变成圆形

在css代码中增加一下代码

1.  
   .video-js .vjs-big-play-button{
2.  
   font-size: 2.5em;
3.  
   line-height: 2.3em;
4.  
   height: 2.5em;
5.  
   width: 2.5em;
6.  
   -webkit-border-radius: 2.5em;
7.  
   -moz-border-radius: 2.5em;
8.  
   border-radius: 2.5em;
9.  
   outline: 0px; margin: 0px; padding: 0px; color: rgb(247, 154, 50); overflow-wrap: break-word;">73859f;
10.  
    outline: 0px; margin: 0px; padding: 0px; color: rgb(247, 154, 50); overflow-wrap: break-word;">115,133,159,.5);
11.  
    border-width: 0.15em;
12.  
    margin-top: -1.25em;
13.  
    margin-left: -1.75em;
14.  
    }
15.  
    /* 中间的播放箭头 */
16.  
    .vjs-big-play-button .vjs-icon-placeholder {
17.  
    font-size: 1.63em;
18.  
    }
19.  
    /* 加载圆圈 */
20.  
    .vjs-loading-spinner {
21.  
    font-size: 2.5em;
22.  
    width: 2em;
23.  
    height: 2em;
24.  
    border-radius: 1em;
25.  
    margin-top: -1em;
26.  
    margin-left: -1.5em;
27.  
    }

三、补充说明

1.对于Video.js 5.x及更低版本，Flash技术是Video.js核心存储库的一部分。对于Video.js 6.x及更高版本，Flash技术位于单独的存储库中。videojs-flash.js插件只与Video.js> = 6.0.0一起使用，因为之前的flash技术已构建到版本中！ video.js不能直接播放rtmp流，需要videojs-flash.js 这个插件。

2.对于播放HLS视频，在videojs7版本之前要引用videojs-contrib-hls.js插件才能播放。videojs7版本之后的，Video.js默认捆绑VHS（VHS是videojs-contrib-hls的继承者。它是一个源自videojs-contrib-hls存储库的源处理程序。虽然videojs-contrib-hls最初设计用于在所有浏览器上添加HLS播放，但我们意识到引擎也可以播放其他格式，所以videojs-contrib-hls这个项目已经被弃用，被videojs-http-streaming继承）。默认情况下，在Video.js 7及以上版本中已经集成Videojs HTTP Streaming（昵称为VHS），不必使用videojs-http-streaming插件就可以播放HLS，DASH和未来的HTTP流媒体协议视频。

注意：

1.对于Video.js 7之前的版本（明确说是6版本的），必须使用videojs-http-streaming.js插件才可以播放HLS，DASH和未来的HTTP流媒体协议视频，即使它们不是本机支持的。

2.VHS支持HLS和DASH和未来的HTTP流媒体协议。

详情链接：https://www.cnblogs.com/FHC1994/p/9981440.html

四、直播源地址

　HLS直播源地址：

　　　　CCTV1高清：http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8

　　　　CCTV3高清：http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8

　　　　CCTV6高清：http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8

　　RTMP直播源地址：

　　　　香港卫视：rtmp://live.hkstv.hk.lxdns.com/live/hks1

　　　　　　　　　rtmp://live.hkstv.hk.lxdns.com/live/hks2

 　　　  湖南卫视：rtmp://58.200.131.2:1935/livetv/hunantv

　　　　美国1：rtmp://ns8.indexforce.com/home/mystream

　　　　美国中文电视：rtmp://media3.sinovision.net:1935/live/livestream

　　　　香港财经：rtmp://202.69.69.180:443/webcast/bshdlive-pc

　　　　韩国GoodTV：rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp

 

在下一篇中总结了遇到的问题，及怎么兼容rtmp和hls。如有兴趣请点击这里