本文转自: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的定义,如下所示:
<div class='video_wrap'>
<video class='sublime' height='340' id='single_video' poster='/demo/dartmoor.jpg?1284127262' preload='none' width='800'>
<source src='http://medias.jilion.com/sublimevideo/dartmoor.mov' type='video/mp4'>
<source src='http://medias.jilion.com/sublimevideo/dartmoor.mp4' type='video/mp4'>
<source src='http://medias.jilion.com/sublimevideo/dartmoor.webm' type='video/webm'>
<source src='http://medias.jilion.com/sublimevideo/dartmoor.ogv' type='video/ogg'>
</video>
</div>
然后在HTML的Head区域引入它的JavaScript类库:
<script src="/assets/main.js?1284127262" type="text/javascript"></script>
<script type="text/javascript" src="http://cdn.sublimevideo.net/js/ibvjcopp.js"></script>
<script src="/javascripts/demo.js?1284127262" type="text/javascript"></script>
<script src="http://use.typekit.com/vcc7hji.js" type="text/javascript"></script>
分享到:
相关推荐
一款非常值的收藏的HTML5视频播放器插件,完美兼容PC端与手机端。资源来源:http://www.xwcms.net
音乐播放器 HTML5 audio video 移动播放器 通过 HTML5,音乐在网络上东山再起。添加音频文件就像插入图像那样简单,并且用户能在浏览器外播放音乐,从而实现惊人的音乐体验。<audio> 标签的推出使您不再需要外部音乐...
ckplayer是一款在网页上播放视频的免费播放器,主要以adobe的flash CS5开发,支持html5视频播放,可以在Ipad,Iphone等IOS平台上播放视频,ckplayer是一个前台程序,不涉及asp,php,jsp,.net等服务器端代码,也不涉及...
HTML5视频播放器:作为下一代的网页语言,HTML5 拥有很多让人期待已久的新特性,其中之一就是 video 标签,让开发者可以在网页中和添加图片一样简单的方式添加视频。
用于Web的可扩展的媒体播放器,跨平台,支持HLS,flv,rtmp,rtsp等格式.跨平台兼容HTML5播放器 支持跨终端播放,不仅适用PC端播放,也适配ipad、iphone、android手机、平板电脑等移动终端。 支持多系统多平台,PC...
插件描述:一款jQuery+HTML5类似百度音乐网页播放器代码免费下载,在HTML5盛行的今天,jQuery+HTML5取代了大量的程序开发工作,一款类似百度音乐播放器代码,功能灰常强大!支持火狐、IE9以上等支持HTML5+CSS3浏览器...
Videogular 是 AngularJS 的 HTML5 视频播放器,使用 AngularJS 开发,可以让你... iOS 和 Chrome for Android支持移动设备:Videogular 可以检测移动设备,由此展示组件或者隐藏不支持的组件 标签:Videogular
zyMedia 是由掌阅科技开源的基于HTML5 video和audio的自定义UI多媒体播放器,经过多种移动端设备环境的检测(尤其是国产设备和浏览器),已用于公司的产品线。 特点: 支持主流移动设备移动端浏览器,适合国内移动...
酷播V4.0版跨平台网页视频播放器(完全免费/支持右键自定义),开放支持播放器右键自定义功能,用户可以自己定义右键信息及链接;开放支持自定义播放器控制条形象LOGO及链接;开放以上两项核心功能后,酷播V4.0产品...
这是一款基于CSS3的音乐播放器,界面十分简单清新,播放器支持开始播放、暂停播放和结束播放已经当前播放时间的功能,非常实用。 建议开发童鞋使用统一开发环境UDE来进行查看、调试、开发哦~~其属于MM应用引擎的...
ABPlayerHTML5使用CommentCoreLibrary作为弹幕核心,可以很高程度的还原各种滚动、顶部底部、定位和定位移动弹幕,同时支持颜色、字号大小、透明度和勾边效果。 整个实现全部采取HTML5+CSS3作为基础,可以无须Flash...
Videojs插件功能将MP4视频文件嵌入到帖子/页面或WordPress网站上的任何位置从移动设备观看时,嵌入响应式视频以提供更好的用户体验嵌入与所有主要浏览器兼容HTML5视频嵌入带有海报图像的视频使用videojs播放器嵌入...
它旨在作为HTML5 Danmaku视频播放器的参考实现,该播放器使用CommentCoreLibrary作为支持实现。 随时尝试我们的。 如果发现任何错误,请在问题跟踪器中打开一个问题。 支持 通过将npm用作程序包管理器,我们使用...
Sewise Player是一款免费开源的多媒体播放器,以HTML5技术为平台开发,兼容Flash技术,支持跨终端播放,不仅适用PC端播放,也适配iPad、iPhone、Android手机、平板电脑等移动终端。Sewise Player 2.5.2 更新日志:...
ABPlayerHTML5使用CommentCoreLibrary作为弹幕核心,可以很高程度的还原各种滚动、顶部底部、定位和定位移动弹幕,同时支持颜色、字号大小、透明度和勾边效果。 整个实现全部采取HTML5 CSS3作为基础,可以无须Flash...
如果它工作,然后移动到下一个步骤。 注:您的服务器应支持的PHP脚本工作。 第2步 你需要嵌入到您的网页播放器。您可以复制并粘贴flashmp3player.html或从这里的代码。 注:您可以更改以下代码文件的位置。路径可以...
注意:大多数移动浏览器并不完全支持 js 中的 HTML5 Audio 对象,因此在这种情况下我们只能使用 WebAudio。入门Gapless 5 是一个注册的 bower 包,所以安装很简单: $ bower install gapless5 --save演示Gapless 5 ...
可播放在线视频,本地视频,直播,切换画面比例,软硬解码切换,支持安卓手机,盒子播放,播放器截图. Demo目前还不完善,但功能都有,后续会补上 新增列表小窗口播放可拖拽移动(2016,11,28) Vitamio官网...
在移动设备上,它仅支持使用HTML5视频元素的。 另请参见在Github托管的。用法将Clappr和插件脚本都添加到您HTML中: < head > < script type =" text/javascript " src =" ...
sina,网易等大型网站都是采用的这种Flash型播放器,flash播放器优势在于无须装其他插件来支持播放),主要应用于网站中调用Flv,mp4,mov,f4v,3gp等视频格式文件进行播放,并可以适IPad,IPhone,安卓这样的移动终端。...