支持移动平台的Html5播放器

 

本文转自：http://www.riameeting.com/node/719

HTML5的新特性里面，有一项很重要：直接支持特定格式的视频播放，而不需要依赖第三方的插件（比如Flash），这在某些Flash还没有涉及的场合（比如移动设备中的iPhone），这个特性将非常有用。（唯一的问题是，不同的浏览器厂商将会坚持自己的HTML5视频标准，在你转换HTML5视频格式的时候，要考虑好所针对的是哪一个平台，这是HTML5颇为讽刺的一面，以跨平台为己任的HTML5竟然也需要考虑平台）。

让我们来看看今天介绍的这款HMTL播放器，它的简介如下：

项目名称：Sublimevideo

官方网址：http://sublimevideo.net/

播放器特点：

• 独立开发的JS库   ，没有依赖任何现成的JS库，支持快进，快退，时间轴拖动，全屏。
• 支持移动设备（Iphone, Ipad, Android)

开发团队：http://www.jilion.com

从界面上看，它自带了一套播放控制的UI（当然通过它的API，你是可以自己实现一套UI，然后来控制视频的播放的，偷懒的话可以用默认的）。

尝试点击播放按钮（用FF或谷歌浏览器），视频开始播放了，也许是用了高清视频，速度有点慢。打开FireBug，我们可以看到它的工作原理：

它正是使用了HTML5中的Video标签，实现了视频的播放，而后面的HTML则是它的控制器的布局代码。

而实施的时候，它的方式也很易用，如果你没有自定义的需求，那么甚至无需关注它的实现，你只需要写好自己的Video的定义，如下所示：

 

1. <div class= 'video_wrap' >
2. <video class= 'sublime' height= '340' id= 'single_video' poster= '/demo/dartmoor.jpg?1284127262' preload= 'none' width= '800' >
3. <source src= 'http://medias.jilion.com/sublimevideo/dartmoor.mov' type= 'video/mp4' >
4. <source src= 'http://medias.jilion.com/sublimevideo/dartmoor.mp4' type= 'video/mp4' >
5. <source src= 'http://medias.jilion.com/sublimevideo/dartmoor.webm' type= 'video/webm' >
6. <source src= 'http://medias.jilion.com/sublimevideo/dartmoor.ogv' type= 'video/ogg' >
7. </video >
8. </div >

 

然后在HTML的Head区域引入它的JavaScript类库：

 

1. <script src= "/assets/main.js?1284127262" type= "text/javascript" ></script >
2. <script type= "text/javascript" src= "http://cdn.sublimevideo.net/js/ibvjcopp.js" ></script >
3. <script src= "/javascripts/demo.js?1284127262" type= "text/javascript" ></script >
4. <script src= "http://use.typekit.com/vcc7hji.js" type= "text/javascript" ></script >