video 的使用(video.min.js)
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> 10 <link href="videojs/css/video-js.css" rel="stylesheet" type="text/css"> 11 <script src="videojs/js/video.min.js"></script> 12 <style> 13 .contaier { 14 width: 52.0833vw; 15 height: 46.2963vh; 16 margin: 1.8519vh auto; 17 } 18 </style> 19 20 21 22 </head> 23 24 <body> 25 <div class="contaier"> 26 <video id="example_video" width="800" height="500" class="video-js vjs-default-skin " controls poster="" 27 muted="muted" webkit-playsinline="true" style="object-fit:fill"> 28 <source src="test.mp4"> 29 </video> 30 </div> 31 <script> 32 // var player = videojs('example_video'); 33 var gcdhvideoDef = null; 34 gcdhvideoDef = videojs("example_video", { 35 "autoplay": true, 36 "loop": false, 37 "preload": true, 38 "width": $('.contaier').width(), 39 "height": $('.contaier').height(), 40 "posterImage": false, 41 "textTrackDisplay": false, 42 "loadingSpinner": false, 43 "bigPlayButton": true, 44 "controls": true, 45 "controlBar": true, 46 "errorDisplay": false, 47 "textTrackSettings": true 48 }); 49 50 gcdhvideoDef.on("timeupdate", function (event) { // 播放时间改变 51 var currentTime = parseInt(this.currentTime()); //当前时间 52 }) 341 </script> 342 343 </body> 344 345 </html>
官网: https://videojs.com/advanced?video=disneys-oceans
使用文档
https://docs.videojs.com/tutorial-options.html#sources
配置 以及使用如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 | // videojs是全局函数,它可以接收三个参数(id,options,onready): 第一个参数是video标签的id比如:videojs('#example_video_1'); // 第二参数是配置选项,除了在这里给出之外,还可以通过在video标签中,通过data-setup='{}'属性的形式给出。 // 第三个参数实际上是videojs初始化完成之后的回调函数,在这个里函数里边,可以使用this引用videojs的实例对象。进行开始播放、停止等操作。 //(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 // (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("音量改变") // }); // (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(); // (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段区域的结束位置 // 使用如下 // // videojs初始化完成回调函数 // var myPlayer = videojs('example-video', { // "width": "1000", // "height": "600", // "poster": "", // "controls": true, // "autoplay": false, // "techOrder": ["html5", "flash"], // "loop": false, // "muted": false, // "preload": 'metadata' // }, 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(); // playState(); // } 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 + 0.1); // } else if ("volumeDown" == param) { //音量减 // var howLoudIsIt = myPlayer.volume(); // myPlayer.volume(howLoudIsIt - 0.1); // } else if ("reset" == param) { //重置,视频不会播放 // myPlayer.reset(); // } // } // function cut(channel) { // myPlayer.reset();//重置 // if ("CCTV1" == channel) { //CCTV1 // myPlayer.src({ type: "application/x-mpegURL", src: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" }); // myPlayer.load("http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8"); // myPlayer.play(); // } else if ("CCTV3" == channel) { //CCTV3 // myPlayer.src({ type: "application/x-mpegURL", src: "http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8" }); // myPlayer.load("http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8"); // myPlayer.play(); // } else if ("CCTV6" == channel) { //CCTV6 // myPlayer.src({ type: "application/x-mpegURL", src: "http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8" }); // myPlayer.load("http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8"); // myPlayer.play(); // } else if ("XHWS" == channel) { //香港卫视 // myPlayer.src({ type: "rtmp/flv", src: "rtmp://live.hkstv.hk.lxdns.com/live/hks1" }); // myPlayer.load("rtmp://live.hkstv.hk.lxdns.com/live/hks1"); // myPlayer.play(); // } else if ("MGZW" == channel) { //美国中文电视 // myPlayer.src({ type: "rtmp/flv", src: "rtmp://media3.sinovision.net:1935/live/livestream" }); // myPlayer.load("rtmp://media3.sinovision.net:1935/live/livestream"); // myPlayer.play(); // } else if ("ocean" == channel) { //官方案例 // myPlayer.src({ type: "video/mp4", src: "http://vjs.zencdn.net/v/oceans.mp4" }); // myPlayer.load("http://vjs.zencdn.net/v/oceans.mp4"); // myPlayer.play(); // } // } |
video 文件 可在此下载
禁止 右键视频下载
$('#example_video').bind('contextmenu',function() { return false; });
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库