在一个新的项目上需要实现在线视频播放,原本打算借助优酷的视频存储和播放,但是发现这个需要用户注册优酷账户,严重影响用户体验,于是这个方案被毙掉了。于是开始了自己开发一个在线播放器的想法,当然尽量使用已有的开源播放器。忽然想到html5的video和audio可以实现视频和音频的播放。大喜,晚上搜索html5播放器,发现很多国外开发的很漂亮的html5播放器,其中就有videojs。由于videojs能够根据IE版本判断是否支持html5,若是不支持切换到flash播放器进行播放。看到这一点很满意果断选择videojs作为在线视频播放器,于是开始了后面的几天的漫漫调试之路。

videojs不需要第三方js库,所以相对很简单,大家可以从官网http://www.videojs.com/上面直接下载。测试环境windows2003 + IIS6。在测试过程中由于没有对网站设置MIME类型进行设置,在所有的浏览器上都无法播放,通过firebug发现404,视频源文件和vjs.woff找不到,于是IIS中的MIME设置中添加了以下video/mpeg 和 application/x-font-woff这两个MIME类型。添加之后在IE9以上版本测试一直无法播放,但是videojs的官方视频可以播放,一直很纳闷,研究了很久不得其所。最后通过IE的toolbar工具发现提示不是支持的视频或音频格式,于是上网搜索.mp4的MIME类型为video/mp4。修改后测试了firefox、chrome、360安全/极速浏览器、IE6/7/8/9,嘿嘿,都可以播放,很高兴,没有白忙活这段时间。

研究这个在线播放器也算积累些HTML5的一些基础知识,目前html5的视频编码格式分为3中,又一个不统一,搞死开发人员。

基于Html5的兼容所有主流浏览器的在线视频播放器videoJs的更多相关文章

  1. 部署国密SSL证书,如何兼容国际主流浏览器?

    国密算法在主流操作系统.浏览器等客户端中,还没有实现广泛兼容.因此,在面向开放互联网的产品应用中,国密算法无法得到广泛应用.比如,在SSL证书应用领域,由于国际主流浏览器不信任国密算法,如果服务器部署 ...

  2. 一款开源免费跨浏览器的视频播放器--videojs使用介绍

    最近项目中的视频功能,需要做到浏览器全兼容,所以之前用html5实现的视频功能就需要进行改造了.在网上翻了个遍,试来试去,在所有的视频播放器中,就数它最实际了.首先我们来看看它的优点: 1.它是开源免 ...

  3. 【转】一款开源免费跨浏览器的视频播放器--videojs使用介绍

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  4. html5标签兼容低版本浏览器

    随着html5(后面用h5代表)标签越来越广泛的使用,IE不识别h5标签的问题让人很是烦恼. 在火狐和chrome之类的浏览器中,遇到不认识的标签,只要给个display:block属性,就能让这个元 ...

  5. Html5视频播放器-VideoJS+Audio标签实现视频,音频及字幕同步播放

    一,VideoJS介绍 引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站 <link href=”http://vjs.zencdn.net/c/video ...

  6. 18种CSS3loading效果完整版,兼容各大主流浏览器,提供在线小工具使用

    今天把之前分享的两篇博客<CSS3实现10种Loading效果>和 <CSS3实现8种Loading效果[二]>整理了一下.因为之前所分享的各种loading效果都只是做了we ...

  7. 基于Vue.js的Web视频播放器插件vue-vam-video@1.3.6 正式发布

    前言 今日正式发布一款基于Vue.js的Web视频播放器插件.可配置,操作灵活.跟我一起来体验吧! 线上地址体验 基于vue3.0和vue-vam-video,我开发了一款在线视频播放器. 网址: h ...

  8. 一个酷炫的,基于HTML5,Jquery和Css的全屏焦点图特效,兼容各种浏览器

    基于HTML5和CSS的焦点图特效,梅花图案的背景很有中国特色,而且还会动哦,效果超炫,推荐下载! 演示图 html代码 <!DOCTYPE html PUBLIC "-//W3C// ...

  9. HTML5调用摄像头实现拍照功能(兼容各大主流浏览器)

    本人亲測,兼容各大主流浏览器,HTML5太强大了,须要的留下邮箱哦 假设想要立即收到,则可到我的资源下载 http://download.csdn.net/detail/laijieyao/81699 ...

随机推荐

  1. [BZOJ 1014] [JSOI2008] 火星人prefix 【Splay + Hash】

    题目链接:BZOJ - 1014 题目分析 求两个串的 LCP ,一种常见的方法就是 二分+Hash,对于一个二分的长度 l,如果两个串的长度为 l 的前缀的Hash相等,就认为他们相等. 这里有修改 ...

  2. Book of Evil

    Codeforces Round #196 (Div. 2) D:http://codeforces.com/contest/337/status/D 题意:给你一个树,然后树中有一m个点,求到这m个 ...

  3. GConf 错误:联系配置服务器失败;某些可能原因是需要为 ORBit 启用 TCP/IP 联网

    http://blog.csdn.net/heirenheiren/article/details/8107294 http://blog.sina.com.cn/s/blog_8097f8aa010 ...

  4. 从零开始制作jffs2文件系统

    JFFS2 是一个开放源码的项目(www.infradead.org). 它是在闪存上使用非常广泛的读/写文件系统,在嵌入式系统中被普遍的应用. 1.       安装mkfs工具 MTD主页:htt ...

  5. QT 读写二进制 (数值)高位在前

    在人们的计数规则中,一般都认为高位在前,即往前的地位大,如123,我们认为是一百二十三, 但在计算机中数值是以二进制存储的,字节是最小的存储单位,如int(32位),占4个字节,每个字节有八位, 24 ...

  6. semijoin链接进行subquery unnesting.

    drop table emp1; drop table dept1; create table emp1 as select * from emp; create table dept1 as sel ...

  7. JPA入门例子(采用JPA的hibernate实现版本) 转

    JPA入门例子(采用JPA的hibernate实现版本) jpahibernate数据库jdbcjava框架(1).JPA介绍: JPA全称为Java Persistence API ,Java持久化 ...

  8. 4种字符串匹配算法:KMP(下)

    回顾:4种字符串匹配算法:BS朴素 Rabin-karp(上) 4种字符串匹配算法:有限自动机(中) 1.图解 KMP算法是一种改进的字符串匹配算法,由D.E.Knuth,J.H.Morris和V.R ...

  9. [转]linux的ulimit各种限制之深入分析

    这是一篇非常好的文章,对ulimit的各个限制参数讲得非常透彻.原文链接:http://home.lupaworld.com/home-space-uid-56821-do-blog-id-23281 ...

  10. Dr.com5.2 for linux

    最近安装了在ubuntu基础上改的elementaryos,很漂亮,学校提供的破linux客户端不能连上,网上常见的也是旧版本. 最后在百度Dr.com贴吧和这个帖子 http://forum.ubu ...