http://jackxiang.com/index.php zh-cn http://jackxiang.com/post// jack <xdy108@126.com> Sat, 02 Apr 2016 10:04:20 +0000 http://jackxiang.com/post//
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）

这次先到这里吧，下次碰到再补充吧。 ]]> http://jackxiang.com/post//#blogcomment <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 http://jackxiang.com/post//#blogcomment