网站HTML5视频问题汇总

简介: 最近一直在处理HTML5视频相关的问题,以下是一些和各个视频网站与HTML5 Video相关的问题(不是针对Flash视频): 优酷在清晰度切换时的事件处理不当 优酷在视频下面的清晰度切换时,在JavaScript中会重新呼叫this.video.load()加载视频,但问题在于video的abor和errort处理函数会在WebKit内核的浏览器中造成递归调用。
最近一直在处理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页生成的脚本出了问题,没有考虑一些异常情况。具体原因没有细察。


目录
相关文章
|
26天前
|
移动开发 搜索推荐 HTML5
如何使用HTML5的语义化标签来提高网站的可访问性?
【4月更文挑战第1天】如何使用HTML5的语义化标签来提高网站的可访问性?
29 1
静态网页html+css的真ikun网站
静态网页html+css的真ikun网站
|
6月前
|
前端开发
【HTML实战】把爱心代码放在自己的网站上是一种什么体验?
【HTML实战】把爱心代码放在自己的网站上是一种什么体验?
|
6月前
|
Web App开发 移动开发 JavaScript
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
177 0
|
1月前
|
Web App开发 前端开发 安全
编程笔记 html5&css&js 031 HTML视频
编程笔记 html5&css&js 031 HTML视频
|
2月前
|
数据采集 数据安全/隐私保护
高效网络采集实践:使用 Haskell 和 html-conduit 下载 www.baidu.com 视频完整教程
网络采集在当今信息时代中发挥着关键作用,用于从互联网上获取数据并进行分析。本文将介绍如何使用 Haskell 进行网络编程,从数据采集到图片分析,为你提供一个清晰的指南。我们将探讨如何使用爬虫代理来确保高效、可靠的数据获取,并使用 Haskell 的强大功能来分析和处理数据。
|
9月前
|
前端开发 JavaScript API
wangEditor富文本编辑器的调用开发实录(v5版本、获取HTML内容、上传图片、隐藏上传视频)
wangEditor富文本编辑器的调用开发实录(v5版本、获取HTML内容、上传图片、隐藏上传视频)
493 0
|
9月前
|
移动开发 HTML5
在HTML5中 视频标签 和音频标签的介绍
在HTML5中 视频标签 和音频标签的介绍
154 0
|
6月前
|
机器学习/深度学习 数据采集 XML
使用BeautifulSoup解析豆瓣网站的HTML内容并查找图片链接
使用BeautifulSoup解析豆瓣网站的HTML内容并查找图片链接
|
8月前
|
移动开发 前端开发 HTML5
前端 HTML5 Svg 画板(支持视频、图片上涂鸦,支持缩放、修改、颜色、复选...)
前端 HTML5 Svg 画板(支持视频、图片上涂鸦,支持缩放、修改、颜色、复选...)
183 0