原文链接：

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

本文链接： 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、下载解压完成后，引入文件

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

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

(1)、常用配置选项

播放：


    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)、播放按钮居中

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

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

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

在css代码中增加一下代码

三、补充说明

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。如有兴趣请点击这里