html5视频播放器VideoJS

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。

背景

最近公司游戏正在如火如荼的推广中,也陆续招来了美女主播.以此为背景,公司打算制作属于自己的主播平台.因为游戏是九游独家代理,很自然就使用了阿里直播技术.本文引用第三方视频播放技术,详细介绍Video.js的使用.

VideoJS的介绍

Video.js - open source HTML5 & Flash video player

正如VideoJS在Github上的介绍,相比于其他的视频播放器Video.js是一个开源的html和flash的视频播放器.Video.js会自动检测浏览器对html5是否支持,如果不支持则自动使用flash播放器.截止至2010年,包括youtube在内,已累计有200,000个网站使用该项目作为视频播放器.如果想要查看其详细的文档,可以移步至其官网查看更多.

VideoJS的引用

• 插件引入,只需在head标签中引入如下代码:

<link href="//vjs.zencdn.net/5.8/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.8/video.min.js"></script>

• 根据项目需要,在video标签中引用指定的数据源.

<video id="really-cool-video" class="video-js vjs-default-skin" controls
 preload="auto" width="640" height="264" poster="really-cool-video-poster.jpg"
 data-setup='{}'>
  <source src="really-cool-video.mp4" type="video/mp4">
  <source src="really-cool-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>

• 如果希望让用户自己选择数据源,可以通过data-setup属性手动加载.但必须保证其数据格式是有效的json格式.

var player = videojs('really-cool-video', { /* Options */ }, function() {
  console.log('Good to go!');

  this.play(); // if you don't trust autoplay for some reason

  // How about an event listener?
  this.on('ended', function() {
    console.log('awww...over so soon?');
  });
});

未完待续