h5這么火是有它的理由的，支持原生視頻播放，但是目前兼容性還不是很好，因此使用js框架支持網站視頻播放是比較不錯的選擇。
下載video.js，我們可以通過官網去下，但是官網在國外，我嘗試了幾次均下載失敗，於是使用JS神器nodeJS來下載。
1 npm i video.js
下載好后有兩個文件是我們需要的，video-js.min.css和video.min.js。
最簡單的應用是這樣的：
1 <html>
2 <head>
3 <meta charset="utf-8">
4 <meta name="viewport" content="width=device-width">
5 <title>GuangSoft</title>
6 <link href="video-js.min.css" rel="stylesheet">
7 <script src="video.min.js"></script>
8 </head>
9 <body>
10 <video id="videoContainer" class="video-js" controls preload="none" width="640" height="264" poster="logo.png" data-setup="{}">
11 <source src="1.mp4" type="video/mp4">
12 </video>
13 </body>
14 </html>
效果如下：
嗯，有效果，好的，可以繼續探討一下播放器參數了，我們的代碼編程這樣：
1 <html>
2 <head>
3 <meta charset="utf-8">
4 <meta name="viewport" content="width=device-width">
5 <title>GuangSoft</title>
6 <link href="video-js.min.css" rel="stylesheet">
7 <script src="video.min.js"></script>
8 </head>
9 <body>
10 <video id="videoContainer" class="video-js">
11 <script>
12 var options = { 13 sources : [{ 14 src : "1.mp4", 15 type : "video/mp4"
16 }], 17 //是否顯示控制條
18 controls : true, 19 //播放器高度
20 height : 264, 21 //播放器寬度
22 width : 640, 23 //是否循環播放
24 loop : false, 25 //是否靜音
26 muted: false, 27 //播放前顯示的封面圖片，通常為logo
28 poster : "logo.png", 29 //預加載：auto自動加載、metadata加載元數據信息視頻尺寸等、none不加載任何信息
30 preload : "none", 31 //是否縮放視頻以適應播放器大小
32 fluid : false, 33 //是否自動播放，大多瀏覽器屏蔽此功能
34 autoplay : false, 35 //是否初始化時進入全屏，大多數瀏覽器屏蔽此功能
36 isFullscreen : false
37 }; 38 function onPlayReady() { 39 //播放無效，因為以chrome為首的絕大數瀏覽器拒接非用戶觸發的自動播放
40 //this.play();
41 //音量調整0-1之間
42 this.volume(0.5); 43 this.on("ended", function() { 44 //類似console.log();
45 videojs.log("播放結束！"); 46 }) 47 } 48 videojs('videoContainer', options, onPlayReady); 49 </script>
50 </body>
51 </html>