video-04-videojs配置及使用

￡神魔★判官ぃ 2023-10-13 07:57 137阅读 0赞

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

**目录**

一、参考资料

二、引入videojs

三、简单了解使用

四、配置项和事件

4.1 常用配置项

4.2 常用事件

4.3 常用方法

4.4 网络状态

4.5 播放状态

4.6 视频控制

五、实例（可直接复制）

--------------------

## 一、参考资料 ##

**博主感觉英文文档有点yue**

[Video.js - Make your player yours | Video.js][Video.js - Make your player yours _ Video.js]

[https://www.cnblogs.com/afrog/p/4115377.html][https_www.cnblogs.com_afrog_p_4115377.html]

[videojs中文文档详解\_video.js\_谢泽的网络日志的博客-CSDN博客][videojs_video.js_-CSDN]

## 二、引入videojs ##

## 三、简单了解使用 ##

> 1.配置video标签：设置id 设置**固定class**（样式） class="video-js"
> 
> 2.var player = videojs('**定义的video标签的id**',\{配置项**options**\},functon()\{  
> //回调函数，**通常在这里增加video标签的事件监听**  
> \});

///html
    <video id="myvideo" autoplay="true"
            src="https://jf360videos.peopletech.cn/production/464f2fe20b1211ee83bef3d9bb3dfecd_1_video.mp4" class="video-js" 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 常用事件 ###

// 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('firstplay', 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('fullscreenchange', 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.requestFullscreen();
    离开全屏 : myPlayer.exitFullscreen();
    /
    autoplay
    buffered
    bufferedEnd
    bufferedPercent
    cancelFullScreen deprecated
    controls
    currentSrc
    currentTime
    currentType
    dispose //清理
    duration
    ended //结束
    error //错误
    exitFullscreen //退出全屏
    init
    isFullScreen deprecated 废弃
    isFullscreen
    language
    load
    loop //循环
    muted 静音
    pause 暂停
    paused //检测是否暂停的状态
    play
    playbackRate
    poster //静态图片
    preload
    remainingTime //余下时间
    requestFullScreen deprecated
    requestFullscreen
    seeking
    src
    volume
    addChild inherited
    addClass inherited
    buildCSSClass inherited
    children inherited
    contentEl inherited
    createEl inherited
    dimensions inherited
    el inherited
    enableTouchActivity inherited
    getChild inherited
    getChildById inherited
    hasClass inherited
    height inherited
    hide inherited
    id inherited
    initChildren inherited
    name inherited
    off inherited
    on inherited
    one inherited
    options inherited
    player inherited
    ready inherited
    removeChild inherited
    removeClass inherited
    show inherited
    trigger inherited
    triggerReady inherited
    width inherited

### 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段区域的结束位置

## 五、实例（可直接复制） ##

![aa3fbc56f826462ca4a2ae5c722c2422.png][]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>电视台</title>
        
        <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实现一些特殊花里胡哨的操作

[Video.js - Make your player yours _ Video.js]: https://videojs.com/
[https_www.cnblogs.com_afrog_p_4115377.html]: https://www.cnblogs.com/afrog/p/4115377.html
[videojs_video.js_-CSDN]: https://blog.csdn.net/a0405221/article/details/80923090
[aa3fbc56f826462ca4a2ae5c722c2422.png]: https://img-blog.csdnimg.cn/aa3fbc56f826462ca4a2ae5c722c2422.png