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; });