在一个新的项目上需要实现在线视频播放,原本打算借助优酷的视频存储和播放,但是发现这个需要用户注册优酷账户,严重影响用户体验,于是这个方案被毙掉了。于是开始了自己开发一个在线播放器的想法,当然尽量使用已有的开源播放器。忽然想到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. html5 头部阴影,兼容各种主流浏览器的CSS阴影效果

    CSS阴影效果(Box shadows)应用在Web页面设计上已经有了一段时间了.之前在CSS2阶段阴影效果还不是很有效之时,大部分的这种效果都是使用Photoshop图片实现的,但对于一些缺乏这些绘 ...

  2. 通过纯js代码实现将指定内容复制到粘贴板(兼容各主流浏览器)

    通过纯js代码实现将指定内容复制到粘贴板(兼容各主流浏览器) 1.业务需求: vue项目需要通过点击button按钮将指定内容复制到粘贴板中,且不引入第三方组件. 2.解决方案: js写法如下(这里是 ...

  3. 【QT/C++】基于QT开发的一款A-SOUL元素的视频播放器(附源码)

    [QT/C++]基于QT开发的一款关于A-SOUL的视频播放器(附源码) 前言 一.软件使用说明 1.运行软件的界面如下 2.操作软件的步骤 二.软件设计说明 1.UI界面的设计 2.主代码中的部分函 ...

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

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

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

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

  6. 基于Google的Android平台上GVR 3D全景视频播放器(支持本地文件和视频流传输)

    基于GVR(Google VR)安卓平台下的 3D全景视频播放器 Google GVR GVR简介 示例应用 源码实现 GVR关键的api调用 Gradle配置 效果图 布局 m3u8和hls协议(自 ...

  7. 基于百度AI+jquery-webcam+servlet实现人脸识别登录,兼容各主流浏览器

    1.注册百度AI账号,获取到AI开发资格 详情参见个人博客:你的第一个人脸识别demo(http://www.cnblogs.com/guo-eric/p/8109411.html) 2.环境准备 首 ...

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

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

  9. JavaScript自动设置IFrame高度(兼容各主流浏览器)

    调用方式如下 <iframe id="ifm" name="ifm" οnlοad="SetIFrameHeight('ifm')" ...

最新文章

  1. 全面解读PyTorch内部机制
  2. centos 6.8 64B mini origin vm file
  3. echo -e 参数
  4. 【c++】5.函数传指针与传值特容易混淆的点
  5. Flutter入门:application、module、package、plugin
  6. matlab中的rng函数
  7. 基于参考点的非支配遗传算法-NSGA-III(二)
  8. 【集合】JDK 7 HashMap集合的ConcurrentModificationException 原因
  9. 为你的平面海报设计提供灵感和思路
  10. python `__slots__`
  11. 河南计算机对口升学题,河南省计算机对口升学专基模拟试题(四)[1]
  12. cesium显示帧率FPS控件
  13. Python基础 模块化编程(模块的导入)
  14. 《微微一笑很倾城》中肖奈大神说的平方根倒数速算法是什么鬼?三十分钟理解!
  15. Linux学习笔记Day01-03 Xshell,Xfpt下载安装,使用
  16. 智能智慧型停车场管理系统解决方案
  17. 路由器的两种工作模式
  18. 写过的比较难受的题目
  19. iphonex 底部遮挡返回键 解决方法
  20. java 函数表_C语言、Java语言的符号表区别和特点是什么?分别是如和处理函数参数的?...

热门文章

  1. 三分钟了解坚果J10的不足,多方位分析,让你学会挑选投影仪
  2. 怎样判断小红书被限流?小红书被限流有这几大表现
  3. JavaScript 数据类型和类型转换
  4. 解决公务车Bug:公安违章管理中编辑新增的公安违章记录,点击保存按钮报:数据库操作异常,null
  5. 国家税务总局河南省电子税务局中,交契税时,报房屋属地税务机关必填的解决方法
  6. 基于FPGA的4位减法器设计及仿真代码
  7. CSDN最全数学公式
  8. UIView相对坐标转换
  9. 【批处理脚本】-2.4-打开命令start(典型应用:微信多开)
  10. 女程序员如何在朋友圈报喜-笑的我肚子疼