• 技术文章 >web前端 >H5教程

    各视频站做到自动切换flash和html5播放器的难度有多大?

    2016-06-07 08:43:48原创1661
    实在是受不了mbp在各视频站下那可怕的发热了,试了很多插件,都不是很好,所以才会发问。
    1、做到根据操作系统、浏览器或者用户自定义来使用不同的播放器是否有难度?
    2、如果有难度,问题点在哪里?
    3、如果不算难,为什么不做?

    回复内容:

    判断操作系统和浏览器种类和版本,这个不难。

    目前的主流平台一共5个:

    桌面平台:
    移动平台:
    从上面可以看到,有半数以上的平台(包括已经放弃支持的)支持 Flash Player。既然超过了半数,就有进行切换的需求与可能。

    最完美的情况,就是检测操作系统和浏览器版本,根据不同情况进行适配,例如:

    虽然在前端开发上有一定的成本(例如 Flash Player 和 H5 的界面适配、Desktop 和 Mobile 的界面适配,以及各种浏览器和平台的组合之类的),但也不是不可承受。

    让我们来看看 Flash Player 与 H5 以及各个浏览器支持的视频格式吧(下表来自HTML5 Video):


    也就是说,在支持 video 标签的 H5 浏览器中,并没有一种视频格式是所有浏览器通吃的。

    如果觉得这个表不够详(zhuan)细(ye)的话,还可以看看下面这张图(下表来自wikipedia HTML5 video):


    如果抛弃掉可爱又可怜的 Opera ,以及不考虑 Firefox 在 OS X 和 Linux 上的问题,我们确实可以说,MP4格式已经是所有现代浏览器能够直接支持的视频格式(下表来自A/V Formats | The State of HTML5 Video Report):

    而实际上,已经有公司在做这件事(而且做了好久),JWPlayer 是一个优秀的 Flash Player 视频播放器,后来开始支持 H5,下面是它的一些介绍:

    所以,技术上并不是问题。做还是不做,我猜测最大的原因是视频格式转换成本。


    这些视频网站已经积累的大量的视频资源,早期基本上是 Flash Only 的 FLV 格式。后期如果继续用Flash Player 来播放视频,为了实现高清的支持,很可能使用的是 MP4 的马甲 F4V 格式。这两种文件格式的标准可以看这里: F4V/FLV Technology Center


    FLV 格式早期使用过两种编码,分别是 Sorenson Spark 和 On2 VP6 (下表来自 抛弃FLV,迎接MP4——制作Flash Player支持的H.264视频格式),这两种格式 H5 肯定是不支持的。

    因此,要将现有的海量视频数据转换成 MP4,需要一个相当的过程,视频网站可能考虑过这个过程比较漫长,就暂时将该工作搁置(或者正在平稳进行中)。


    比如,YouTube 就已经把自己的所有视频转向 WebM(这是 Google 推动的视频格式),可以看这里:YouTube Swiftly Converts Videos in WebM Format

    但 Google 毕竟是钞票多到用不完,牛人多到一个团,从标准到产品到实现一条龙的一流公司。对于天朝这些小公司比如 爱X艺优X库马铃薯之类来说,除了技术市场钞票广告之外,还必须考虑国情。

    在伟大而神奇的中国,大量的平台依然是Windows XP + IE6 组合,让这些系统升级到 IE8都嫌困难,更别提安装 Chrome 和 Firefox 这种现代浏览器了。针对于它们,Flash Player 是唯一的选择。既然用 Flash Player 来播放视频,那么 FLV 还是 MP4 显然就无所谓了。


    不过,一切都会改变的,至少在我们的有生之年,它们是一定会改过来的。


    相比用 H5 全平台看视频,我更期待在有生之年登上月球(火星太远就不考虑了)。不过就目前科技的发展速度来看,有点儿悬。


    另外吐槽题主3点:


    1. 不是所有人都买得起 MBP 的……

    2. 发热不能全怪在Flash Player 头上……

    3. 就算你一定要怪在 Flash Player 头上,也不要仅仅是怪在视频播放器头上……


    ==================

    2014-09-22更新:

    按照评论里面的同学说的,我用 Android+Firefox 访问了优酷/土豆等网站,确实,它们在移动设备上已经支持 H5了。

    所以我上面猜测的 视频格式转换成本 的原因应该是不存在的。

    那么,我再次猜测,原因可能是以下几点:


    1. Flash Player 在 PC 端的体验和表现更加一致,更容易管控播放器质量和进行版本迭代;

    2. 由于前面讲到的原因,H5 的支持在 Windows XP 上是无望的,只能使用 Flash Player,国内企业必须考虑这点;

    3. 为什么不检测浏览器版本实现不同平台使用不同的播放器,参照1的解释。

    1、做到根据操作系统、浏览器或者用户自定义来使用不同的播放器是否有难度?
    播放器主要功能移植非常简单
    老的FLV转MP4非常简单, 而且快
    2、如果有难度,问题点在哪里?
    见下文
    3、如果不算难,为什么不做?
    为啥不做? 道理很简单, 因为利益

    我以前在某视频网站做过大半年Flash视频播放器, 还做过4~5年的网页设计/程序, 对这两种视频播放技术还都算了解.

    Flash视频流行前, 主要是wmv/rm/mpg等, 机器上没装对应插件就不能放, 而且没法做太多交互, 用户体验非常差..
    后来以Youtube带领的视频分享网站开始流行, Flash的"免插件"和良好的交互扩展使得几乎100%的用户都能看到同样的视频.

    国内视频网站差不多是在05~06年左右开始流行的, 当时铺天盖地的视频网站, 泡沫充斥~~~但都找不到盈利点, 主要经济来源是网页上嵌入传统banner广告, 还有利用Flash包容性强的优点, 嵌入各种3A啦二三线广告公司拿过来的各种奇葩广告格式.(很多广告公司还要求获取用户观看视频时候的行为记录)
    这个盈利方式在如今已上市的优土网(优酷+土豆)依然保留着.

    HTML5能做广告吗? 当然可以, 但是因为html/js明码, 所以很容易被屏蔽!
    Flash里的广告代码其实也能屏蔽, 只是技术要求较大,相信大部分尝试过屏蔽优土网广告的人都见过50秒黑屏读秒, 而且使用反广告插件容4易被插入更恶心的钓鱼/返利代码.
    (这里推荐2个比较靠谱的反广告软件, "视频广告过滤大师"和"AdSafe3", 后者前段时间也爆出了插入返利代码的问题)

    最后, 个人认为, 什么时候视频网站不以插播广告为主要收益的时候, 就是Flash视频完全被HTML5视频替代的时候.(Adobe Flash CC已经可以用原本的Flash编辑器导出HTML5格式了) 有一个妈妈再也不担心我的MacBook 发热了,使用HTML5播放,支持部分网站,或者把浏览器的agent调成iPad,我目前在MacBook pro是这么用的。 作为浏览器的初学者在这里不请自答一下。

    1. 做到根据操作系统、浏览器或者用户自定义来使用不同的播放器是否有难度?
    理论上并没有难度。
    网站方面,服务器本身通过http的请求header中的useragent字段,或者是页面js通过检查useragent能够自动判别该浏览器的版本以及所处平台,再针对不同平台的不同浏览器做个大致分类这样一定是不麻烦的。至于片源问题可能稍微是点难点,这个取决于该网站本身的视频数量及大小。
    至于用户自定义方面,其实和服务器无关,轻巧点的方法就是修改UA让服务器“误以为”本浏览器搭载在如ios上等无法支持flash player的平台上,就可以打开相应的html5播放器的视频播放页面了。

    2、如果有难度,问题点在哪里?
    难度已经上述说过了,至于网站本身是否需要提供如此服务则是网站本身考虑的事情。

    3、如果不算难,为什么不做?
    目前主流的视频网站一般都有对UA进行判别然后给上不同的视频播放页面。
    所以并不存在不做的情况,而是网站对于提供内容的策略有自己的考虑。当然考虑是否妥当不是用户所能够左右的。

    至于MBP上,建议还是修改Useragent,假装自己是一只大pad吧! 说一个不太对题的答案。
    Click to Plugin for China这个Safari扩展会把flash自动替换成H5,如果不能播放,还可以切换回去。
    至于哪里找,请自行搜索。手机打字不容易。 优先播放html5版,如果不行切换成flash版,js控制很简单。之所以不做,是有的播放流地址在电脑端大部分浏览器下只能通过flsh播放。
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:mbp
    上一篇:如何解决table标签和col标签的一系列问题? 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • HTML4和HTML5之间的10个主要不同• 避免常见的六种HTML5错误用法 (5-6)• 小强的HTML5移动开发之路(11)——链接,图片,表格,框架• phonegap使用方法介绍(八)操作数据库• 哪个开源的移动 HTML5 框架更好一点?此问题提出于2011年
    1/1

    PHP中文网