视频播放,移动端填坑记

2019-11-03 04:08栏目:Web前端

摄像播放–踩坑小计

2018/06/09 · JavaScript · 视频

原稿出处: chenjsh36   

 

随着流量时代的降临和硬件技艺的升高,越来越多的网址希望能在PC端或运动端播放自身的录制,而 <video>的宽容性的日益全面,使得开垦者更乐于利用它来促成录像播放场景。

本篇小说首要罗列__录像播放的通用途景及各场景下踩过的坑__,希望能__帮助开采者在遇见须求开垦时能更加快地筛选极其的施工方案相同的时间削减采坑的次数__。

浅谈html5 video 移动端填坑记,浅谈html5

本文介绍了html5 video 移动端填坑记,分享给大家,具体如下:

<video id="video" 
  style="object-fit:fill" 
  autoplay
  webkit-playsinline 
  playsinline 
  x5-video-player-type="h5"
  x5-video-player-fullscreen="true"
  x5-video-orientation="portraint" 
  src="video.mp4" />
</video>
<!--
  object-fit: fill   视频内容充满整个video容器
  poster:"img.jpg" 视频封面
  autoplay: 自动播放
     auto - 当页面加载后载入整个视频
     meta - 当页面加载后只载入元数据
     none - 当页面加载后不载入视频

  muted:当设置该属性后,它规定视频的音频输出应该被静音

  webkit-playsinline playsinline:   内联播放

  x5-video-player-type="h5" :  启用x5内核H5播放器
  x5-video-player-fullscreen="true"  全屏设置。ture和false的设置会导致布局上的不一样
  x5-video-orientation="portraint" :声明播放器支持的方向,可选值landscape 横屏,portraint竖屏。
                                     默认值portraint。无论是直播还是全屏H5一般都是竖屏播放,
                                     但是这个属性需要x5-video-player-type开启H5模式
-->

自动播放

设置autoplay属性

<video autoplay></video>

移步浏览器中

可是在众多平移浏览器里,都以要求客商的实在操作来(touchend、click、doubleclick 或 keydown 事件等标准的平地风波)触发调用video.play(),本领自动播放影音摄像。

 dom.addEventListener('click', function () {
   video.play()
})

微信中

也能够在  wx.ready()里触发video.play()

wx.ready(function () {
  video.play()
})

内联播放

设置属性 webkit-playsinline playsinline

<video id="video" webkit-playsinline playsinline /></video>

在iOS Safari和大器晚成部分安卓的大器晚成部分浏览器下播放摄像的时候,不能够在h5页面中播放录制,系统会活动接管视频

假使供给在h5页面内广播录像,要求在摄像标签上助长  webkit-playsinline,在iOS10从此今后,需求加多playsinline,提出还要增加那多个属性。相同的时间还必要app扶植这种形式

webview.allowsInlineMediaPlayback = YES;

ios手Q和Wechat都援助这种形式,但是android Wechat就挂了

android 微信

androidWechat内置浏览器接收TencentX5内核,不固守X5web正经,video强制全屏就是以此。摄像播放完成后还可能会产出QQ自个儿的摄像推荐

据悉,其有个白名单,白名单下的摄像资源,就不会全屏。但是Tencent曾经不能够再增添白名单了。尿性,无解。。。。。。

如今还应该有一个化解办法,正是使用h5  canvas 播放 video

canvas 播放摄像

利用canvas 遭遇的坑:video 必需加 x5-video-player-type="h5" 属性,否则,在活动端就能够卡死不能播放录制,个人以为是因为摄像被接管的案由促成。

<div class="wrapper">
  <video id="video" style="display: none" autoplay src="video.mp4" x5-video-player-type="h5"></video>
  <canvas id="canvas"></canvas>
