videojs是一种轻框架，可以帮我们快速开发一个video视频组件

目录

 一、参考资料

二、引入videojs 

三、简单了解使用

四、配置项和事件

4.1 常用配置项

4.2 常用事件

4.3 常用方法

4.4 网络状态

4.5 播放状态

4.6 视频控制

五、实例（可直接复制） 

---

 一、参考资料

博主感觉英文文档有点yue

Video.js - Make your player yours | Video.js

videojs中文文档详解_video.js_谢泽的网络日志的博客-CSDN博客

二、引入videojs 

<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>

三、简单了解使用

var player = videojs('定义的video标签的id',{配置项options},functon(){
//回调函数，通常在这里增加video标签的事件监听
}); 

///html
<video id="myvideo" autoplay="true"
        src="https://jf360videos.peopletech.cn/production/464f2fe20b1211ee83bef3d9bb3dfecd_1_video.mp4" width="320"
        height="240" controls>
    </video>
///js
var player = videojs('myvideo',{
    muted: true,
	controls : true/false,      
	height:300, 
	width:300,
	loop : true,
	// 更多配置.....
},functon(){
//回调函数
});

四、配置项和事件

4.1 常用配置项

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

4.2 常用事件

    this.on('suspend', function() {//延迟下载
        console.log("延迟下载")
    });
    this.on('loadstart', function() { //客户端开始请求数据
        console.log("客户端开始请求数据")
    });
    this.on('progress', function() {//客户端正在请求数据
        console.log("客户端正在请求数据")
    });
    this.on('abort', function() {//客户端主动终止下载（不是因为错误引起）
        console.log("客户端主动终止下载")
    });
    this.on('error', function() {//请求数据时遇到错误
        console.log("请求数据时遇到错误")
    });
    this.on('stalled', function() {//网速失速
        console.log("网速失速")
    });
    this.on('play', function() {//开始播放
        console.log("开始播放")
    });
    this.on('pause', function() {//暂停
        console.log("暂停")
    });
    this.on('loadedmetadata', function() {//成功获取资源长度
        console.log("成功获取资源长度")
    });
    this.on('loadeddata', function() {//渲染播放画面
        console.log("渲染播放画面")
    });
    this.on('waiting', function() {//等待数据，并非错误
        console.log("等待数据")
    });
    this.on('playing', function() {//开始回放
        console.log("开始回放")
    });
    this.on('canplay', function() {//可以播放，但中途可能因为加载而暂停
        console.log("可以播放，但中途可能因为加载而暂停")
    });
    this.on('canplaythrough', function() { //可以播放，歌曲全部加载完毕
        console.log("可以播放，歌曲全部加载完毕")
    });
    this.on('seeking', function() { //寻找中
        console.log("寻找中")
    });
    this.on('seeked', function() {//寻找完毕
        console.log("寻找完毕")
    });
    this.on('timeupdate', function() {//播放时间改变
        console.log("播放时间改变")
    });
    this.on('ended', function() {//播放结束
        console.log("播放结束")
    });
    this.on('ratechange', function() {//播放速率改变
        console.log("播放速率改变")
    });
    this.on('durationchange', function() {//资源长度改变
        console.log("资源长度改变")
    });
    this.on('volumechange', function() {//音量改变
        console.log("音量改变")
    });

4.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.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:立即加载视频

4.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; //是否循环播放

4.6 视频控制

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

五、实例（可直接复制） 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>电视台</title>
    <!--引入video.js文件-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
</head>

<body>
    <section id="videoPlayer">
        <video id="example-video" class="video-js vjs-default-skin vjs-big-play-centered">
        </video>
    </section>
    <br />
    <button class="control" onclick=operation("play")>播放</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick=operation("stop")>停止</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick=operation("reload")>重载</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick=operation("reset")>重置</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick=operation("fastForward")>快进</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick=operation("back")>后退</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick=operation("volumeUp")>音量+</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick=operation("volumeDown")>音量-</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick=operation("fullScreen")>全屏</button>&nbsp&nbsp&nbsp&nbsp&nbsp
    <button class="control" onclick=operation("exitFullScreen")>退出全屏</button><br /><br /><br />
</body>

