HTML5视频 – <video>

HTML5一直被看着那么遥不可及,因为即使标准发布IE旧版本不死那也白搭,又或者大家都愿意去换chrome?firefox?…再或者IE9正式发布之后微软做一次”艰难的决定”强制升级?

直到某日,某水果公司宣布某phone手机等移动产品继续摒弃flash,在safari中支持HTML5的video,才总算看到了一丝曙光,Adobe倒也还大度不在自家的Dreamweaver中作难。

才几个月前我还对flash抱有满满的信心,在一系列非常细致的分析与对比之后,决定站内视频全部采用H.264编码的f4v格式,并使用JW player作为播放器,以为能保证很长一段时间的稳定,现在发现在网络这个世界里果然不能深思熟虑求完美。。。

HTML5 – video

video标签的基本用法:

<video src='http://tang.jubailan.com/1.mp4'>
</video>

也可以写成,第二个地址是备用的:

<video>
<source src='http://tang.jubailan.com/1.mp4' />
<source src='http://tang.jubailan.com/2.mp4' />
</video>

然后就是一些属性:

<video poster='tu.jpg' >
<source src='http://tang.jubailan.com/1.mp4' />
<source src='http://tang.jubailan.com/2.mp4' />
</video>

poster是预览图,还可以添加的属性:
autoplay:自动播放,用法autoplay=’autoplay’,不使用则不自动播放
preload:预加载,可选:none、metadata(第一帧,尺寸,时长等信息)、auto
loop:循环播放,如:loop = ‘loop’
controls:显示控制条,如:controls=’controls’
width:宽度,如:width = ‘225’
height:高度

兼容旧的浏览器,中间那段embed在支持html5的浏览器上是不解析的,旧的浏览器则会忽略video标签,不过在iphone上似乎有问题:

<video src='http://tang.jubailan.com/1.mp4'>
<embed src='http://tang.jubailan.com/1.mp4'>
</embed>
</video>

关于.F4V

用chrome播放html5的.f4v格式是没什么问题的,但是换到iphone的safari上会被告知格式不支持,把文件名改成.MP4后正常播放,感叹safari实在是太谦虚了。

不过当文件很多的时候,要这么改的话也许不是什么好主意,我的做法是用javascript把所有.f4v的文件动态改成.f4v.mp4,比如:video1.f4v就改成video.f4v.mp4,然后修改.htaccess文件做一次重定向再定向到f4v文件(真折腾自己)。因为我的视频本身就是动态加载的所以这个方法还是不错的,至于别的情况可能要再另外想办法。

HTML5下的效果:
chrome下的效果

iphone safari上的效果

flash视频播放器:JW player

JW player

这个flash视频播放器还是很不错的,并且现在本身就支持了HMTL5,皮肤能自己换,可设置的参数很多,用法现在也改进了不少:能直接把一个指向视频的链接变成视频播放器,我开始使用的时候是没有的于是只好自己写。

地址:http://www.longtailvideo.com/players/jw-flv-player/?search=customize

标签: ,

3 条评论 发表在“HTML5视频 – <video>”上

  1. iove86说道:

    请问针对ios跟android的视频转码的时候转成多少好啊?

  2. 怎么样说道:

    呵呵,隔绝了啊?

怎么样 留下回复