日期:2014-05-17  浏览次数:20651 次

网站HTML5视频问题汇总
最近一直在处理HTML5视频相关的问题,以下是一些和各个视频网站与HTML5 Video相关的问题(不是针对Flash视频):

优酷在清晰度切换时的事件处理不当

优酷在视频下面的清晰度切换时,在JavaScript中会重新呼叫this.video.load()加载视频,但问题在于video的abor和errort处理函数会在WebKit内核的浏览器中造成递归调用。因为出错后,又再次尝试进行加载,如此反复不止。

        onAbort: function () {
            var currentTime = this.video.currentTime;
            this.video.load();
            this.controls.seekTo(currentTime)
        },
        onError: function () {
            var currentTime = this.video.currentTime;
            this.video.load();
            this.controls.seekTo(currentTime)
        },
两个事件中都应当是进行异常的检查和处理操作,而不是直接发起第二次操作。


plu.cn的video标签不标准

PLU.cn为保持与之前视频的兼容,使用如下方式将video包在以前flash使用的标签内:
  PLU.YOUKU_EMBED = '<embed src="http://v.youku.com/player/getRealM3U8/vid/@videoId@/type//video.m3u8" height="100%" width="100%">'
实际上这样做有点不伦不类。虽然Safari可以支持,但是UC和Opera就不能处理了。

他们目前已经修正了这个问题。

乐视视频的控制栏没有真正隐去

乐视采用了视频上方提供一个自己的控制栏,这样做本来挺好。但视频初始属性并没有要求浏览器隐去自带的控制栏,这样就有了重影了:
   
其视频标签如下:
  <video class="video" x-webkit-airplay="allow" style="width: 970px; height: 480px; " preload autoplaycontrols poster src="http://g3.letv.cn/17/40/60/letv-uts/663153-AVC-549911-AAC-59825-9782450-750417510-c6f60cecdcee5f799abc00eb83f9a112-1349816085551.mp4?b=613&amp;tag=ios&amp;np=1&amp;vtype=m3u8?_r0.0747976831626147"></video>

参考W3CSchool上的解释,在指定视频的控制栏属性时,因为其是布尔值,所以只要有controls就表示其为true了。即便你写controls="1234"也是true。
    

乐视有一些非法的视频src属性

比如网页中的视频: http://so.letv.com/tv/81638.html
其中的视频元件为:
    
应当HTML5页生成的脚本出了问题,没有考虑一些异常情况。具体原因没有细察。