Web视频播放之video.js
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>
版权声明：本文为guanghe原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。