网站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页生成的脚本出了问题,没有考虑一些异常情况。具体原因没有细察。


目录
相关文章
|
1月前
|
移动开发 搜索推荐 HTML5
如何使用HTML5的语义化标签来提高网站的可访问性?
【4月更文挑战第1天】如何使用HTML5的语义化标签来提高网站的可访问性?
33 1
静态网页html+css的真ikun网站
静态网页html+css的真ikun网站
|
7月前
|
前端开发
【HTML实战】把爱心代码放在自己的网站上是一种什么体验?
【HTML实战】把爱心代码放在自己的网站上是一种什么体验?
|
7月前
|
Web App开发 移动开发 JavaScript
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
184 0
|
2天前
好看的html网站维护源码
好看的html网站维护源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,
18 3
好看的html网站维护源码
|
12天前
|
移动开发 前端开发 JavaScript
如何实时准确地从HTML5视频中截取当前播放画面
如何实时准确地从HTML5视频中截取当前播放画面
25 4
|
13天前
|
编解码 前端开发 JavaScript
【专栏:HTML与CSS实战项目篇】打造一个动态新闻网站
【4月更文挑战第30天】构建动态新闻网站,运用HTML和CSS提升编程技能和网页设计理解。项目包括首页、新闻列表页和详情页,设计简洁易用,包含顶部导航、轮播图和新闻列表。页面布局注重吸引力和易用性,色彩搭配选用冷色调为主,辅以亮色点缀。字体选择清晰易读,布局保持整洁。交互效果如轮播图、导航栏高亮和响应式设计增强用户体验。本文提供基础新闻网站构建指南,为进一步功能扩展和优化打下基础。
|
13天前
|
前端开发 测试技术 定位技术
【专栏:HTML 与 CSS 实战项目篇】构建一个企业级网站:HTML 与 CSS 实战
【4月更文挑战第30天】本文介绍了使用HTML和CSS构建企业级网站的实战步骤,包括项目概述、页面结构设计、HTML结构搭建、CSS样式设计、具体页面实现、优化与提升。通过合理布局、美观样式和响应式设计,创建现代、简洁的网站,包含主页、关于我们、产品展示、新闻动态和联系我们等页面。优化图片和代码,确保性能,助力企业在数字时代树立良好形象并提升沟通效率。
|
13天前
|
编解码 前端开发 UED
【专栏:HTML与CSS实践篇】HTML与CSS在电商网站中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在电商网站中的关键作用。HTML作为基础结构,定义网页内容和布局,用于页面布局、内容展示和表单处理;而CSS则负责样式设计和美化,包括响应式设计、交互效果和模块化,两者结合创建出功能齐全、视觉吸引力强的在线购物环境,提升用户体验。
|
13天前
|
编解码 前端开发 UED
【专栏:HTML与CSS实践篇】响应式网站开发实战
【4月更文挑战第30天】本文探讨了响应式网站开发,它能根据用户设备自动调整布局,提供最佳浏览体验。通过HTML和CSS,利用媒体查询、Flexbox和百分比宽度等技术实现响应式设计。媒体查询按屏幕尺寸定义CSS规则,Flexbox处理元素排列。文章通过新闻网站首页设计实例,展示了如何应用这些理论,包括使用Flexbox设计导航栏,使用媒体查询调整轮播图和内容区域,以及创建自适应页脚。遵循移动优先原则,关注性能优化和用户体验,响应式设计是前端开发的关键,为多设备用户提供优质浏览体验。