zoukankan      html  css  js  c++  java
  • HTML5视频方案:支持iPad Safari、Firefox、Chrome、IE9876

    HTML网页视频点播方案

    想在网页中播放视频?

    以前浏览器不能直接播放视频,所以需要用插件,比如wmp、real player、flash。而wmp、real player不能跨平台、跨浏览器,flash有时候会导致浏览器卡、崩溃。

    现在浏览器集成了播放器,不再需要插件了,直接能放视频,提高了性能、稳定性、跨平台兼容性。在HTML 4、XHTML 1、HTML5的页面中都能播放。

    浏览器能播放哪种格式的视频?各个浏览器不同,有专利格式的,有开源格式的。

    具体支持情况如下:

    专利格式mp4:Safari(iPad、Windows、Mac OS)、Chrome、IE9

    开源格式webm:Firefox、Chrome、Opera

    开源格式ogg:Firefox、Chrome、Opera

    如何让视频在所有浏览器上都能播放?如何支持iPad和IE876?请看下文。

    商业方案:mp4->flash放mp4

    视频文件格式:mp4

    支持:Safari(iPad、Windows、Mac OS)、Firefox、Chrome、IE9876、Opera

    原理:检测浏览器是否支持播放mp4,不判断浏览器名称,只检测功能。

    结果:在Safari(iPad、Windows、Mac OS)、Chrome、IE9中原生播放mp4,在Firefox、Opera、IE876中使用flash播放器播放mp4。

    优点:1个mp4文件,支持所有主流浏览器

    缺点:mp4是专利格式,需考虑编码器授权

    前公司演示:http://www.happyelements.cn/

    步骤:

    1、在web server的mime配置中加入video/mp4

    2、下载代码:https://files.cnblogs.com/sink_cup/html_video.7z

    请注意flow player是GPL授权的(http://flowplayer.org/download/index.html),如果有闭源的需要,请购买flow player或者自己编译一个flex播放器,比较简单。

    代码采用公共领域授权,可任意使用。

    截图与拍照如下:

    开源方案:webm->flash放webm

    视频文件格式:webm

    支持:Safari(Windows、Mac OS)、Firefox、Chrome、IE9876、Opera

    不支持:Safari(iPad)

    原理:在Firefox、Chrome、Opera中原生播放webm,在Safari(Windows、Mac OS)、IE9876中使用flash播放器播放webm。

    优点:webm是开源格式,1个webm即可支持主流浏览器。

    缺点:不支持Safari(iPad),因为Safari(iPad)不支持flash。

    依赖于adobe flash player支持webm,adobe在2010年5月宣称flash player将支持webm(http://blogs.adobe.com/flashplatform/2010/05/adobe_support_for_vp8.html),截至2011年4月21日还没有结果。

    todo

  • 相关阅读:
    [ext4]空间管理
    [ext4] 磁盘布局
    [ext4]磁盘布局
    [ext4]08 磁盘布局
    [ext4]07 磁盘布局
    [ext4]06 磁盘布局
    [ext4]05 磁盘布局
    jQuery之链式编程
    jQuery之排他思想
    jQuery之筛选方法
  • 原文地址:https://www.cnblogs.com/sink_cup/p/html5_video_ipad_firefox_chrome_ie9876_flash.html
Copyright © 2011-2022 走看看