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标签中引入如下代码:
1
2
<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标签中引用指定的数据源.
1
2
3
4
5
6
7
8
9
10
<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格式.
1
2
3
4
5
6
7
8
9
10
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?');
});
});

未完待续

文章目录
  1. 1. 背景
  2. 2. VideoJS的介绍
  3. 3. VideoJS的引用
  4. 4. 未完待续