最近做的一个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. 吐血大奉献,打造cnblogs最新最火辣的css3模板(IE9以下请勿入内) -- 第一版

    一直自己都想给自己的博客打造一个独一无二的皮肤,但是一直没有强劲的动力去完成这件事情.后来凭借着工作上面的需求(涉及到css3),就把自己的博客当成一个最好的试验场地.从而产生了你现在所看到的这个模板 ...

  2. Promise的前世今生和妙用技巧

    浏览器事件模型和回调机制 JavaScript作为单线程运行于浏览器之中,这是每本JavaScript教科书中都会被提到的.同时出于对UI线程操作的安全性考虑,JavaScript和UI线程也处于同一 ...

  3. HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...

  4. ASP.NET MVC 描述类型(二)

    ASP.NET MVC 描述类型(二) 前言 上个篇幅中说到ControllerDescriptor类型的由来过程,对于ControllerDescriptor类型来言ActionDescriptor ...

  5. Go语言实战 - 我需要站内搜索

    山坡网的用户抱怨"为什么搜索'二鬼子李富贵'找不到'二鬼子汉奸李富贵'?我用百度搜都能找到." 当时我就滴汗了,用户说的有道理,应该要能搜索到. 之前的方案很简单,用户输入的字串会 ...

  6. angular1

    1.双向绑定: 可进可出 2.依赖注入 函数有定义方定义 3.MVC M: Model 模型--数据 V: View 视图--表现层 C: Controller  控制器--业务逻辑 4.模板: {{ ...

  7. linq to js使用汇总

    用途:方便js操作查询json数据. 下载网址:http://jslinq.codeplex.com/ 使用方法:只需要引用linq.js即可. 查询方法: 一.where查询 var myList ...

  8. Vertica删除历史分区数据

    假设test用户下创建的t_jingyu表 vsql -Utest -wtestpwd create table t_jingyu( col1 int, col2 varchar, col3 time ...

  9. 【分布式】Zookeeper系统模型

    一.前言 前面已经讲解了Zookeeper的一些应用场景,但是并没有深入到Zookeeper内部进行分析,本篇将讲解其系统模型. 二.系统模型 2.1 数据模型 Zookeeper的数据节点称为ZNo ...

  10. Node学习笔记(一):stream流操作

    NodeJs中谈及较多的可能就是Stream模块了,先写一个简单的ajax回调 $.post("index.php",{data:'aaa',order:'ccc'},functi ...