Web视频播放之video.js

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

h5这么火是有它的理由的，支持原生视频播放，但是目前兼容性还不是很好，因此使用js框架支持网站视频播放是比较不错的选择。

下载video.js，我们可以通过官网去下，但是官网在国外，我尝试了几次均下载失败，于是使用JS神器nodeJS来下载。

 npm i video.js

下载好后有两个文件是我们需要的，video-js.min.css和video.min.js。

最简单的应用是这样的：

 <html>

 <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width">

     <title>GuangSoft</title>

     <link href="video-js.min.css" rel="stylesheet">

     <script src="video.min.js"></script>

 </head>

 <body>

   <video id="videoContainer" class="video-js" controls preload="none" width="640" height="264" poster="logo.png" data-setup="{}">

     <source src="1.mp4" type="video/mp4">

   </video>

 </body>

 </html>

效果如下：

嗯，有效果，好的，可以继续探讨一下播放器参数了，我们的代码编程这样：

 <html>

 <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width">

     <title>GuangSoft</title>

     <link href="video-js.min.css" rel="stylesheet">

     <script src="video.min.js"></script>

 </head>

 <body>

   <video id="videoContainer" class="video-js">

   <script>

     var options = {

         sources : [{

             src : "1.mp4",

             type : "video/mp4"

         }],

         //是否显示控制条

         controls : true,

         //播放器高度

         height : 264,

         //播放器宽度

         width : 640,

         //是否循环播放

         loop : false,

         //是否静音

         muted: false,

         //播放前显示的封面图片，通常为logo

         poster : "logo.png",

         //预加载：auto自动加载、metadata加载元数据信息视频尺寸等、none不加载任何信息

         preload : "none",

         //是否缩放视频以适应播放器大小

         fluid : false,

         //是否自动播放，大多浏览器屏蔽此功能

         autoplay : false,

         //是否初始化时进入全屏，大多数浏览器屏蔽此功能

         isFullscreen : false

     };

     function onPlayReady() {

         //播放无效，因为以chrome为首的绝大数浏览器拒接非用户触发的自动播放

         //this.play();

         //音量调整0-1之间

         this.volume(0.5);

         this.on("ended", function() {

             //类似console.log();

             videojs.log("播放结束！");

         })

     }

     videojs('videoContainer', options, onPlayReady);

   </script>

 </body>

 </html>