最近做的一个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)

这次先到这里吧,下次碰到再补充吧。

h5嵌入视频遇到的bug及总结---转载的更多相关文章

  1. h5嵌入视频遇到的bug及总结

    最近做的一个h5活动因为嵌入视频而发现了好多以前从未发现的问题,在测试的时候不同系统不同版本不同环境等多多少少都出现了些问题,搞得我也是焦头烂额的,不过好在最终问题都解决了,自己也学到了好多东西,为了 ...

  2. h5中嵌入视频自动播放的问题

    在H5页面中嵌入视频的情况是比较多件的,有时候会碰到需要自动播放的情况,之前根本觉得这不是问题,但是自己的项目中需要视频的时候就有点sb了,达不到老板的要求,那个急呀~~~ 各种查资料,找到一个方法, ...

  3. 如何使用jQuery 制作全屏幕背景的嵌入视频

    实际效果查看:http://keleyi.com/keleyi/phtml/jqtexiao/28.htm 请使用支持HTML5的浏览器查看本效果. 完整代码如下: <!doctype html ...

  4. 使用CKplayer插件在网页中嵌入视频的方法(常用笔记2)

    在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩 ...

  5. HTML页面嵌入视频和JS控制切换视频的问题

    文章摘自:http://www.cnblogs.com/jorton/archive/2012/03/19/vidio_in_site.html 首先,在页面中嵌入视频的HTML代码为: 1 < ...

  6. 使用JWPlayer在网页中嵌入视频

    首发:个人博客,持续更新和纠错 我一直以为在网页中嵌入视频是件复杂的事,一研究才知道原来非常简单. 实际就是在页面中嵌入个控件.社区里已有很多解决方案了.jwplayer是最受欢迎的(之一).控件包括 ...

  7. Android:webView加载h5网页视频,播放不了,以及横屏全屏的问题和实现自定义加载进度条的效果

    1.webView加载h5网页视频,播放不了,android3.0之后要在menifest添加硬件加速的属性 android:hardwareAccelerated="true". ...

  8. 【CKplayer】使用CKplayer插件在网页中嵌入视频的方法

    在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩 ...

  9. intouch/ifix嵌入视频控件2(报警视频联动初步思路)

    在项目中有朋友遇到类似的需求,ifix中嵌入视频,并实现报警与视频的联动功能.诸如,重要设备启动时,摄像头自动弹窗,并持续一段时间自动弹窗关掉:设备故障时,摄像头自动截图,录像一段时间存储:设备停止时 ...

随机推荐

  1. 关于fill_parent,match_parent和wrap_content (转载)

    fill_parent&match_parent: 在Android2.2及以上版本中,fill_parent与match_parent意思相同(其中fill_parent兼容低版本).都是尽 ...

  2. ios Tabbar Item 的图标

    1,tabBarItem图片的推荐尺寸和最大支持尺寸 下面是标签栏(UITabBar)中tab按钮图标分别在1x.2x.3x下不会压缩变形的尺寸: @1x : 推荐 25 x 25   (最大: 48 ...

  3. ios 中使用https的知识

    先看文章,这篇文章说的是使用AFNetworing进行https时的事项,十分好!http://blog.cnbang.net/tech/2416/ ios中使用https,主要就是使用NSURLCr ...

  4. ios coredata 无任何错误提示crash

    最近写程序是遇到了一种情况,对coredata 操作时,有一定几率crash,crash时无任何说明,断点调试后发现,fetch出的对象的属性竟然和数据库中的不同,不知道什么情况下导致了context ...

  5. windows8 安装TortoiseSVN后的反应

    因为工作需要,昨天安装了TortoiseSVN 64位版,没有马上重启. 随后,IIS中打开页面后浏览器一片空白,没有网页,没有地址,什么都没有.这时还没想到可能是TortoiseSVN的问题.后来实 ...

  6. a byte of python(摘02)

    a byte of python 第四章 运算符与表达式 运算符 运算符优先级 (运算符通常由左向右结合,即具有相同优先级的运算符按照从左向右的顺序计算.例如, 2 + 3 + 4 被计算成 (2 + ...

  7. codeforces 493A. Vasya and Football 解题报告

    题目链接:http://codeforces.com/contest/493/problem/A 题目意思:给出两个字符串,分别代表 home 和 away.然后有 t 个player,每个playe ...

  8. sprinvMVC路径拦截

    关于这种路径的拦截: http://localhost:8080/moodleCourse-tool/scorm/23681/mod_scorm/content/1/index_SCORM.html ...

  9. js 如何在浏览器中获取当前位置的经纬度

    这个有一定的误差哈,具体的误差是多少,有兴趣的朋友可以去测试下 直接上代码 index.html页面代码: <html> <head lang="en"> ...

  10. Redis事件管理(一)

    Redis统一的时间管理器,同时管理文件事件和定时器, 这个管理器的定义: #if defined(__APPLE__) #define HAVE_TASKINFO 1 #endif /* Test ...