目前,国内的主流android浏览器,都是有自己内核的(从webkit/blink开出来的分支)。在网页展示方面,这些浏览器的一大特点是,是用本地控件播放网页内的多媒体。例如用qq浏览器访问一次,搜狐视频的某个连续剧,点击,观看。
从原理上来说,要实现这种播放方式,需要考虑下面的三点:android系统能够给予什么程度的支持,页面本身能够提供哪些信息,页面与多媒体播放相关的本地控件的交互。
android系统提供了MediaPlayer组件,MediaPlayer很好用,给它一个视频源的url,和相应的surface就可以播放视频。当然,期间需要遵循MediaPlayer的状态机,所有必要信息在developer官网都可以找到。
页面中的一些元素可以用来播放多媒体,这些元素可以提供多媒体的url,同时如果有必要,还可以得到多媒体的显示区域(有小坑)。
播放过程中,页面会向本地控件索要,当前的播放进度,要求进行play,pause和seek等操作,本地控件会进行相应的响应;同时,本地控件会将准备好、缓冲进度、seek结束和播放结束等时机或信息主动通知给页面。
至此,需要申明四个名词:
inline(embed嵌,inner内):将视频的画面放在页面内部展示。即,嵌。
override(mount镶,cover外):将视频播放元素外接出来,覆盖在原来的播放区域之上。即,镶。少部分对这一块理解不够深入的人,往往混淆镶和嵌这两种播放方式。
partscreen(section):播放区域占据部分屏幕。
fullscreen(entire):播放区域铺满整个屏幕。
也就是说,在网页上播放视频,目前,就有了四种播放方式:
{embed,override}*{partscreen,fullscreen}
embed(嵌)的方式,是webkit/blink原生内核采用的播放方式。chrome这么做的。这种播放方式的好处是,视频画面位于页面内部,遵循页面内元素和层的z序。坏处是,不同网站视频播放的风格不统一,且会显得很死板。
mount(镶)的方式,是国内主流abdroid浏览器(uc和qq)所采用的视频播放方式。这些浏览器有自己的内核,外接了视频播放部分到本地控件。好处在于ui风格统一,便于实现视频小窗等增强功能,同时,对于多进程架构的chromium内核,这种方式允许用户观看视频的时候无需通过跨进程通信,就可以对视频进行seek,pause和play等操作。坏处是,本地控件将对应的区域完全覆盖,完全不遵守页面内的z序,严重影响了前端人员的自由度,是前端开发不友好的。表现为:用qq(今天是2017年3月16日),访问百度,视频,然后播放,然后点击该视频对应的分享按钮,发现,页面内弹出的分享面板被遮挡;此外,如果前端人员想要在视频暂停的时候,在视频区域之上防止一个图片广告,也无法被看到和点击。
为此,我们需要一种,即能够让播放画面遵循页面内不z序,有能够允许使用本地控件的播放模式:
mix优化模式:不再是整个视频播放元素(例如video)本地化,而是将播放控件本地化(例如video元素的controls)。然后,根据需要,隐藏只是占了很小区域或者背景透明的,播放控件。如此,有必要的时候,可以直接隐藏外接出来的本地controls,而不会影响视频的播放画面,同时允许前端开发人员遮盖视频播放画面。