最近做的一个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. 树形dp汇总

    HDU 1520 HDU 2196 Codeforces 219D POJ 1155

  2. VS2013,asp.net网站转换为web应用程序

    此功能已经不在右键菜单里了,而在主菜单中的“项目-->转换为WEB应用程序”

  3. iOS基础框架的搭建/国际化操作

    1.基础框架的搭建 1.1 pod引入常用的第三方类库 1.2 创建基础文件夹结构/目录结构 Resource———存放声音/图片/xib/storyboard 等资源文件 Define——宏定义, ...

  4. Binary String Matching

    问题 B: Binary String Matching 时间限制: 3 Sec  内存限制: 128 MB提交: 4  解决: 2[提交][状态][讨论版] 题目描述 Given two strin ...

  5. Maven实现直接部署Web项目到Tomcat7(转)

    转载自:http://my.oschina.net/angel243/blog/178554 以前在项目中很少使用Maven,最近自己学习了一下maven,真的是非常强大的项目构建工具,对于依赖包的定 ...

  6. 引入Fresco

    这里告诉你如何在项目中引入 Fresco. 使用 Android Studio 或者其他 Gradle 构建的项目 编辑 build.gradle 文件: 1 2 3 4 dependencies { ...

  7. 模拟操作网页 webBrowser

    C# 获取IFrame中body元素 (winform) 方法1. 找出iframe的b.html的src , 利用webbrowser去加载b.html HtmlElementCollection ...

  8. supersr--NSURLSessionConfiguration-下载进度

    ////  ViewController.m//  下载进度 // //  Created by Super on 14/7/4. //  Copyright (c) 2014年 iOS. All r ...

  9. MyString(重写String)

    http://wenku.baidu.com/view/d7ac113243323968011c925b.html 已知类String的原型为: class String  { public:     ...

  10. http://poj.org/problem?id=3278(bfs)

    Catch That Cow Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 76935   Accepted: 24323 ...