这篇文章发布于 2010年03月17日,星期三,01:53,归类于 JS实例。 阅读 659343 次, 今日 8 次 81 条评论
by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=661
补充于2017年5月4日
此文写于7年前,前端发展已经翻了好几番,本文内容可能过时,不一定有效,仅供参考。
一、前面的唠叨
我记得就是前几个月吧,有条消息说YouTube支持了HTML5视频嵌入标签video
,好吧,我听说而已,因为我不是个擅长翻墙的人,到底如何我也不得而知。
与主题不相关的HTML5方面的东西我就不多说了,对于video标签,获取大家都听说了,这个标签的功能如同现在HTML语言中的img标签,就现在,比如要链接并显示一张图片,可以这样子:
<img src="mm1.jpg" />
结果就可以显示下面这张美女图片:
所以,在HTML5的时代里,基本上只要一个<video>标签加一个视频的src链接地址就可以播放视频了,对于开发人员来讲真是“酷毕了”(《神话》中经典台词)。
然而,当现实照进遐想,我们不得不去正视,现在,支持HTML5 video
标签的浏览器寥寥无几。我知道chrome2以及Safari是支持的,看下面这张截自chrome 2的图:
使用的代码如下:
<video width="352" height="264" controls autobuffer> <source src="../media/cat.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source> </video>
对于Opera浏览器,您可以参阅这篇上周才发表的文章“Everything you need to know about HTML5 video and audio”
对于IE浏览器,那还不知道要等到猴年马月才等到支持HTML5 video
标签的时候。然而,广大劳动人民的智慧是无穷无尽的,广大开发人员的智慧也会无穷无尽的。国外领先的web开拓者们通过js,已经实现了可以让各个主流浏览器支持video
标签的方法。
二、主流浏览器支持video标签
方法很简单,只要调用一段js,就可以让主流浏览器实现video标签的视频播放。
此项目已经放到Google code上,您可以点击这里查看。
更新于2018-12-12
此项目已经迁到GitHub,地址是:https://github.com/etianen/html5media
官网地址是:https://html5media.info/
最新版JS可以去官网下载。
使用方法:
要想让主流浏览器都支持HTML5标签,使用非常简单,只要链接一个js文件就可以了。所以,只要您的页面上(头部或底部)有这么段代码:
<script src="//api.html5media.info/1.2.2/html5media.min.js"></script>
就可以了。
对于HTML部分,使用类似下面:
<video src="video.mp4" width="320" height="240" controls autobuffer></video>
是不是很简单啊!
为了演示效果,我就直接把此js以及video标签签到这篇文章里,您将会在下面看到这段10秒钟的关于猫咪的视频,您可以切换IE或是Firefox或是chrome或是Safari观看(界面有差别的哦~~)。
更新于2016-06-03
由于下面2个资源大大拖慢了网页的加载速度,因此,今日起博客文章不直接呈现效果,大家可以点击下面的demo链接体验。
您也可以狠狠地点击这里:HTML5 video多浏览器支持测试demo
当加载完毕,点击播放按钮,就可以看到视频播放了。
相关JS代码如下:
<script src="//api.html5media.info/1.2.2/html5media.min.js"></script> <video src="/study/media/cat.mp4" width="352" height="264" controls autobuffer></video>
三、一些说明
关于js
此js文件,您可以点击下面两处下载(右键 – [目标|链接]另存为):
1. 原项目地址下载
2. 备份下载地址
3. 去官网下载最新版:https://html5media.info/
关于实现
实现的原理大致是使用了flash技术,使用flash播放器嵌入视频的方式,使得IE及Firefox支持video
标签。这个播放器称为flowplayer,具体我也不是很了解。
关于视频格式
目前,这种多浏览器支持方法所支持的视频格式有限,为mp4和ogv格式,否则视频可能不会播放。
可能遇到的问题
您可能会遇到这样的问题:我明明链接的是mp4格式的文件啊,为什么在IE及Firefox下有问题。如果您遇到的问题是在这两个浏览器下视频不播放,或是播放时只有声音而没有图像,而在chrome浏览器或是Safari下良好,则您可能要仔细您mp4文件的编码格式了。
对于编码,我不在行,好像是视频要存储为h.264文件,不要问我是什么东西,我也不知道,这可能还要靠您自己解决了。
最后,百无聊赖,先上一张Safari浏览器下的截图,原因是,Safari下的播放器真是卡哇伊。
本文为原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=661
(本篇完)
- JS audio加图片序列或canvas转webM/MP4的实现 (0.634)
- 告别图片—使用字符实现兼容性的圆角尖角效果beta版 (0.538)
- JS与条形码的生成 (0.483)
- 前端原生API实现条形码二维码的JS解析识别 (0.483)
- 翻译-你必须知道的28个HTML5特征、窍门和技术 (0.366)
- 揭秘视频网站video视频倍速播放的实现 (0.303)
- HTML5 video视频播放Picture-in-Picture画中画技术 (0.303)
- 从天猫某活动视频不必要的3次请求说起 (0.303)
- 玩转HTML5 Video视频WebVTT字幕使用样式与制作 (0.272)
- HandBrake乃MP4免费压缩webm转换工具不二之选 (0.272)
- 借助ffmpeg.wasm纯前端实现多音频和视频的合成 (RANDOM - 0.121)
还是会有兼容问题哈,iphone5 百度浏览器 播放不了
最大的问题就是在安卓移动端视频层级太高,视频播放的时候后覆盖页面其他内容。比如h5弹窗无法正常显示,被视频盖住
这应该是腾讯的微信和QQ浏览器出现的,可以搜索下-》同层播放器
我这边客户要求要显示视频的缩略图,你这个demo是有的,我引用了js,但是视频一开始是一个大白框,点播放才有图,怎么搞,我哪里的姿势不对么?
可以覆盖一个图片和一个按钮在视频上,点按钮开始播放,隐藏上面这个图层
旭哥,video在手机端苹果和安卓不同的浏览器产生的效果都不同,能不能抽空讲解一下
你好,可以把js文件发到我邮箱里不,无法下载。谢谢
你好 不可以
我用video标签在手机里面就是这样啊不能播放怎么回事
我的也是手机上播放不了。。。您的解决了吗
肯定啊,手机不支持flash
用safari打开你的连接出现以下提示,我更新了最新的flash还是出现同样的提示
HTML5 video标签嵌入视频各个浏览器下通用
Flash version 9,0 or greater is required
You have no flash plugin installed
Download latest version from here
原来是windows的safari版本太低,无法显示
有没有可以不出现广告的?
旭哥,这篇其实跟实战需要相距甚远,这里的JS也严重拖慢页面的加载。我遇到的项目过程要考虑的因素比较多,视频是否可以自动播放?是否能循环播放?是否能原地播放?(我们项目实际上有把两个视频特写镜头放在一起透视摆放),是否能显示下载进度?播放的时候如何隐藏控制条?暂停的时候又能显示出来?
js下载失败
请问一下X5内核浏览器怎么隐藏下载按钮