devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

video-04-videojs配置及使用

作者：凡人多烦事01 | 2024-02-13 08:52:04

赞

踩

videojs

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

目录

 一、参考资料

二、引入videojs 

三、简单了解使用

四、配置项和事件

4.1 常用配置项

4.2 常用事件

4.3 常用方法

4.4 网络状态

4.5 播放状态

4.6 视频控制

五、实例（可直接复制） 

 一、参考资料

博主感觉英文文档有点yue

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

https://www.cnblogs.com/afrog/p/4115377.html 

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

二、引入videojs 

  1. <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
  2. <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标签的事件监听
}); 

  1. ///html
  2. <video id="myvideo" autoplay="true"
  3.         src="https://jf360videos.peopletech.cn/production/464f2fe20b1211ee83bef3d9bb3dfecd_1_video.mp4" class="video-js" controls>
  4.     </video>
  5. ///js
  6. var player = videojs('myvideo',{
  7.     muted: true,
  8. 	controls : true/false,      
  9. 	height:300, 
  10. 	width:300,
  11. 	loop : true,
  12. 	// 更多配置.....
  13. },functon(){
  14. //回调函数
  15. });

四、配置项和事件

4.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

4.2 常用事件

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

4.3 常用方法

  1. /
  2. 播放：myPlayer.play();
  3. 暂停：myPlayer.pause();
  4. 获取播放进度：var whereYouAt = myPlayer.currentTime();
  5. 设置播放进度：myPlayer.currentTime(120);
  6. 视频持续时间，加载完成视频才可以知道视频时长，且在flash情况下无效: var howLongIsThis = myPlayer.duration();
  7. 缓冲，就是返回下载了多少: `var whatHasBeenBuffered = myPlayer.buffered();
  8. 百分比的缓冲: var howMuchIsDownloaded = myPlayer.bufferedPercent();
  9. 声音大小（0-1之间）: var howLoudIsIt = myPlayer.volume();
  10. 设置声音大小: myPlayer.volume(0.5);
  11. 取得视频的宽度: var howWideIsIt = myPlayer.width();
  12. 设置宽度：myPlayer.width(640);
  13. 获取高度: var howTallIsIt = myPlayer.height();
  14. 设置高度：: myPlayer.height(480);
  15. 一步到位的设置大小：myPlayer.size(640,480);
  16. 全屏: myPlayer.requestFullscreen();
  17. 离开全屏 : myPlayer.exitFullscreen();
  18. /
  19. autoplay
  20. buffered
  21. bufferedEnd
  22. bufferedPercent
  23. cancelFullScreen deprecated
  24. controls
  25. currentSrc
  26. currentTime
  27. currentType
  28. dispose //清理
  29. duration
  30. ended //结束
  31. error //错误
  32. exitFullscreen //退出全屏
  33. init
  34. isFullScreen deprecated 废弃
  35. isFullscreen
  36. language
  37. load
  38. loop //循环
  39. muted 静音
  40. pause 暂停
  41. paused //检测是否暂停的状态
  42. play
  43. playbackRate
  44. poster //静态图片
  45. preload
  46. remainingTime //余下时间
  47. requestFullScreen deprecated
  48. requestFullscreen
  49. seeking
  50. src
  51. volume
  52. addChild inherited
  53. addClass inherited
  54. buildCSSClass inherited
  55. children inherited
  56. contentEl inherited
  57. createEl inherited
  58. dimensions inherited
  59. el inherited
  60. enableTouchActivity inherited
  61. getChild inherited
  62. getChildById inherited
  63. hasClass inherited
  64. height inherited
  65. hide inherited
  66. id inherited
  67. initChildren inherited
  68. name inherited
  69. off inherited
  70. on inherited
  71. one inherited
  72. options inherited
  73. player inherited
  74. ready inherited
  75. removeChild inherited
  76. removeClass inherited
  77. show inherited
  78. trigger inherited
  79. triggerReady inherited
  80. width inherited

4.4 网络状态

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

4.5 播放状态

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

4.6 视频控制

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

五、实例（可直接复制） 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>电视台</title>
  7.     <!--引入video.js文件-->
  8.     <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
  9.     <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
  10. </head>
  11.  
  12. <body>
  13.     <section id="videoPlayer">
  14.         <video id="example-video" class="video-js vjs-default-skin vjs-big-play-centered">
  15.         </video>
  16.     </section>
  17.     <br />
  18.     <button class="control" onclick=operation("play")>播放</button>&nbsp&nbsp&nbsp&nbsp&nbsp
  19.     <button class="control" onclick=operation("stop")>停止</button>&nbsp&nbsp&nbsp&nbsp&nbsp
  20.     <button class="control" onclick=operation("reload")>重载</button>&nbsp&nbsp&nbsp&nbsp&nbsp
  21.     <button class="control" onclick=operation("reset")>重置</button>&nbsp&nbsp&nbsp&nbsp&nbsp
  22.     <button class="control" onclick=operation("fastForward")>快进</button>&nbsp&nbsp&nbsp&nbsp&nbsp
  23.     <button class="control" onclick=operation("back")>后退</button>&nbsp&nbsp&nbsp&nbsp&nbsp
  24.     <button class="control" onclick=operation("volumeUp")>音量+</button>&nbsp&nbsp&nbsp&nbsp&nbsp
  25.     <button class="control" onclick=operation("volumeDown")>音量-</button>&nbsp&nbsp&nbsp&nbsp&nbsp
  26.     <button class="control" onclick=operation("fullScreen")>全屏</button>&nbsp&nbsp&nbsp&nbsp&nbsp
  27.     <button class="control" onclick=operation("exitFullScreen")>退出全屏</button><br /><br /><br />
  28. </body>
  29.  
  30. </html>
  31. <script type="text/javascript">
  32.     //      	video标签id,
  33.     //      	配置选项(data-setup='{}'),
  34.     //      	videojs初始化完成回调函数
  35.     var myPlayer = videojs('example-video', {
  36.         title: 'Oceans',
  37.         autoplay: true, // 设置自动播放
  38.         muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音 （Chrome66及以上版本，禁止音视频的自动播放）
  39.         preload: 'auto', // 预加载
  40.         controls: true, // 显示播放的控件
  41.         fluid: true, // 自适应宽高
  42.         playbackRates: [0.5, 1, 1.5, 2, 3, 4],
  43.         "sources": [{
  44.             src: 'https://jf360videos.peopletech.cn/production/464f2fe20b1211ee83bef3d9bb3dfecd_1_video.mp4',
  45.             type: 'video/mp4'
  46.         }],
  47.         controlBar: {
  48.             // 设置控制条组件
  49.             currentTimeDisplay: true,
  50.             timeDivider: true,
  51.             durationDisplay: true,
  52.             remainingTimeDisplay: true,
  53.             volumePanel: {
  54.                 inline: true
  55.             },
  56.             children: [{
  57.                 name: 'playToggle'
  58.             }, // 播放/暂停按钮
  59.             {
  60.                 name: 'currentTimeDisplay'
  61.             }, // 视频当前已播放时间
  62.             {
  63.                 name: 'progressControl'
  64.             }, // 播放进度条
  65.             {
  66.                 name: 'durationDisplay'
  67.             }, // 视频播放总时间
  68.             {
  69.                 // 倍速播放
  70.                 name: 'playbackRateMenuButton',
  71.                 playbackRates: [0.5, 1, 1.5, 2]
  72.             },
  73.             {
  74.                 name: 'volumePanel', // 音量控制
  75.                 inline: false // 不使用水平方式
  76.             },
  77.             {
  78.                 name: 'FullscreenToggle'
  79.             } // 全屏
  80.             ]
  81.         }
  82.     }, function onPlayerReady() {
  83.         // var myPlayer = this;
  84.         //在回调函数中，this代表当前播放器，
  85.         //可以调用方法，也可以绑定事件。
  86.         /**
  87.          * 事件events    绑定事件用on    移除事件用off
  88.          */
  89.         this.on('suspend', function () {//延迟下载
  90.             console.log("延迟下载")
  91.         });
  92.         this.on('loadstart', function () { //客户端开始请求数据
  93.             console.log("客户端开始请求数据")
  94.         });
  95.         this.on('progress', function () {//客户端正在请求数据
  96.             console.log("客户端正在请求数据")
  97.         });
  98.         this.on('abort', function () {//客户端主动终止下载（不是因为错误引起）
  99.             console.log("客户端主动终止下载")
  100.         });
  101.         this.on('error', function () {//请求数据时遇到错误
  102.             console.log("请求数据时遇到错误")
  103.         });
  104.         this.on('stalled', function () {//网速失速
  105.             console.log("网速失速")
  106.         });
  107.         this.on('play', function () {//开始播放
  108.             console.log("开始播放")
  109.         });
  110.         this.on('pause', function () {//暂停
  111.             console.log("暂停")
  112.         });
  113.         this.on('loadedmetadata', function () {//成功获取资源长度
  114.             console.log("成功获取资源长度")
  115.         });
  116.         this.on('loadeddata', function () {//渲染播放画面
  117.             console.log("渲染播放画面")
  118.         });
  119.         this.on('waiting', function () {//等待数据，并非错误
  120.             console.log("等待数据")
  121.         });
  122.         this.on('playing', function () {//开始回放
  123.             console.log("开始回放")
  124.         });
  125.         this.on('canplay', function () {//可以播放，但中途可能因为加载而暂停
  126.             console.log("可以播放，但中途可能因为加载而暂停")
  127.         });
  128.         this.on('canplaythrough', function () { //可以播放，歌曲全部加载完毕
  129.             console.log("可以播放，歌曲全部加载完毕")
  130.         });
  131.         this.on('seeking', function () { //寻找中
  132.             console.log("寻找中")
  133.         });
  134.         this.on('seeked', function () {//寻找完毕
  135.             console.log("寻找完毕")
  136.         });
  137.         this.on('timeupdate', function () {//播放时间改变
  138.             console.log("播放时间改变")
  139.         });
  140.         this.on('ended', function () {//播放结束
  141.             console.log("播放结束")
  142.         });
  143.         this.on('ratechange', function () {//播放速率改变
  144.             console.log("播放速率改变")
  145.         });
  146.         this.on('durationchange', function () {//资源长度改变
  147.             console.log("资源长度改变")
  148.         });
  149.         this.on('volumechange', function () {//音量改变
  150.             console.log("音量改变")
  151.         });
  152.     });
  153.     /**
  154.      * 方法
  155.      */
  156.     function operation(param) {
  157.         console.log(param)
  158.         if ("play" == param) {	//开始播放
  159.             myPlayer.play();
  160.         } else if ("stop" == param) {	//停止播放
  161.             myPlayer.pause();
  162.         } else if ("fastForward" == param) { //快进
  163.             var whereYouAt = myPlayer.currentTime();
  164.             myPlayer.currentTime(10 + whereYouAt);
  165.         } else if ("reload" == param) {	//重新加载
  166.             myPlayer.pause();
  167.             myPlayer.load();
  168.             myPlayer.play();
  169.         } else if ("back" == param) {	//后退
  170.             var whereYouAt = myPlayer.currentTime();
  171.             myPlayer.currentTime(whereYouAt - 10);
  172.         } else if ("fullScreen" == param) {	//全屏
  173.             myPlayer.enterFullScreen();
  174.         } else if ("exitFullScreen" == param) {	//退出全屏
  175.             myPlayer.enterFullScreen();
  176.         } else if ("volumeUp" == param) {	//音量加
  177.             var howLoudIsIt = myPlayer.volume();
  178.             myPlayer.volume(howLoudIsIt + 10);
  179.         } else if ("volumeDown" == param) {	//音量减
  180.             var howLoudIsIt = myPlayer.volume();
  181.             console.log(howLoudIsIt)
  182.             myPlayer.volume(howLoudIsIt - 10);
  183.         } else if ("reset" == param) {	//重置，视频不会播放	
  184.             myPlayer.reset();
  185.         }
  186.     }
  187. </script>

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/79540
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号