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下微信

以下方案可解决部分手机自动播放问题(当然还有好多不同手机包括不同系统版本还没测,以后会继续更新的)

 1 function autoPlay(id){
 2     var a = document.getElementById(id),
 3         play = function(){
 4             a.play();
 5             document.removeEventListener("touchstart",play, false);
 6         };
 7     a.play();
 8     document.addEventListener("WeixinJSBridgeReady", function () {//微信
 9        play();
10     }, false);
11     document.addEventListener("touchstart",play, false); //触摸
12 }
13 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)

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

时间: 2024-09-29 16:51:19

h5嵌入视频遇到的bug及总结的相关文章

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

在H5页面中嵌入视频的情况是比较多件的,有时候会碰到需要自动播放的情况,之前根本觉得这不是问题,但是自己的项目中需要视频的时候就有点sb了,达不到老板的要求,那个急呀~~~ 好在之前看过公司前辈的项目,正好用到了视频,并且可以自动播放,爽!!! 赶紧copy过来,记录一下.这里主要监听了canplaythrough事件,然后自己去让视频play(),在这个过程中还发现,ios和安卓不一样,安卓上需要设置muted才能自动播放,ios没这个限制,还有就是有时候视频也可能有问题,导致不能自动播放,之

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

实际效果查看:http://keleyi.com/keleyi/phtml/jqtexiao/28.htm 请使用支持HTML5的浏览器查看本效果. 完整代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&

框架,锚点,背景音乐,嵌入视频和跑马灯效果

框架,iframe有点过时,会在部分浏览器出现一些奇怪的问题:设置三个属性: 1.src,框架默认的显示路径 2.name,让超链接的target属性与name值相等,就可以将超链接网页在框架中打开 3.框架的宽度和高度 站点:实际上就是一个文件夹,单独起了一个名字.统一来管理所有页面,就是一个站点,称之为网站 锚点: 书写格式:<a href="#锚点位置对应的名称">内容</a> --#是在本页面中 <a name="锚点位置的名称"

使用JWPlayer在网页中嵌入视频

首发:个人博客,持续更新和纠错 我一直以为在网页中嵌入视频是件复杂的事,一研究才知道原来非常简单. 实际就是在页面中嵌入个控件.社区里已有很多解决方案了.jwplayer是最受欢迎的(之一).控件包括js.css和swf文件,swf文件就是播放器,它是控件的一部分,引入控件包跟引入其他的前端控件包方法一样,拷贝到项目路径下即可.视频是个flv文件,flv文件就放哪里都行了.个人建议像图片一样放个单独的服务器. 示例程序在这里,代码已经传到了github上.jwplayer本身的文档在这里,藏得非

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

在做网站中有时候我们需要在网页中嵌入视频,一般视频嵌入有以下几种方法: 1. 优酷代码嵌入 优点:简单,方便,可靠. 缺点:有广告,现在的网站非常注重用户体验,如果打开一个在线视频是有长广告的一定会崩溃的. 2. 利用<object>标签嵌入视频 优点:也比较方便,对于swf来说不错. 缺点:如果播放的是wmv格式,利用Chrome打开就搞笑了,有时候会提示你安装media player插件,有时候连个提醒都没有.也就是说跨浏览器的能力不足. 不同的视频格式还有不一样的代码,太繁琐. 3. 利

当网站中嵌入视频中,总是弹出迅雷的下载框,或者视频无法播放的情况

最近遇到一个奇葩的问题,在web中嵌入视频要么就是弹出迅雷下载的窗口,要么就是提示:您的视频路径不对或者不支持您的类型,这有一种可能就是装了迅雷.具体的解决办法就是,直接把迅雷中的设置关了就行. 如下图,把其中的勾去掉就行. 如果还是不行的话,有可能就是internet设置的问题.只需要在IE浏览器中更改设置就行.具体如下: IE浏览器选项工具-internet属性-程序-管理加载项-已使用的加载项 在这里面把迅雷的插件关闭 如果想要还是这里打开就可以了

嵌入视频,计算观看时长

通过获取腾讯视频的vid 在页面内通过iframe嵌入视频 <iframe id="my-videos" frameborder="0" width="960px" height="400px" src="https://v.qq.com/txp/iframe/player.html?vid=q00273zq6vy" allowFullScreen="true"></i

H5 播放视频常见bug及解决方案

本文摘自:本文来自“小时光茶社(Tech Teahouse)”公众号 原文:https://mp.weixin.qq.com/s/MM5ZwCiWLAeHalsNYMImnw 1. 自动播放问题 通过autoplay属性视频的自动播放需要在video标签上添加autoplay属性, 如: <video autoplay><video/> 但是在很多浏览器里,如iOS下并不支持这个属性,在iOS下必须给webview设置: self.wView.allowsInlineMediaPl

H5之视频

1.基本概念 想在H5中灵活运用视频,必须对video相关的属性.Api有个大致的了解,这里首先对最基本的进行普及一下. 1) <video>标签属性 src :视频地址 width height :视频宽高(px) h5中可指定为当前设备屏幕宽高 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 webkit-playsinline="true" | playsinl