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
配置 以及使用如下:
// 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; });