</div>
<script>
  var video = document.querySelector('#video')
  var canvas = document.querySelector('#canvas')
  var wrapper = canvas.parentNode
  var width = wrapper.offsetWidth
  var height = wrapper.offsetHeight
  var ctx = c.getContext('2d')
  var time = null
  canvas.width = width
  canvas.height = height

  canvas.addEventListener('click', function () {
    video.play()
  })

  video.addEventListener('play', function () {
      time = window.setInterval(function () {
        ctx.drawImage(v, 0, 0, width, height);
      }, 20);
  }, false);

  video.addEventListener('pause', function () {
      window.clearInterval(time);
  }, false);

  video.addEventListener('ended', function () {
      window.clearInterval(time);
  }, false);
</script>

末段开采,尽管选取canvas播放录制,android微信中得以屏蔽全屏摄像播放完的推荐摄像。可是还未办法明确命令禁绝录像播放时 的全屏难题。依然得万恶的白名单。戏弄。。。。。。。。。。。。。。。。
更坑爹的是不曾找到js触发退出全屏的方法。

ios黑屏难点

ios 在播报录像时,相会世不久的黑屏,然后正常展现。

消除措施:

在录制上层覆盖三个增多二个div并用一张图纸填充,成立播放前加载假象。然后监听事件 timeupdate ,录像播放有画面时移除那个“div块”

video.addEventListener('timeupdate', function(){
  if(video.currentTime > 0.1){
      posterImg.hidden();
  }
})

Media 方法和性质

