h5嵌入视频遇到的bug及总结---转载
最近做的一个h5活动因为嵌入视频而发现了好多以前从未发现的问题,在测试的时候不同系统不同版本不同环境等多多少少都出现了些问题,搞得我也是焦头烂额的,不过好在最终问题都解决了,自己也学到了好多东西,为了方便以后用到参考,所以就记下来咯。现在有一个感悟就是当问题来临的时候不要觉得沮丧不要抱怨而要积极面对,有问题就说明自己做的不够好,而问题解决之后自己又能积累一些,又能学到一些新东西,这样不是挺好的吗。哈哈,下面我就简单记下这次h5项目中的问题。
1,webkit-playsinline playsinline 可用于防止ios用户视频播放自动全屏(safari是顽疾暂时没办法搞定),android是不自动全屏的。
2,$('.video').on('ended',function(){}) 用于检测在视频播放完(不管是快进还是自动播完)之后执行某些操作。
$('.video').trigger('play')和document.getElementById('video').play() 用于触发播放视频,由于autoplay在手机端为保护用户流量而被禁用的。
document.getElementById('video').pause() 暂停
document.getElementById('demo').volume+=0.1 控制音量
3,audio不支持autoplay:iphone6下safari,三星(微信 第三方浏览器(chrome))
audio支持autoplay:iphone6下微信,三星自带浏览器
video不支持autoplay:iphone6下safari,三星(微信 浏览器 第三方浏览器(chrome))
video支持autoplay:iphone6下微信
以下方案可解决部分手机自动播放问题(当然还有好多不同手机包括不同系统版本还没测,以后会继续更新的)
function autoPlay(id){
var a = document.getElementById(id),
play = function(){
a.play();
document.removeEventListener("touchstart",play, false);
};
a.play();
document.addEventListener("WeixinJSBridgeReady", function () {//微信
play();
}, false);
document.addEventListener("touchstart",play, false); //触摸
}
autoPlay('audio');
5,然后就是这次遇到一个大bug,视频开始是隐藏的,但当我点击让它显示出来然后播放时,页面是显示出来了,但是有部分手机是只有声音而没有图像,这说明video没有显示出来就已经播放了,后来解决方案是再show()一遍,而且而且不能给播放视频事件加延迟,否 则在有些手机也会遇到问题,可是到现在我差不多只能猜测这样的结果,因为实在是出现的没有规律,以后只能继续积累了。
6,还有以前很少用到unbind方法,但是这次发现你点击一个页面如果过快的话可能会二次触发的,所以如果只是想触发一次那就在触发结束后用unbind解绑事件。
上面基本上就是这次项目中遇到的问题,下面再继续延伸一些相关知识以便下次用到:
7,停止下载视频(由于当你暂停视频后有的浏览器可能还会继续下载视频):
var a = document.getElementById("");
a.pause();
a.src=''; 或 a.removeAttribute("src");
8,设定播放的时间点定位:
var a = document.getElementById('');
a.seekable.start(0); // 返回开始时间 (秒)
a.seekable.end(0); // 返回结束时间 (秒)
a.currentTime = 100; // 定位到第 100 秒播放
a.played.end(0); // 返回已经播放的时间长度(秒)
9,设定播放范围:
当在网页里嵌入视频/音频文件时, <audio>
或 <video>
元素允许我们提供一些额外的信息来指定播放哪一时间段。实现的方法是在媒体文件后面跟随(“#”)格式的信息。如:
src="video.mp4#t=10,20" (从10s播放到20s)
src="video.mp4#t=10" (从10s播放到完)
src="video.mp4#t=,10" (从开头播放到10s)
这次先到这里吧,下次碰到再补充吧。
最新文章
- linux文件特殊权限
- python走起之第六话
- preg_match()漏洞
- html5 canvas simple drawing
- vim--golang代码补全
- 100+诡异的数据集,20万Eclipse Bug、死囚遗言等
- spring boot实战(第十二篇)整合RabbitMQ
- configure: error: C++ compiler cannot create executables
- Unity3D研究院之在把代码混淆过的游戏返混淆回来
- VC 透明滑动控件Slider Control
- 数学(逆元):BZOJ 2186: [Sdoi2008]沙拉公主的困惑
- spark-shell启动集群
- 自定义ViewGroup实现垂直滚动
- MongoDB:利用官方驱动改装为EF代码风格的MongoDB.Repository框架 四
- iOS开发——二级列表
- 2017年php面试题汇总
- linux 因内存不足而 kill 掉 java 程序
- Tomcat 全攻略
- Java 正则校验整数,且只能是非0开头
- PHP中按值传递和引用传递的区别
热门文章
- cmd命令查看局域网内计算机信息
- 【转】Java-----jar反编译修改重新打包
- code vs1436 孪生素数 2(数论+素数的判定)
- 火狐----此地址使用了一个通常用于网络浏览以外的端口。出于安全原因,Firefox 取消了该请求。
- [Android Pro] Android 4.1 使用 Accessibility实现免Root自动批量安装功能
- eclipse 注释模板
- python基础——匿名函数
- Codeforces Round #371 (Div. 2)(set\unique)
- Android -- startActivityForResult-------&;&;&;----setResult
- Ubuntu 14.04 Trusty安装java环境