积累和经验 html5 video player

在每天的工作过程中,认真积累,刻意练习。把日常遇到的问题总结纪录下来,然后转化成经验,最后再在项目中使用提升效率。

最近在项目接到要在手机千牛端做视频播放。当然我不用考虑不支持video标签的浏览器。不然的话就直接GG了。之前其实是没有真正做过video视频播放这块内容,所以趁着正好项目需要,好好学习了下。
首先是video标签的API

  • autoplay 如果出现该属性,则视频在就绪后马上播放。
  • controls 如果出现该属性,则向用户显示控件,比如播放按钮。
  • height 设置视频播放器的高度。
  • loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
  • muted 规定视频的音频输出应该被静音。
  • poster URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
  • preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。
  • src 要播放的视频的 URL。
  • width 设置视频播放器的宽度。

然后是video原生Dom对象支持的API和事件,这个就非常多,并且功能强大。我然后实现一个html5的播放器,基本上就是它的API进行调用。


虽然一切看上去都顺利,各种api也都有,直接用video标签,然后给个src,一切搞定。但是别忘了,项目有个大前提,那就是在千牛客户端(webView)下。它虽然支持video标签,但是偏偏对全屏支持得像一坨屎。并且千牛中并没有重力感应!也就是说完美全屏是不可能了。
那么退而求其次,实现伪全屏。 我首先想到的2种实现方式:

  1. 监听video的全屏事件,然后组织事件冒泡,最后自己实现伪全屏。
  2. 自己写个html5的播放器。然后实现伪全屏。

然而事实证明第一种方式并不可行,虽然我可以监听到fullscreenchange事件,但是并不能阻止系统级的全屏,不论是return false还是stopPropagationpreventDefault。当然可以在出发全屏事件的时候,直接调用webkitExitFullscreen退出全屏。这样从界面上看上会有一个闪屏的bug。

于是就是第二种方案,自己实现一个video。贴下源码git地址,还没有抽象得很好,但是基本能用了,有兴趣的自己看下,高手绕道啊。其实在写的时候并不是很难,基本上是调用文档API,搭一下界面。
当然也有几个注意点

  1. video的某几个API不支持,手动调用,像在console中直接执行video.webkitRequestFullScreen(),会有提醒Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture, 这种API就只能用户主动出发。
  2. 不要在video加载完成之前,就调用API,这样会出现这样的[错误]
    (http://stackoverflow.com/questions/3165444/html5-video-chrome-error-settings-currenttime)

总结下,其实实现一个播放器并不复杂。但是在选择一个现成的轮子还是自己造一个轮子的时候,要审时度势。用别人的轮子,前提也是你必须hold住。要了解过,比较过差异。这样就时经验,需要我们慢慢积累。

后记:
这里项目地址代码是最基础的demo版本。在项目使用过程又改了许多bug。这里就不更新了。
在实际项目开发中,当video停止播放(不是暂停)之后,video依旧在加载video资源。这样会导致不必要的资源浪费。经过实践可通过以下方式解决

1
2
3
audio.pause();   
audio.src = "";
audio.load();

详细问题解决地址 点这里