HTMLVideoElement和HTML奥迪(Audi卡塔尔国oElement 均继续自HTMLMediaElement

// 媒体错误
MediaObj.error; //null:正常
MediaObj.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效

//媒体当前状态
MediaObj.currentSrc; //返回当前资源的URL
MediaObj.src = value; //返回或设置当前资源的URL
MediaObj.canPlayType(type); //是否能播放某种格式的资源
MediaObj.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
MediaObj.load(); //重新加载src指定的资源
MediaObj.buffered; //返回已缓冲区域,TimeRanges
MediaObj.preload; //none:不预载 metadata:预载资源信息 auto:

//准备状态
MediaObj.readyState;//1:HAVE_NOTHING 
                    //2:HAVE_METADATA 
                   //3.HAVE_CURRENT_DATA 
                  //4.HAVE_FUTURE_DATA 
                 //5.HAVE_ENOUGH_DATA
MediaObj.seeking; //是否正在seeking

//回放状态
MediaObj.currentTime = value; //当前播放的位置,赋值可改变位置
MediaObj.startTime; //一般为0,如果为流媒体或者不从0开始的资源,则不为0
MediaObj.duration; //当前资源长度 流返回无限
MediaObj.paused; //是否暂停
MediaObj.defaultPlaybackRate = value;//默认的回放速度,可以设置
MediaObj.playbackRate = value;//当前播放速度,设置后马上改变
MediaObj.played; //返回已经播放的区域,TimeRanges,关于此对象见下文
MediaObj.seekable; //返回可以seek的区域 TimeRanges
MediaObj.ended; //是否结束
MediaObj.autoPlay; //是否自动播放
MediaObj.loop; //是否循环播放
MediaObj.play(); //播放
MediaObj.pause(); //暂停

//视频控制
MediaObj.controls;//是否有默认控制条
MediaObj.volume = value; //音量
MediaObj.muted = value; //静音

//TimeRanges(区域)对象
TimeRanges.length; //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置

//【★★★**相关事件**★★★】
//事件分发
var eventTester = function(e){
    Media.addEventListener(e,function(){
        console.log((new Date()).getTime(),e)
    },false);
}
//事件监听
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载(不是因为错误引起)
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载(不是因为错误引起),
eventTester("error"); //请求数据时遇到错误
eventTester("stalled"); //网速失速
eventTester("play"); //play()和autoplay开始播放时触发
eventTester("pause"); //pause()触发
eventTester("loadedmetadata"); //成功获取资源长度
eventTester("loadeddata"); //
eventTester("waiting"); //等待数据,并非错误
eventTester("playing"); //开始回放
eventTester("canplay"); //可以播放,但中途可能因为加载而暂停
eventTester("canplaythrough"); //可以播放,歌曲全部加载完毕
eventTester("seeking"); //寻找中
eventTester("seeked"); //寻找完毕
eventTester("timeupdate"); //播放时间改变
eventTester("ended"); //播放结束
eventTester("ratechange"); //播放速率改变
eventTester("durationchange"); //资源长度改变
eventTester("volumechange"); //音量改变

以上便是本文的全体内容,希望对大家的上学抱有利于,也愿意我们多多点拨帮客之家。

video 移动端填坑记,浅谈html5 本文介绍了html5 video 移动端填坑记,分享给大家,具体如下: video id=video style=object-fit:fill autoplay w...

又是少数个月未有写东西,照旧太懒散了~一定要教育下团结罗~

场景生机勃勃:自动播放

autoPlay 布尔属性;钦命后,录像会顿时自动在此以前广播,不会停下来等着数量载入结束。

录制自动播放可以在页面张开且财富加载丰裕的情景下让录像自动播放,减少叁遍用户点击的交互,同时能够动用在动作效果背景、H5仿摄像通话的法力。可是是因为各样缘由,自动播放无论在PC端照旧移动端都有两样程度的限量。

此番做了个广播摄像的运动H5,以前从未稳重玩过,好好记录下基本知识,还大概有遭遇的一些坑,方便之后再也相遇后进行消弭

移动端

 

IOS

早期非得要有顾客手势(user gesture卡塔 尔(阿拉伯语:قطر‎video标签本事够播放; 从版本10发端纠正了video的平整,苹果放宽了inline和autoplay,战略如下(仅适用于Safari浏览器卡塔尔:

  • <video> elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.(无音频源的 video 成分 允许自动播放)
  • <video muted> elements will also be allowed to autoplay without a user gesture.(禁音的 video 成分允许自动播放卡塔尔
  • If a <video> element gains an audio track or becomes un-muted without a user gesture, playback will pause.(纵然 video 成分在一贯不客户手势下有了音频源或然形成非禁音,会中断播放卡塔 尔(英语:State of Qatar)
  • <video autoplay> elements will only begin playing when visible on-screen such as when they are scrolled into the viewport, made visible through CSS, and inserted into the DOM.(video 成分荧屏可以知道才伊始播报卡塔尔
  • <video autoplay> elements will pause if they become non-visible, such as by being scrolled out of the viewport.(video成分不可以预知后停下播放卡塔尔国

一、基本

安卓

__早期__同等需求顾客手势才得以播放; 安卓的 chrome 53 后放宽了自动播放计谋,战术不一样于IOS的Safari,须要同一时间对 video 设置 autoplay 和 muted(是或不是禁音卡塔 尔(阿拉伯语:قطر‎,才同意自动播放; __安卓的 FireFox 和 UC 浏览器__协理其余动静下的自动播放; 安卓的别样浏览器一时不驾驭情状;

video标签在宽容性上依然比很差的,即使要在页面中运用video标签,供给思忖三种境况,辅助Ogg 西奥ra可能VP8的(Opera、Mozilla、Chrome卡塔尔国,帮助H.264的(Safari、IE 9、Chrome卡塔尔国,都不辅助的(IE6、7、8卡塔 尔(英语:State of Qatar)。但是由于H5在活动设备上展现,基本都以使用webkit内核,只须要思考Android、IOS设备上的差异。

PC端

早期是__支撑自动播放,但__近来 Safari、Chrome 时有时无纠正了自动播放的计策……

<video id="video" autoplay="autoplay" loop="loop" preload="auto" controls="controls" src="movie.mp4" poster="pre.jpg" 
    width="640" height="1280">
    浏览器不支持,换个牛逼点的吧
</video>

Safari 浏览器

__Safari 10 后__带音频的摄像和节奏暗中认可幸免自动播放,更加的多消息能够参照那篇作品;

Chrome(旧版本卡塔尔国 下自动播放:

图片 1

Safari (10后卡塔 尔(阿拉伯语:قطر‎不自动播放:

图片 2

video标签包涵src、poster、preload、autoplay、loop、controls、width、height等几个特性, 甚至叁个之中接纳的竹签<source>。video标签内除了能够饱含<source>标签外,还足以分包当钦定的录制都不能够播放时,再次来到的开始和结果,如上边的文字。

Chrome 浏览器

禁音的录像仍然能够播放,�带声音的摄像会依赖__媒体插手指数__来调控是还是不是自动播放,那怎么是媒体出席指数?官方给了表明和有关的维度:

MEI 是二个评估顾客对于近年来站点的传播媒介插足程度的指数,它决计于上边多少个维度:

  • 顾客在传媒上停留时间超越了 7秒以上
  • 旋律必得是展现出来,而且未有静音
  • 与 video 之间有过相互影响
  • 媒体的尺寸一点都不小于 200×140.

看完后开垦者的心底是那样的:

图片 3

图片 4

1、src

检查评定是不是自动播放?

幸好无论是 Safari 依然Chrome,在界定了自动播放的还要,提供了质量评定录制是或不是能自动播放的体制,以便于开采者在发掘无法自动播放时有备选方案:

var promise = document.querySelector('video').play(); if (promise !== undefined) { promise.catch(error => { // Auto-play was prevented // Show a UI element to let the user manually start playback }).then(() => { // Auto-play started }); }

1
2
3
4
5
6
7
8
9
10
var promise = document.querySelector('video').play();
 
if (promise !== undefined) {
    promise.catch(error => {
        // Auto-play was prevented
        // Show a UI element to let the user manually start playback
    }).then(() => {
        // Auto-play started
    });
}

正是媒体文件的URAV4L,不用那个标签也能够应用当中标签<source>,不过个人感到用src雅观些~同样各种浏览器对媒体文件的格式有供给,就援助3种格式ogg、mp5、webM,包容性如下

思考

格式   IE   Firefox   Opera   Chrome   Safari
Ogg   No   3.5      10.5    5.0     No
MPEG4  9.0   No      No     5.0     3.0
WebM   No    4.0    10.6   6.0      No

为何开始时期禁止录制自动播放?

because it can be disruptive, data-hungry and many users don’t like it. (因为它是破坏性的、需求大批量流量同不经常间广大客户不欣赏它)

 

干什么又同意自动播放?

  • 有一点点开垦者使用别的措施如 canvas、gif 等来落到实处录制自动播放的意义,可是质量上、流量消耗上都远不及摄像播放;
  • 今天流量低价了、手提式有线电话机硬件越来越好了;
  • 顾客能够经过设置来禁绝自动播放(开启省流量格局等卡塔尔国;

2、poster

怎么 IOS 下微信和钉钉能够自动播放带响声的录像?

的确发以往Wechat常常能来看自动播放的H5,然而小编本人写的装置了 autoplay、playsInline 的录像播放样例,在Wechat上依然不可能自动播放,而在钉钉上却能够自动播放

系统-浏览器 带声音 不带声音
IOS 钉钉 支持 支持
IOS Safari 禁止 自动播放
IOS 微信 禁止 禁止

透过询问资料,IOS WebAPP 开荒都是基于 IOS 提供的浏览器内核实行支付的,所以在 Web应用程式 的 webview 中能够改革自动播放的表现,钉钉显然是永葆自动播放,Wechat则是明确命令禁止自动播放,不过提供了安置事件来援救自动播放:

Wechat下通过 WeixinJSBridgeReady 事件进行自动播放:

document.addEventListener( 'WeixinJSBridgeReady', function() { video.play(); }, false );

1
2
3
4
5
6
7
document.addEventListener(
  'WeixinJSBridgeReady',
  function() {
    video.play();
  },
  false
);

poster属性用于内定一张图片的U奥德赛L,在时下录制数据无效时显示。录像数据无效可能是录像正在加载,恐怕是录制地址错误等等。那些天性如故蛮有用场的,非常是在网络状态不如何的时候,把录像的首先帧图片放在这里,然后当摄像播放时就不曾违和感。

现象二:全屏管理

在移动端浏览器,  video 在客商点击播放依旧通过API video.play() 触发播放时,会强制以全屏置顶的花样打开始播放报,设计的初志大概是因为全屏能提供越来越好的客户体验,但临时开荒者希望能和煦支配是还是不是全屏进而完毕任何急需。

 

playsinline 撤除全屏

倘使想实现不全屏播放,只需在video标签加个 playsinline 属性就可以,这些天性在__基于webkit内核的活动端浏览器__核心没难点,实在可怜就再加个 webkit-playsinline :

<video src={videoUrl} webkit-playsinline="true" playsinline="true" />

1
2
3
4
5
<video
    src={videoUrl}
    webkit-playsinline="true"
    playsinline="true"
  />

那么对于任何功底的浏览器要怎么管理吧?这时要询问下方今市道上设有的浏览器有怎样。

3、preload

playsinline 兼容性

率先要明了大地前段时间四个浏览器内核:

  • 微软IE的__Trident__
  • 网景最先研究开发后卖给Mozilla基金会并演变成火狐的__Gecko__
  • KDE的开源内核__Webkit__
  • Opera的__Presto__

图片 5

其中:

  • __Trident __在运动端主要为WP7系统内置浏览器
  • Presto 在富有联网设备上都利用,移动终端上第生机勃勃为 Opera Mobile、OperaMini、欧朋浏览器以至欧朋HD Beta版
  • __Webkit__底子的适用范围则较为平淡无奇,Android原生浏览器、苹果的Safari、Google的Chrome(Android4.0利用)都是基于Webkit开源内核开采的。

而境内普及的PC浏览器如__UC浏览器、QQ浏览器、百度手提式有线电话机浏览器、360康宁浏览器、Google浏览器、搜狗手提式有线电话机浏览器、猎豹浏览器__以及__运动端的UC、QQ、百度等手提式有线电话机浏览器__都是基于Webkit更正回复的内核,本质上大家能够以为市镇上运动端顾客选取的大半都以webkit内核只怕依据webkit 内核做校正的浏览器,所以 playsinline 的宽容性相当好!

此属性用于定义录制是不是预加载。属性有七个可筛选的值:none、metadata、auto。假使不利用此属性,默以为auto。

气象三:播放调控

video 元素有提供几个人展览现事件供开采者调节录像播放,包容性比较好的有 onended 、 __ontimeupdate、onplay、onplaying ,__稍微事件在分歧浏览器区别器材上的的表现意况并不等同,

例如:ios 下监听’canplay‘(是不是已缓冲了足足的数据足以流畅播放卡塔 尔(英语:State of Qatar),当加载时是不会接触的,纵然__preload=”auto” __也没用,但在 pc 的 Chrome 调节和测量试验器下,是会在加载阶段就接触。ios 须求播放后才会接触。

None:不进行预加载;

Chrome 模拟器

加载成功:

图片 6

点击播放:

图片 7

Metadata:部分预加载(包涵尺寸,第风流罗曼蒂克帧,曲目列表,持续时间等等卡塔尔;

MacOS Safari

加载成功:

图片 8

点击播放

图片 9

Auto:全部预加载;

IOS Safari

加载成功:

图片 10

点击播放:

图片 11

部分事件在不一样系统、设备、浏览器下显得的特点不相同等,使用的时候需谨严。

 

地方四:隐讳播放控件

controls 加上那性格子,Gecko 会提供客商调控,允许顾客调节录像的广播,富含音量,跨帧,暂停/恢复生机播放。

controls 属性规定浏览器应为摄像提供播放控件,反之则藏身播放控件,那么开荒者能够自定义本人的播报控件。隐蔽播放控件在 PC 端和 IOS 移动端兼容性出色,而在__安卓移动端并不帮忙掩没控件__,可是仍是可以由此一些措施来落到实处。

4、autoplay

黑科技法

正如黑科学技术的方法是加大录像,把控件条移到视线之外,进而达到隐瞒的功能!其实正是让摄像成分比父容器还大,那样尾部的主宰条就能在父容器外面,然后父容器设置为:overflow:hidden, 达成掩没播放控件的艺术! 劣势是录像会被推广,必要提前留好空白供放大用。

图片 12

autoplay属性用于安装摄像是或不是自动播放,现身时,表示自动播放,去掉是代表不自动播放。(这一个性子在活动器具上蛮废的卡塔 尔(英语:State of Qatar)

Wechat浏览器

Tencent的android团队的x5内核团队松开了录像播放的界定,摄像不必然调用它们特别相当受诟病的摄像播放器了,利用__x5-video-player-type=”h5″ 性格隐瞒控件成分,同不平日间__录制不再置顶,允许别的因素浮动在顶层

 

总结

问询了录像播放的通用途景及广大的坑后,大家假如__本着分裂的场馆提供对应的兜底方案__就会加强客商体验效果。举例移动端自动播放的H5 页面,能够经过引导顾客进行点击大概滑动来间接触发摄像播放是最保守的做法,no bug!更加好的方案是默许自动播放并捕捉禁绝播放的景况,再指点顾客张开相互作用完成录制播放。

行使 video 举行录制播放前期因为涉嫌到品质消耗大、流量消耗多以至处于客商体验等的考虑,在运动端被限制得很悲戚,不过随初阶提式无线电电话机性子的升高、流量时期的来到、越来越强地气象必要,逐步放宽了限制,而PC端则日益从“宽松世代”走向“紧缩世代”,两个都有出于让顾客有更加好地心得的指标而不断更新自身的国策,未来讲不定会走向一统,开采者就足以从后面部分宽容适配中释放出来,进而有更多沙参力来做更上层的做事。

5、loop

参考

  • auto-play-policy-changes-for-macos
  • Chrome auto-play
  • auto-play-is-bad-for-users
  • 为啥很稀少浏览器选择Gecko内核?
  • 浏览器内核

 

1 赞 3 收藏 评论

图片 13

loop属性用于钦赐录制是或不是循环播放

 

6、controls

固然现身该属性,则向客商体现控件,调整栏须包涵播放暂停调控,播放进程决定,音量调整等等。

 

7、width、height

宽度、高度罗

 

二、方法和事件

var video = document.getElementById("video");

1、属性和章程

a、错误

video.error; //null:正常

video.error.code; //重返错误编码 1.客商终止   2.网络错误   3.解码错误   4.U安德拉L无效

b、网络状态

video.currentSrc; //重回当前资源的UENVISIONL

video.src = value; //重临或设置当前财富的U景逸SUVL

video.canPlayType(type); //是不是能播放某种格式的能源

video.networkState; //重临互联网状态码 0.此成分未早先化   1.好端端但不曾采用互联网   2.正值下载数据   3.从未找到能源

video.load(); //重新加载src钦定的能源

video.buffered; //再次回到已缓冲区域

video.preload; //再次来到预加载消息  none:不预载   metadata:预载财富音讯  auto:

c、播放状态

video.currentTime = value; //当前播报的地点,赋值可转移地方

video.startTime; //平时为0,借使为流媒体或许不从0开首的财富,则不为0

video.duration; //当前能源长度 流重返Infiniti

video.paused; //是或不是暂停

video.defaultPlaybackRate = value;//暗中认可的回看速度,能够安装

video.playbackRate = value;//当前播送速度,设置后迅即退换

video.played; //再次回到已经播放的区域,TimeRanges

video.ended; //是不是终止

video.autoPlay; //是还是不是自动播放

video.loop; //是还是不是循环播放

video.play(); //播放

video.pause(); //暂停

d、录制调节

video.controls;//是或不是有暗中同意调控条

video.volume = value; //音量

video.muted = value; //静音

 

2、事件

video.addEventListener("XXX" , function(){
    //.....
})

XXX是事件类型

loadstart //客商端开端诉求数据

progress //客商放正在呼吁数据

suspend//延迟下载

abort //顾客端主动甘休下载(不是因为错误引起卡塔 尔(阿拉伯语:قطر‎

loadstart //客商端开始需要数据

error //诉求数据时遇上错误

stalled //网速失速

play //play()和autoplay此前播报时接触

pause//pause()触发

loadedmetadata //成功获取财富长度

waiting//等待数据,并非大谬不然

playing//初叶回看

canplay//能够播放,但中途只怕因为加载而付之东流

canplaythrough//能够播放,歌曲全部加载完结

seeking //寻找中

seeked//搜索达成

timeupdate //播放时间转移

ended//播放甘休

ratechange//播放速率改换

durationchange //能源长度退换

volumechange //音量校订

 

三、开垦中相见的坑

1、VCD文件在浏览器中不能不播放音频部分,摄像片段不显得

那是付出时最最早蒙受的标题,因为录制是用数码相机录的,经过滤镜、剪辑等拍卖导出AVI格式,然后通过格式工厂转成mp5,不过在浏览器中便是未有录制显示只有音频的声息。最终显著是录制转变是编码的主题材料,格式工厂在转变时得以选择部分编码格式,包括MPEG2、MPEG4、AVC、WMV2等等。接收AVC就好了,那个时候也是醉了

 

2、VCD文件在苹果设备的浏览器上不可能播放,android上是好的

播放按键上多少个大大的斜杠,表示不能播放,那时候心里泪崩啊。经过难题查找,是因为http合同中并未有rang央浼头,具体跟IOS的播放器怎样选拔http合同实行mp5拆解深入分析有关。最方便神速的淹不可能正是行使nginx寄放DVD文件。

http头的Range、Content-Range表示http断点续传

Range 

用于央浼头中,钦命第叁个字节的岗位和终极一个字节的岗位,常常格式:

Range:(unit=first byte pos)-[last byte pos] 

Content-Range

用以响应头,钦命整个实体中的生机勃勃局部的插入地方,他也提示了整整实体的长短。在服务器向顾客重临一个某个响应,它必得描述响应覆盖的限制和任何实体长度。平日格式: 

Content-Range: bytes (unit first byte pos) - [last byte pos]/[entity legth] 

伸手下载整个文件: 

  1. GET /test.rar HTTP/1.1 
  2. Connection: close 
  3. Host: 116.1.219.219 
  4. Range: bytes=0-801 //日常诉求下载整个文件是bytes=0- 或并非这一个头

貌似不荒谬回答

  1. HTTP/1.1 200 OK 
  2. Content-Length: 801      
  3. Content-Type: application/octet-stream 
  4. Content-Range: bytes 0-800/801 //801:文件总大小

 

3、IOS设备自动播放不奏效,应当要手动调用play()方法

autoplay真的是个蛮未有怎么效果的天性,IOS中无法自动播放,供给JS调用play()方法,解决办法正是

<script>
            if ("wView" in window) { //用于苹果设备自动播放
                window.wView.allowsInlineMediaPlayback = "YES";
                window.wView.mediaPlaybackRequiresUserAction = "NO";
            }
</script>

在html文件head标签中投入上述JS代码

 

4、在风流倜傥部分android设备上无法播放

力不能及播放是指autoplay那一个鬼未有用,同不日常间调用play()方法一致然并卵,这么些主题材料自己也不知晓化解的来由是怎么,在网络抄的代码

具体情况是,在广播时索要看清顾客的无绳电话机连串,IOS和Android设备分开管理

var isiOS = !! navigator.userAgent.match(/(i[^;] ;( U;)? CPU. Mac OS X/);

接下来IOS设备直接动用autoplay这么些天性也许调用play()方法,android那边需求在video之上加一张图片,通过点击图片然后播放,100ms之后设置录制时间为1S,然后再度播放,就OK了

$(video).css({
    display: "block"
});
$(".androidBegin").show();
$(".androidBegin").bind("touchstart", function(a) {
    video.play();
    setTimeout(function() {
        video.currentTime = 1;
        video.play();
    }, 100)
    $(".androidBegin").hide();
    $(video).unbind("touchstart");
})

假定不参预点击事件,直接调用点击事件内的播音代码,那么该录像就直接甘休了,以为好奇葩,然后正是连连播放四个录像,只供给首先个利用上述代码实行接触就能够,之后的录像直接调用play()方法就能够,如有大神遇到相通的标题,有越来越好的主意,请指教下,多谢!

 

版权声明:本文由六合联盟发布于Web前端,转载请注明出处:视频播放,移动端填坑记