------------恢復內容開始------------
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <title>video.html</title> 6 7 <meta name="keywords" content="keyword1,keyword2,keyword3"> 8 <meta name="description" content="this is my page"> 9 <meta name="content-type" content="text/html; charset=UTF-8"> 10 <link rel="stylesheet" href="../src/css/video-js.min.css"> 11 <!-- <link rel="stylesheet" type="text/css" href="./styles.css"> --> 12 <script src="../src/js/jquery.min.js"></script> 13 <script src="../src/js/video.min.js"></script> 14 </head> 15 16 <body> 17 <video id="video-active" class="video-js vjs-default-skin" controls preload="none" poster="./image/banner.jpg"> 18 <source src="../src/video/banner-video.mp4" type="video/mp4"> 19 </video> 20 <div id="current">當前時長：0:00</div> 21 <div id="duration">總時長：0:00</div> 22 <div id="pro"></div> 23 <script type="text/javascript"> 24 // function play(id, autoplay) { 25 var myPlayer = videojs("#video-active", { 26 controls: true, //是否顯示控制條 27 poster: 'xxx', // 視頻封面圖地址 28 muted: true, // 是否靜音 29 preload: 'auto', //預加載 30 autoplay: true, //是否自動播放 31 fluid: true, // 自適應寬高 32 loop: true, //是否循環播放 33 inactivityTimeout: false, 34 language: 'zh-CN', // 設置語言 35 controlBar: { // 設置控制條組件 36 /* 設置控制條里面組件的相關屬性及顯示與否 37 'currentTimeDisplay':true, 38 'timeDivider':true, 39 'durationDisplay':true, 40 'remainingTimeDisplay':false, 41 volumePanel: { 42 inline: false, 43 } 44 */ 45 /* 使用children的形式可以控制每一個控件的位置，以及顯示與否 */ 46 children: [{ 47 name: 'playToggle' 48 }, // 播放按鈕 49 { 50 name: 'currentTimeDisplay' 51 }, // 當前已播放時間 52 { 53 name: 'progressControl' 54 }, // 播放進度條 55 { 56 name: 'durationDisplay' 57 }, // 總時間 58 { // 倍數播放 59 name: 'playbackRateMenuButton', 60 'playbackRates': [0.5, 1, 1.5, 2, 2.5] 61 }, { 62 name: 'volumePanel', // 音量控制 63 inline: false, // 不使用水平方式 64 }, { 65 name: 'FullscreenToggle' 66 } // 全屏 67 ] 68 }, 69 sources: [ // 視頻源 70 { 71 src: '../src/video/banner-video.mp4', 72 type: 'video/mp4', 73 poster: '../image/banner.jpg' 74 } 75 ] 76 }, function() { 77 78 console.log('視頻可以播放了', this); 79 }); 80 // 綁定事件 81 myPlayer.on("timeupdate", function(event) { 82 83 var currentTime = parseInt(this.currentTime()); //當前時間 84 var duration = this.duration(); //視頻時常 85 var percent = (currentTime / duration * 100).toFixed(0) + "%"; 86 console.log(percent); 87 $("#current").text(this.currentTime()); 88 $("#duration").text(duration); 89 if (currentTime == duration) { 90 $("#pro").html("已完成"); 91 } 92 if (currentTime == 6) { 93 alert("判斷播放時間執行動畫"); 94 // 執行dom改變頁面內容 95 } else { 96 // 執行dom改變頁面內容 97 } 98 }); 99 // var data = { 100 // src: 'xxx.mp4', 101 // type: 'video/mp4' 102 // }; 103 // var player = videojs('myVideo', {...}); 104 // player.pause(); 105 // player.src(data); 106 // player.load(data); 107 // // 動態切換poster 108 // player.posterImage.setSrc('xxx.jpg'); 109 // player.play(); 110 111 // 銷毀videojs 112 //player.dispose(); 113 </script> 114 </body> 115 116 </html>
------------恢復內容結束------------