很赞的视频播放插件的 Video.js

壳叔搞笑一刻

早上去一家老店吃米粉，店主是一对年过半百的夫妻…我点了单后，阿姨喊到：帅哥，炒个蛋。我惊讶了：我自己去炒吗？阿姨：不是喊你，我是喊我老公…

楼下评论：这一大盆狗粮兜头倒了下来，你不用点单了直接吃饱了......

正文

今天早晨应了壳妹的想法，想要个浏览器页面上放自己的视频...那时我还在睡意中朦胧，连过脑子都没过脑子就应了下来。
过了一段时间，脑子清醒了，想起这件事情，既然答应了，那就做一个吧。今天就花了点时间，研究了一下网页播放视频的方式。

目前今天看了 Flash 和 H5 视频标签。

由于不知道是不是乔布斯的恩赐，在 apple 的设备上没有 flash 插件。所以在这就暂时不推荐 flash，但是一些视频网站使用 Flash 的依然不在少数。

既然 Flash 不行，那就来看看 H5 的视频播放标签，（壳叔表示外貌协会，原生样式接受不了）最后在 js 视频插件中挑了 video.js 还可以接受,至少感觉上过的去。

插件描述：Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。（要支持 ie 低版本请下载 5.4.3 版）

界面

video.js 特点

使用 video.js 还有几点

1.它是开源免费的，你可以在 github 很容易的获取它的最新代码。

2.使用它非常的容易，只要花几秒钟就可以架起一个视频播放页面。

3.它几乎兼容所有的浏览器，并且优先使用 html5，在不支持的浏览器中，会自动使用 flash 进行播放。

4. 界面可以定制，纯 javascript 和 css 打造。说明文档也非常的详细。

官网 video.js 代码使用方法

video.js 官方说明

<head>
  <link href="http://vjs.zencdn.net/5.8.8/video-js.css" rel="stylesheet">

  <!-- If you'd like to support IE8 -->
  <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

<body>
  <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
  poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
    <source src="MY_VIDEO.mp4" type='video/mp4'>
    <source src="MY_VIDEO.webm" type='video/webm'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>

  <script src="http://vjs.zencdn.net/5.8.8/video.js"></script>
</body>

poster="**" 播放初始图。可使用三种视频格式，根据所需要格式选择对应的。

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
  poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
 	 <source src="http://视频格式1.mp4" type='video/mp4' />
    <source src="http://视频格式2.webm" type='video/webm' />
    <source src="http://视频格式3.ogv" type='video/ogg' />
        <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>

如果只是简单视频播放，以上内容就可以满足，如果还要追求更深入，可以继续往下慢慢看，以下内容为壳叔网络整理，内容比较枯燥。

设置自动播放将下面代码加到 html 中代码后面

<script type="text/javascript">
    var myPlayer = videojs('example_video_1');
    videojs("example_video_1").ready(function(){
        var myPlayer = this;
        myPlayer.play();
    });
</script>

默认情况下，大的播放按钮是被定为在左上角的，这样就不会覆盖视频内容。如果你想让这个播放按钮居中，你可以给你的 video 标签添加额外的 vjs-big-play-centered 样式，比如：

<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
  controls preload="auto" width="640" height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='{"example_option":true}'>
  ...
</video>

如果你还对播放按钮样式不满意可重新定义.video-js .vjs-big-play-button{/这里的样式重写/}。

为动态加载的 HTML 元素设置 Video.js
如果你的 web 页面或者应用是动态加载 video 标签的（ajax，appendChild，等等）,这样在页面加载后这个元素是不存在的，那么你会想要手动设置播放器而不是依靠 data-setup 属性。要做到这一点，首先将 data-setup 属性从 video 标签中移除掉，这样在播放器初始化的时候就不会混乱了。接下来，运行下面的 javascript ，有时在 Video.js 加载后，有时是在 video 标签被加载进 DOM 后，

videojs("example_video_1", {}, function(){
  // Player (this) is initialized and ready.
});

videojs 方法中的第一个参数是你的 video 标签的 ID，用你自己的代替。

第二个参数是一个选项对象。它允许你像设置 data-setup 属性一样设置额外的选项。

第三个参数是一个 'ready' 回调。一旦 Video.js 初始化完成后，就会触发这个回调。

你也可以传入一个元素本身的引用来代替元素 ID：

videojs(document.getElementById('example_video_1'), {}, function() {
  // This is functionally the same as the previous example.
});
videojs(document.getElementsByClassName('awesome_video_class')[0], {}, function() {
  // You can grab an element by class if you'd like, just make sure
  // if it's an array that you pick one (here we chose the first).
});

如果您无法播放内容，您得确保使用了正确的格式，你的 HTTP 服务器可能无法提供正确的 MIME 类型的内容

var videoObj = videojs(“videoId”);

ready:

myPlayer.ready(function(){
    //在回调函数中，this代表当前播放器，
    //可以调用方法，也可以绑定事件。
})

播放：

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

离开全屏

myPlayer.enterFullScreen();

添加事件

durationchange
ended //播放结束
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause //暂停
play  //播放
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited
  
var myFunc = function(){
    // Do something when the event is fired
};

事件绑定

myPlayer.on("ended", function(){
    console.log("end", this.currentTime());
});
myPlayer.on("pause", function(){
    console.log("pause")
});

删除事件

myPlayer.removeEvent(“eventName”, myFunc);

一个页面中有多个视频，需要点击后触发 bootstrap 的模态窗，再弹出视频

我个人的方法是：

html:

<a videohref="http://xxx.mp4" class="video_link"><img  src="../images/xxx.jpg"/></a>

JS:

$(".video_link").click(function() {
    var myPlayer = videojs('my-video');
    var videoUrl = $(this).attr("videohref");
    videojs("my-video", {}, function() {
        window.myPlayer = this;
        $("#mymoda .video-con #my-video source").attr("src", videoUrl);
        myPlayer.src(videoUrl);
        myPlayer.load(videoUrl);
        myPlayer.play();
    });
    $(".click-modal").click();
});
// 模态窗消失时，关闭视频    
$('#mymoda').on('hidden.bs.modal', function() {
    myPlayer.pause();
});

项目地址 https://github.com/ykz200/Video.js 框架采用 springboot，具体内容看代码吧。

很赞的视频播放插件的 Video.js

壳叔搞笑一刻

正文

界面

video.js 特点

官网 video.js 代码使用方法

相关帖子

[算法题] 两数相加

[算法基础题] 求两数之和

JAVA 中将一个 List 等分成 n 个 list 的工具方法

Mysql 数据库损坏，通过 idb 和 frm 恢复表结构和数据

Flutter 编写的十大经典排序算法包含效果演示

漫画丨你的数据会被窃听吗？

SpringBoot 多数据源提示 Invalid bound statement (not found)

欢迎来到这里！

很赞的视频播放插件的 Video.js

壳叔搞笑一刻

正文

界面

video.js 特点

官网 video.js 代码使用方法

相关帖子

[算法题] 两数相加

[算法基础题] 求两数之和

JAVA 中将一个 List 等分成 n 个 list 的工具方法

Mysql 数据库损坏，通过 idb 和 frm 恢复表结构和数据

Flutter 编写的十大经典排序算法 包含效果演示

漫画丨你的数据会被窃听吗？

SpringBoot 多数据源提示 Invalid bound statement (not found)

欢迎来到这里！

Flutter 编写的十大经典排序算法包含效果演示