当前位置：首页 > 网页特效 > 视频播放 >

Video.js HTML5 视频播放器

时间：2013-04-15 11:51 来源：互联网作者：素材库浏览：次收藏挑错推荐打印

效果预览进入下载地址列表

HTML5视频，现在随处可见

相同的HTML / CSS的皮肤和JavaScript API HTML5和Flash视频

HTML5
闪光
更多的技术

Video.js
TubeCSS
更多的皮肤

编码＆dev的支持：Zencoder数据-云视频编码
CDN赞助：Brightcove公司-视频平台
视频剪辑：迪士尼自然：海洋
Forkable：GitHub上- Git托管

（向下卷了解更多）

什么是Video.js？

Video.js是一个JavaScript和CSS库，这使得它更容易使用，建立在HTML5的视频，今天。这也被称为“HTML5的视频播放器”。Video.js 内置在HTML / CSS 提供了一个通用的控制肌肤，修复跨浏览器的不一致，增加了额外的功能，如全屏和字幕，管理后备Flash或其他不支持HTML5视频播放技术，还提供了一个一致与视频交互的JavaScript API。

HTML5视频是什么？

HTML是在网络上的每一个页面的标记语言。的最新版本，HTML5包括规格为<video>标签，为了让Web开发人员，他们会以同样的方式将图像添加到页面中添加视频。为了这个工作，网页浏览器开发商已经到其浏览器中内置的视频播放功能。

播放网页中的视频可能不会显得如此特别，因为你已经可以通过插件如Flash播放器，Quicktime和Silverlight的在网页上观看视频。然而，这其实是前进了一大步跨Web浏览器和设备的标准化的视频播放。我们的目标是，在未来，开发人员只需要使用一种方法嵌入视频，基于开放标准（而不是由一家公司控制），它会到处工作。此外，HTML5视频可以提高视频性能，不需要第二个应用程序（插件）运行，并创建视频和其他元素之间的相互作用在页面上，之前一直未能开启了大门。

什么是HTML5视频播放器吗？

HTML5视频播放器是一个JavaScript库，建立一组自定义控制上方的HTML5视频元素，HTML5的浏览器之间提供一致的外观。Video.js的基础上通过固定很多跨浏览器的错误或不一致，增加新的功能尚未实现所有的浏览器（如全屏和字幕），以及提供一个一致的JavaScript API为HTML5，Flash和其他回放技术。

特点

开源和CDN托管

Video.js是一个开源项目，让大家深入到代码并有助于更新。Brightcove公司免费的CDN，这意味着承载项目：

快速，无痛设置。无需下载。
文件快速传递，并可能已经被缓存。
您的播放器软件保持最新支持新设备。

（版本锁定和自我托管选项也可）

皮肤一次，到处使用

与其他网络播放器，创建一个自定义的皮肤需要一个复杂的剥皮语言，或不是在所有的选项。Video.js对HTML5，Flash和任何其他的播放技术，使用相同的CSS代码，打开门的定制标记，我们已经很熟悉了。

一致的播放API

HTML5，Flash和其他播放技术都有不同的JavaScript API与视频交互。Video.js提供了一个单一的API，可用于跨平台一致，所以你只需要编写一次代码。

轻量级闪存后备

大多数Flash视频播放器是巨大的。数以百计的额外千字节加载除了正在播放的视频。定制闪存Video.js后备球员是小于10k！这意味着您的视频加载速度更快，即使使用闪光灯时。

兼容性

Web浏览器

用户是否具有最新版本的浏览器，如Internet Explorer 6或古代的东西，他们会得到一个类似的经验与Video.js它采用了超轻量级的Flash播放器的浏览器不支持HTML5视频。

移动设备

许多移动设备进行更好的使用HTML5播放视频，而别人根本要求。支持IOS（Video.js的iPhone，iPad），Android的的Windows Phone 7，黑莓，以及其他。

视频格式

网络视频格式可以变得复杂。的Video.js可以更容易通过使用一个单一的MP4文件为所有用户的WebM，OGG，甚至HTTP或其他格式，如更大的HTML5兼容性直播。

HTML5视频兼容性

浏览器	Ogg Theora格式	MP4	的WebM	市场份额
火狐4.0 +				17.06％
火狐3.5 - 3.6				4.90％
Safari 3以上				7.45％
Chrome浏览器6 +				27.09％
镀铬3 - 5				6.19％
歌剧10.6 +				3.59％
歌剧10.5				0.48％
IE 9 +				10.74％
所有HTML5浏览器	59.31％	51.47％	47.74％	77.50％

Video.js的浏览器不支持HTML5的设备，提供了一个轻量级的Flash播放器。

浏览器	Ogg Theora格式	MP4	的WebM	市场份额
所有的Flash浏览器			*	99.0％

* Adobe已经表示，他们将在未来的版本中支持WebM。

其次设置

所有的Video.js档案托管为您Brightcove公司赞助的CDN，所以有没有需要下载并举办他们自己的（尽管这仍是一个选项）。

要在网页上运行的Video.js到HTML文档，只要复制以下线：

在的<head>：

旧版本IE的JavaScript必须在<head>接受HTML5标签。如果你已经有一个HTML5视频希夫，你可以把它放在任何地方。

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/c/video.js"></script>

在<BODY>：

使用HTML5视频标签为正常类和数据设置属性。还检查了我们的嵌入生成器。

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="my_video_poster.png" data-setup="{}"> <source src="my_video.mp4" type='video/mp4'> <source src="my_video.webm" type='video/webm'> </video>