video-04-videojs配置及使用

简介: video-04-videojs配置及使用

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



一、参考资料

博主感觉英文文档有点yue

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


二、引入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>

三、简单了解使用

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

五、实例(可直接复制)

<!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实现一些特殊花里胡哨的操作

目录
相关文章
|
编解码 Shell 开发工具
解决webstorm的Terminal和git中文乱码与空格的问题
解决webstorm的Terminal和git中文乱码与空格的问题
1250 0
解决webstorm的Terminal和git中文乱码与空格的问题
|
JavaScript 前端开发 网络安全
Video.js实现在html页面播放rtmp流媒体
Video.js实现在html页面播放rtmp流媒体
1739 0
|
JavaScript vr&ar
vue3通过ref获取dom元素并修改样式
vue3通过ref获取dom元素并修改样式
1096 0
|
机器学习/深度学习 缓存 并行计算
NVIDIA Tesla GPU系列P4、T4、P40以及V100参数性能对比
NVIDIA Tesla系列GPU适用于高性能计算(HPC)、深度学习等超大规模数据计算,Tesla系列GPU能够处理解析PB级的数据,速度比使用传统CPU快几个数量级,NVIDIA Tesla GPU系列P4、T4、P40以及V100是Tesla GPU系列的明星产品,云服务器吧分享NVIDIA.
83598 1
|
Android开发
我的Android进阶之旅------&gt;adbd cannot run as root in production builds 的解决方法
今天用adb root命令时候,报了错误:adbd cannot run as root in production builds C:\Documents and Settings\Administrator>adb root adbd cannot ...
5017 0
|
3月前
|
JSON API PHP
10多万语录随机一言API接口详解及调用示例
随机一言API可输出心灵鸡汤、至理名言等内容,适用于评论系统、签名生成等场景。完全免费,支持GET/POST请求。需注册获取专属ID和KEY,返回JSON格式数据,并提供PHP、Python调用示例。注意密钥安全与频率限制,内容版权归接口盒子所有。应用于每日推送、心情日记等多种场景。
|
12月前
|
移动开发 Android开发 容器
uniapp中使用videojs构建H5直播播放器
【10月更文挑战第14天】这两天在开发H5直播带货功能模块,使用原生的video播放器播放不了m3u8的流地址,于是找了videojs,参考了网上的一些资料研究了一下,感觉还不错,videojs播放m3u8流地址还挺稳定的,下面就简单记录一下uniapp里面使用方式
1378 129
|
JSON 自然语言处理 数据格式
Tauri 开发实践 — Tauri 自定义多语言菜单开发
本文介绍了如何在 Tauri 应用中实现自定义菜单并支持多语言。首先,通过 `Translator` 类加载和解析多语言 JSON 文件,实现简单的翻译功能。接着,创建包含文件、编辑和窗口子菜单的基本菜单结构,并根据当前语言进行翻译。最后,在主函数中读取语言设置,创建菜单并处理菜单事件,确保应用的国际化和用户体验。源码可在 GitHub 上查看。
509 2
|
SQL 前端开发 关系型数据库
芋道框架万字详解(前后端分离)、若依框架、yudao-cloud保姆级攻略
芋道框架万字详解(前后端分离)、若依框架、yudao-cloud保姆级攻略
17741 5
|
前端开发 容器 JavaScript