日期:2014-05-17  浏览次数:20650 次

支持移动平台的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'