</html>
<script type="text/javascript">
    //      	video标签id,
    //      	配置选项(data-setup='{}'),
    //      	videojs初始化完成回调函数
    var myPlayer = videojs('example-video', {
        title: 'Oceans',
        autoplay: true, // 设置自动播放
        muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音 （Chrome66及以上版本，禁止音视频的自动播放）
        preload: 'auto', // 预加载
        controls: true, // 显示播放的控件
        fluid: true, // 自适应宽高
        playbackRates: [0.5, 1, 1.5, 2, 3, 4],
        "sources": [{
            src: 'https://jf360videos.peopletech.cn/production/464f2fe20b1211ee83bef3d9bb3dfecd_1_video.mp4',
            type: 'video/mp4'
        }],
        controlBar: {
            // 设置控制条组件
            currentTimeDisplay: true,
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: true,
            volumePanel: {
                inline: true
            },
            children: [{
                name: 'playToggle'
            }, // 播放/暂停按钮
            {
                name: 'currentTimeDisplay'
            }, // 视频当前已播放时间
            {
                name: 'progressControl'
            }, // 播放进度条
            {
                name: 'durationDisplay'
            }, // 视频播放总时间
            {
                // 倍速播放
                name: 'playbackRateMenuButton',
                playbackRates: [0.5, 1, 1.5, 2]
            },
            {
                name: 'volumePanel', // 音量控制
                inline: false // 不使用水平方式
            },
            {
                name: 'FullscreenToggle'
            } // 全屏
            ]
        }
    }, function onPlayerReady() {
        // var myPlayer = this;
        //在回调函数中，this代表当前播放器，
        //可以调用方法，也可以绑定事件。
        /**
         * 事件events    绑定事件用on    移除事件用off
         */
        this.on('suspend', function () {//延迟下载
            console.log("延迟下载")
        });
        this.on('loadstart', function () { //客户端开始请求数据
            console.log("客户端开始请求数据")
        });
        this.on('progress', function () {//客户端正在请求数据
            console.log("客户端正在请求数据")
        });
        this.on('abort', function () {//客户端主动终止下载（不是因为错误引起）
            console.log("客户端主动终止下载")
        });
        this.on('error', function () {//请求数据时遇到错误
            console.log("请求数据时遇到错误")
        });
        this.on('stalled', function () {//网速失速
            console.log("网速失速")
        });
        this.on('play', function () {//开始播放
            console.log("开始播放")
        });
        this.on('pause', function () {//暂停
            console.log("暂停")
        });
        this.on('loadedmetadata', function () {//成功获取资源长度
            console.log("成功获取资源长度")
        });
        this.on('loadeddata', function () {//渲染播放画面
            console.log("渲染播放画面")
        });
        this.on('waiting', function () {//等待数据，并非错误
            console.log("等待数据")
        });
        this.on('playing', function () {//开始回放
            console.log("开始回放")
        });
        this.on('canplay', function () {//可以播放，但中途可能因为加载而暂停
            console.log("可以播放，但中途可能因为加载而暂停")
        });
        this.on('canplaythrough', function () { //可以播放，歌曲全部加载完毕
            console.log("可以播放，歌曲全部加载完毕")
        });
        this.on('seeking', function () { //寻找中
            console.log("寻找中")
        });
        this.on('seeked', function () {//寻找完毕
            console.log("寻找完毕")
        });
        this.on('timeupdate', function () {//播放时间改变
            console.log("播放时间改变")
        });
        this.on('ended', function () {//播放结束
            console.log("播放结束")
        });
        this.on('ratechange', function () {//播放速率改变
            console.log("播放速率改变")
        });
        this.on('durationchange', function () {//资源长度改变
            console.log("资源长度改变")
        });
        this.on('volumechange', function () {//音量改变
            console.log("音量改变")
        });
    });
    /**
     * 方法
     */
    function operation(param) {
        console.log(param)
        if ("play" == param) {	//开始播放
            myPlayer.play();
        } else if ("stop" == param) {	//停止播放
            myPlayer.pause();
        } else if ("fastForward" == param) { //快进
            var whereYouAt = myPlayer.currentTime();
            myPlayer.currentTime(10 + whereYouAt);
        } else if ("reload" == param) {	//重新加载
            myPlayer.pause();
            myPlayer.load();
            myPlayer.play();
        } else if ("back" == param) {	//后退
            var whereYouAt = myPlayer.currentTime();
            myPlayer.currentTime(whereYouAt - 10);
        } else if ("fullScreen" == param) {	//全屏
            myPlayer.enterFullScreen();
        } else if ("exitFullScreen" == param) {	//退出全屏
            myPlayer.enterFullScreen();
        } else if ("volumeUp" == param) {	//音量加
            var howLoudIsIt = myPlayer.volume();
            myPlayer.volume(howLoudIsIt + 10);
        } else if ("volumeDown" == param) {	//音量减
            var howLoudIsIt = myPlayer.volume();
            console.log(howLoudIsIt)
            myPlayer.volume(howLoudIsIt - 10);
        } else if ("reset" == param) {	//重置，视频不会播放	
            myPlayer.reset();
        }
    }
</script>

六、到这里videojs基本已经学完了，OK下面将继续讲解关于videojs实现一些特殊花里胡哨的操作