用html5的视频元素所遇到的第一个坑
html5 有一个video标签,这个是被大家所熟知的事情。按照w3c的规范,我认真的写出如下代码:
<video preload="auto" controls="true" width="100%" height="100%">
<source src="t.mp4" type="video/mp4">
your browser does not support the video tag....
</video>
var video = document.querySelector('video');
video.addEventListener('error',function(){
alert('error');
// close the video player
}); video.play();
然后悄悄地拿出我私藏的小电影去播放,都没有问题。于是满心欢喜的用在了项目中。直到有一天,测试部的同事跑来告诉我说,有一段视频播放不出来,播放界面又关不掉。我
急忙要来apk进行检查。发现是里边有一个mp4文件格式有问题,而代码又没有捕获到这个错误。这时我就纳闷了,我明明写了error事件,为什么没有触发呢,难道没有这个事件吗
于是急忙google,发现是有这个事件的。经过仔细的对比,我发现,通过source指定视频文件的时候,error触发不到。改成下面这样,就捕获到了:
<video src="t.mp4" preload="auto" controls="true" width="100%" height="100%"></video>
虽然是之前没有测试失败情况,才导致今天的问题,但是不能不说这是video元素的一个坑。如果不改dom结构,我尝试了一下,在source上邦定error事件,也是可以捕获到错误的。
video.querySelector('source').addEventListener('error',function(){
alert('error');
});
以后用这个元素的时候,就要小心了。鉴于存在以上原因,我认为在video元素里直接指定src是值得推荐的写法。
用html5的视频元素所遇到的第一个坑的更多相关文章
- 使用ffmpeg视频编码过程中踩的一个坑
今天说说使用ffmpeg在写视频编码程序中踩的一个坑,这个坑让我花了好多时间,回头想想,非常多时候一旦思维定势真的挺难突破的.以下是不对的编码结果: ...
- HTML5 Video(视频)
HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显 ...
- HTML5 音频视频
HTML5 视频和音频的 DOM 参考手册 HTML5 DOM 为 <audio> 和 <video> 元素提供了方法.属性和事件. 这些方法.属性和事件允许您使用 JavaS ...
- HTML5中音频视频标签使用
HTML5中音频视频标签使用的最好方式 Html5中提供了<audio> <vedio>元素实现音频视频的引入播放 然而更好的方式
- HTML5 - 新增的元素,删除的元素
1,HTML5新增的元素(1)用于构建页面的语义元素:<article>,<aside>,<figcaption>,<figure>,<foote ...
- html5音频视频专题
html5音频视频专题 总结 1. 操作的就是video和audio两个对象,这两个对象有他们的属性和方法,通过对象的id就可以操作他们 <audio src="../video/琴箫 ...
- html5的 embed元素 和 object元素
html5的 embed元素 和 object元素 一.总结 一句话总结: embed定义嵌入的内容,比如插件,比如flash object定义定义一个嵌入的对象,用于包含对象,比如图像.音频.视频. ...
- HTML5: HTML5 Video(视频)
ylbtech-HTML5: HTML5 Video(视频) 1.返回顶部 1. HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 ...
- canvas与html5实现视频截图功能
这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...
随机推荐
- JS 将数字转化成为货币格式
最近由于项目的需要需要将数字format成货币格式,自己搞了半天效果不是很好,博客园有篇问题很好,再次转载记录一下 http://www.cnblogs.com/mingmingruyuedlut/a ...
- APP设计资源
在开发独立客户端时,需要一些不同尺寸的图标和图片,统计如下. APP 图标 ICON iOS:(主要需要这三类图标) 58x58 87x87 (Spotlight & Settings) 80 ...
- 通读AFN②--AFN的上传和下载功能分析、SessionTask及相应的session代理方法的使用细节
这一部分主要研究AFN的上传和下载功能,中间涉及到各种NSURLSessionTask的一些创建的解析和HTTPSessionManager对RESTful风格的web应用的支持,同时会穿插一点NSU ...
- JQuery的父、子、兄弟节点查找方法
jQuery.parent(expr) //找父元素 jQuery.parents(expr) //找到所有祖先元素,不限于父元素 jQuery.children ...
- angularJs 指令的理解
指令: 可以把指令理解成为特定的DOM 上运行的函数,指令扩展了这个元素的功能: 例如:ng-click--在DOM元素上绑定了一个click事件的监听,并在监听到事件时运行angular表达式 自定 ...
- sql SYS对象集合
select * from SYS.objects select * from SYS.all_objects select * from SYS.tables select * from SYS.c ...
- 看看Maple T.A.的详细作用
Maple T.A.是一个基于互联网的在线考试和智能评分系统,是Maplesoft公司 与美国数学协会(MAA)合作开发的成果,在全球拥有大量的院校用户.Maple T.A.提供了用户数据库.所见即所 ...
- java 引入自定义字体font后出现的硬盘吃光的问题
有个需求要用美术字体在图片上写字 用自定义的文字有两个方法: 1. Font dynamicFont = Font.createFont(Font.TRUETYPE_FONT, InputStream ...
- Eclipse上安装GIT插件EGit及使用
一.Eclipse上安装GIT插件EGit Eclipse的版本eclipse-java-helios-SR2-win32.zip(在Eclipse3.3版本找不到对应的 EGit插件,无法安装) E ...
- Mysql修改root密码
一.启动命令行,输入: taskkill /f /im mysqld.exe //关闭mysql 二.转入mysql的bin目录下 三.输入:mysqld --skip-grant-tables // ...