视频播放,移动端填坑记

视频播放–踩坑小计

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和微信都帮助那种情势,不过android 微信就挂了

android 微信

android微信内置浏览器采取腾讯X5内核,不坚守X5web正规,video强制全屏就是这一个。摄像播放落成后还会现出QQ自己的摄像推荐

神话,其有个白名单,白名单下的摄像资源,就不会全屏。但是腾讯早已不可以再扩展白名单了。尿性,无解。。。。。。

现阶段还有一个解决办法,就是选择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…

正文来源“小时光茶社(Tech Teahouse)”公众号

事先的类型中有使用的video的因由,所以也踩了好多的坑。好久事先的总括了,前天打算找出来共享一下
动用vodeo标签,如今尝试了三种艺术,一种是原生的video的价签,一些东西需求自己手写功用,其余一个就是运用video.js一度封装过的项目。
中间也有许多是根源外人的博客,直接搬来用了

情景一:自动播放

autoPlay 布尔属性;指定后,摄像会马上自动初阶广播,不会停下来等着多少载入截至。

摄像自动播放可以在页面打开且资源加载丰盛的景象下让视频自动播放,收缩两回用户点击的并行,同时可以应用在动效背景、H5仿视频通话的效用。可是出于各个缘由,自动播放无论在PC端依旧移动端都有不一样程度的限定。

小编简介:
文赫,二零一五年进入腾讯,作为前端开发工程师参加承办Q游戏公会,游戏大旨,企鹅电竞等品类,具有丰盛的移位端支出和直播开发经历。

  • h5原生的video标签

移动端

导语

企鹅电竞项目,直播和视频播放是里面的中央。面对着成品同学不断的摸底:为什么h5的心得这么差?为啥不可能和app的广播体验保持一致?大家对着h5不明了的文档和见仁见智浏览器的奇异表现欲哭无泪。
经过一密密麻麻的调研爬坑,斩荆披棘,我们一步步升官了体验,做到了和app基本一致的体会。在摸索优化背后,大家也想把这一个标题和化解办法计算下来,让其余同学做到直播的时候可以自豪的说,这就是大家的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
    元素在尚未用户手势下有了音频源或者变成非禁音,会一曝十寒播放)
  • <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元素不可知后终止播放)

1. 自动播放难题

  • 通过autoplay属性
    视频的自动播放需求在video标签上添加autoplay属性, 如:

      <video autoplay><video/>
    

    不过在重重浏览器里,如iOS下并不协助这几个特性,在iOS下必须给webview设置

    self.wView.allowsInlineMediaPlayback = YES;self.wView.mediaPlaybackRequiresUserAction = NO;
    

    才能让这么些特性生效从而让用户一进入页面就开始视频的自动播放

  • 经过平素调用video.play()方法
    在有的场所下我们想插手一些断定逻辑,如判断用户网络环境,在wifi下自动播放,在4g环境下交给提醒,那中状态下就适合直接当选video并调用video.play来播音录像

video标签的一些属性
  <video
    id="my-video"
    src="test.mp4"
    controls = ""    /*禁掉默认控制条-- 必要*/
    poster="poster.jpg"  /*视频封面*/
    preload="auto"  /*预加载*/
    webkit-playsinline="true"  /*iOS 10中设置可以让视频在小窗内播放*/
    playsinline="true"
    x-webkit-airplay="allow"  /*启用AirPlay支持*/
    x5-playsinline
    x5-video-player-type="h5"  /*对于x5内核声明启用同层H5播放器*/
    x5-video-player-fullscreen="true"   /*全屏设置设置为 true 是防止横屏*/
    x5-video-orientation="portraint"  /*播放器的方向,默认为竖屏*/
    x5-video-orientation="portraint" /*播放器支付的方向,landscape横屏,portraint竖屏,默认值为竖屏*/
    style="object-fit:fill" /*去除黑边*/
    >
   </video>

安卓

__早期__一致必要用户手势才方可播放; 安卓的 chrome 53
放宽了自动播放策略,策略不一致于IOS的Safari,须求同时对
video 设置 autoplay 和 muted(是还是不是禁音),才同意自动播放;
__安卓的 FireFox 和 UC 浏览器__支撑任何意况下的自动播放;
安卓的其余浏览器暂时不通晓情形;

2. 页面内联播放难题

在iOS
Safari和局地安卓的有些浏览器下播放摄像的时候,不可能在h5页面中播放视频,系统会活动接管视频

万一急需在h5页面内播放视频,需求在摄像标签上足够webkit-playsinline,在iOS10将来,要求加上playsinline,提出还要加上那多少个特性,同时须要app协助那种方式,手Q和微信都帮忙这种情势

    //在html
    <video id="player" webkit-playsinline playsinline >    //在app内设置webview属性
    webview.allowsInlineMediaPlayback = YES;
上面我们来看看这几个属性的功力:
  1. @ src:要嵌到页面的视频的URL。可选;你也足以动用video块内的
    <source> 元一向指定必要嵌到页面的视频

  2. @
    autoplay:布尔属性;指定后,视频会登时自动开头播放,不会停下来等着数量载入为止

  3. @ controls:加上那几个特性,Gecko
    会提供用户控制,允许用户控制视频的广播,包涵音量,跨帧,暂停/恢复生机播放

  4. @
    poster:一个海报帧的URL,用于在用户播放仍然跳帧从前体现。倘使属性未指定,那么在率先帧可用以前5哪些都不会显得;之后第一帧似乎海报帧一样展现

  5. 视频播放,移动端填坑记。@
    preload:该枚举属性目的在于告诉浏览器小编认为达标最佳的用户体验的主意是哪些。可能是下列值之一:
    none:提醒小编认为用户不须要查阅该视频,服务器也想要最小化访问流量;换句话说就是提示浏览器该视频不必要缓存
    metadata:提醒尽管作者认为用户不需求查阅该视频,但是抓取元数据(比如:长度)仍旧很合理的
    auto:用户须要以此摄像优先加载;换句话说就是提示:倘若需求的话,可以下载整个视频,即便用户并不一定会用它
    空字符串:也就代指 auto 值

  6. @
    buffered:这个特质量够读取到哪段日子限定内的媒体被缓存了。该属性包蕴了一个
    提姆eRanges 对象

  7. @ played:一个 提姆eRanges 对象,指明了视频已经播放的具备范围

  8. @ loop:布尔属性;指定后,会在视频结尾的地方,自动再次回到视频开首的地方

9@muted:布尔属性,指明了视频里的节奏的默许设置。设置后,音频会先河化为静音。默许值是
false ,意味着摄像播放的时候音频也会播放

  1. @ height:摄像呈现区域的中度,单位是 CSS 像素

  2. @ width:视频展现区域的宽窄,单位是 CSS 像素

  3. @
    crossorigin:该枚举属性指明抓取相关图片是或不是必须用到CORS(跨域资源共享)。
    支持CORS的资源 可在
    <canvas>元素中被收录,而不会被污染。允许的值如下:
    anonymous:跨域请求会被执行,不过不发送凭证。
    use-credentials:跨域请求A cross-origin
    request会被执行,且凭证会被发送。

  4. @ 提姆eRanges 对象表示事件段,比如,视频快进的年华段,有一个 length
    属性,表示时间段的个数,有多少个措施 start() 和 end()
    ,分别再次来到时间段先导的时间点和得了的岁月点

  5. @ webkit-playsinline和playsinline:视频播放事势域播放,不脱离文档流
    。然则那几个特性比较更加, 需要安置网页的APP比如WeChat中UIwebview

    的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback

    YES,才能卓有成效。换句话说,即使APP不设置,你页面中加了这标签也没用,那也就是干吗安卓手机WeChat
    播放摄像总是全屏,因为APP不帮忙playsinline,而ISO的WeChat却辅助。
    此处即将补充下,假若是想做全屏直播或者全屏H5体验的用户,IOS需求设置删除
    webkit-playsinline 标签,因为你设置 false 是不帮忙的
    ,安卓则不要求,因为默认全屏。但那时全屏是有广播控件的,无论你有没有设置control。
    做直播的或是用得着播放控件,不过全屏H5是不需求的,那么去除全屏播放时候的控件,要求以下设置:同层播放。

  6. @
    x-webkit-airplay=”allow”暂时无法适用的掌握其功效,估摸,这么些特性应该是使此摄像帮忙ios的AirPlay功用。使用AirPlay可以平素从利用iOS的装置上的两样职位播放视频、音乐还有照片文件,也就是说通过AirPlay效能可以兑现影音文件的有线广播,当然前提是广播的巅峰设备也要帮衬相应的机能。

  7. @
    x5-video-player-type:启用同层H5播放器,就是在摄像全屏的时候,div可以突显在摄像层上,也是WeChat安卓版特有的性质。同层播放别名也称之为沉浸式播放,播放的时候看似全屏,可是已经除去了control和微信的导航栏,只留下”X”和”<“两键。最近的同层播放器只在Android(包涵微信)上生效,暂时不援救iOS。至于为何同层播放只对安卓开放,是因为安卓不可以像ISO一样局域播放,默许的全屏会使得有些界面操作被阻止,假设是全屏H5还好,不过做直播以来,诸如弹幕那样的功用就不可以完毕了,所以这时同层播放的定义就解决了那些标题。不过在测试的进度中窥见,分化版本的IOS和安卓效果略有分歧。

  8. x5-video-orientation:注解播放器援助的动向,可选值landscape 横屏,
    portraint竖屏。默许值portraint。无论是直播仍旧全屏H5一般都是竖屏播放,可是那个特性要求x5-video-player-type开启H5格局

  9. @
    x5­-video­-player­-fullscreen:全屏设置。它又八个属性值,ture和false,true支持全屏播放,false不支持全屏播放。
    骨子里,IOS
    微信浏览器是Chrome的内核,相关的质量都扶助,也是为啥X5同层播放不扶助的缘故。安卓微信浏览器是X5内核,一些属性标签比如playsinline就不支持,所以平素全屏。

  10. @
    还有个难点,在Android的微信里面,固然加上了地点的特性,还会并发前后有黑边,不能够全屏的难点。
    解决办法:给video加上object-fit:
    fill;的style属性。如果如故有黑边有可能是视频尺寸不合适。

PC端

早期是__辅助自动播放,但__近来
Safari、Chrome
 陆续修改了自动播放的政策……

3. 视频的万丈难点

在安卓下,一些浏览器如QQ浏览器和UC浏览器,系统会把视频的层级调到最高,所以一旦想在页面上出示dom元素,都会被摄像盖住,单纯的安装该dom的z-index是无用的,如图所示

皇家赌场手机版 1

化解方案:

  1. 在弹出会突显在视频上方dom的时候抛锚视频播放
  2. 将视频所在的dom的父元素的莫大设为1
  3. 处理完弹出的事件后将视频所在的父元素高度还原

  4. 视频的默许播放图标


在iOS下会有一个默许的播音图标,如图所示

皇家赌场手机版 2

在iOS都会默认展现,无法通过js控制,但是足以经过css样式将其藏匿

    video::-webkit-media-controls-start-playback-button {
            display: none;
    }
事件交互中至关首要利用的属性
  1. current提姆e:播放举行到的时间点,单位为秒
  2. duration:摄像总时长,单位为秒

Safari 浏览器

__Safari
10 后__带音频的视频和韵律默许禁止自动播放,越多音信方可参见那篇文章;

Chrome(旧版本) 下自动播放:

皇家赌场手机版 3

Safari (10后)不自动播放:

皇家赌场手机版 4

5. 视频的控制栏

在h5播放的时候,即使在video标签上安装了controls属性,则会在摄像里显示控制栏

皇家赌场手机版 5

亟待专注的是其一控制栏是系统webview自带的,无法透过css控制其样式,指出不要选用这么些特性而是自己通过dom自己成立一套控制条

督察目标
  1. 广播:start:1(首次播放)2(重放)

  2. 播放:end:1

  3. 广播暂停:pause:1

  4. 广播中止:pause:1

  5. 快进/快退:Jump:1(快进)2(快退)

  6. 指鹿为马:fail:
    1(取回进度);2(当下载时暴发错误);3(当解码时发生错误);4(不协助音频/视频)

  7. 播音等待: wait:1

  8. 播音时长:totaltime:秒(包蕴回放)

  9. 播音中止
    切实处境是移动端浏览器切换tab导致的隐蔽和用户按home键退出浏览器

    html5 提供了 Page Visibility API 来支撑监听tab切换,与之对应新增了

    document.hidden 属性,它显得页面是或不是为用户眼前看来的页面,值为 ture
    或 false
    document.visibilityState 属性, visible 表示页面被突显, hidden
    表示页面未被显示, prerender 表示页面在重复生成,用户不可知
    visibilitychange 事件,监听页面在 visible 与 hidden 之间的切换

  1. 播音时长
    起首的思路是获取到起始播放到为止播放的轩然大波差,记下时间点拔取了
    current提姆e 属性,首要完结在两方面

    playing 时记录日子点startT, pause 和 ended 和 seeked
    时记下时间点endT,endT – startT 即播放时长
    seeked 时记下时间点startT, seeking 时记下时间点endT,endT – startT
    即播放时长
    本条思路在 ios 下是接近小意思的,可是 android
    下确实更加,主要缘由是 seeking 事件的监听没了解到位,seeking
    事件触发点是用户目标跳跃到的任务,比如:摄像播放在 0
    秒点时,用户点击到了 60 秒点处,那是取到的 current提姆e 就是 60
    ,本来觉得会是 0 , ios
    下看似不是难题是因为它的全屏播放格局下,进程条是要拖拽的,无法直接点击到某个点

    于是乎,使用 timeupdate 来得到 seeking
    触发前的时间点,就可以赢获得周旋规范的播音时长了

  1. error事件
    监听 error 事件会回到 error.code 来标识错误类型:

    1 = MEDIA_ERR_ABORTED – 取回进度被用户中止
    2 = MEDIA_ERR_NETWORK – 当下载时发生错误
    3 = MEDIA_ERR_DECODE – 当解码时暴发错误
    4 = MEDIA_ERR_SRC_NOT_SUPPORTED – 不帮衬音频/视频
    取得横竖屏的信息

    1@  window.onorientationchange = function(){
          switch(window.orientation){
              case -90:
              case 90:
                  alert("横屏:" + window.orientation);
              case 0:
              case 180:
                   alert("竖屏:" + window.orientation);
              break;
          }
        }
    2@  @media (orientation: portrait) { } 横屏
        @media (orientation: landscape) { }竖屏
    3@  旋转 用css3的属性
        transform: rotate(90deg);

Chrome 浏览器

禁音的视频如故可以播放,�带声音的视频会根据__传媒加入指数__来决定是否自动播放,那怎么是媒体到场指数?官方给了然释和有关的维度:

MEI
是一个评估用户对于近来站点的媒体插足程度的指数,它取决于上面几个维度:

  • 用户在传媒上停留时间超越了 7秒以上
  • 旋律必须是展现出来,并且没有静音
  • 与 video 之间有过互动
  • 传媒的尺寸不低于 200×140.

看完后开发者的内心是那样的:

皇家赌场手机版 6

皇家赌场手机版 7

6. 视频的刷新

我们领会video暴光了play和pause方法来提供摄像的播音和刹车,可是h5没有正规的基础代谢方法,即使大家想完结视频的刷新,则要求经过js达成

var player = $('#player')[0];
player.load();
setTimeout(function () {
     player.play();
})
遭逢的有的情景
  1. 从不 <source> 元素且 src 属性为空时播放会触发 error
    事件,状态码为4
    化解:忽略 src 属性为空时的报错

  2. 广播已毕会接触暂停
    化解:申明状态变量,随着具体操作更新景况,播放状态下才会实施暂停操作,截至状态不进行

  3. 广播已毕后重放会触发 seeking 和 seeked ,一般浏览器触发五次,
    android 下uc浏览器触发数十次
    解决:同上

  4. 部分浏览器监听不到 seeking 和 seeked
    解决:在 timeupdate 里来分析揣测用户作为

  5. 局地浏览器存在数十次延续触发 seeking + seeked 的事态
    解决:时间戳 + 节流 等待最后三次

  6. seeking 和 seeked 与 timeupdate 须要确保不会同时进行
    不留余地:监听到 seeking 触发,就不再执行 timeupdate 模拟
    走过的坑:我曾考虑在播放时直接判断出是不是协理 seeking
    ,格局是广播时设置 current提姆e 为 0.01 ,然后检测 seeking
    属性,后来察觉浏览器在这样设置后的 seeking 属性值差异等

  7. 个别浏览器播放状态下不触发 seeking 和 seeked
    ,可是在重放的时候接触
    缓解:声明状态变量,随着具体操作更新情形,截至状态不监听 seeking
    触发
    å

检测是不是自动播放?

好在无论是 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
    });
}

7. 视频的全屏难点

默认控件的藏身
    *::-webkit-media-controls-enclosure {
      display:none !important;
      -webkit-appearance: none;
    }
    *::-webkit-media-controls-panel {
      display: none!important;
      -webkit-appearance: none;
    }
    *::-webkit-media-controls-panel-container {
      display: none!important;
      -webkit-appearance: none;
    }
    *::--webkit-media-controls-play-button {
      display: none!important;
      -webkit-appearance: none;
    }
    *::-webkit-media-controls-start-playback-button {
      display: none!important;
      -webkit-appearance: none;
    }
    *::-webkit-media-controls {
    display: none!important;
    -webkit-appearance: none;
    }
  • 使用video.js来处理video标签
    参考video.js的文档,引入video.js
    实例

    var player = videojs('example_video_1');
    

videojs是大局函数,它可以收起多个参数(id,options,onready)第多少个是回掉函数

  • options

有两种办法得以变动videojs的表现:

  1. 由此添加video标签的data-setup属性:

 <video data-setup='{"autoplay":"true",.....}'

  var player = videojs('example_video_1',{autoplay:true,....}) , 

向来传入options

是因为第一种格局是写在html标签中,通过JSON.parse解析,质量低,还易于报错。个人更倾向于艺术2.

此地有恢宏有关options的布署参数:http://docs.videojs.com/tutorial-options.html

思考

1)全屏api

h5揭示了一个webkitRequestFullScreen方法,可以让每个dom都呼吁全屏,当然video标签也可以运用。

不过在测试中发觉,一些安卓机不协理该属性,如魅蓝手机,所以须要在调用的时候进行一下断定

var player = $('#player')[0];if (player.webkitSupportsFullscreen) {
    player.webkitEnterFullscreen();
} else {
   player.webkitRequestFullScreen();
}
常用多少个项有:
autoplay :  true/false   
//播放器准备好之后,是否自动播放 【默认false】If true/present as an attribute, begins playback when the player is ready

controls : true/false 
//是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮

height: 300px
//视频容器的高度,字符串或数字 单位像素  比如: height:300 or height:'300px'

width: 300px
//视频容器的宽度, 字符串或数字 单位像素

loop : true/false //视频播放结束后,是否循环播放

muted : true/false //是否静音

poster: 播放前显示的视频画面,播放开始之后自动移除。通常传入一个URL

preload:auto//预加载
   auto //自动
   metadata //元数据信息 ,比如视频长度,尺寸等
   none  //不预加载任何数据,直到用户开始播放才开始下载

children: Array | Object  
//可选子组件  从基础的Component组件继承而来的子组件,数组中的顺序将影响组件的创建顺序哦。

// 下面的方式只使用bigPlayButton和controlBar两个子组件
videojs('my-player', {
 children: [
     'bigPlayButton',
     'controlBar'
     ]
});

sources:Array //资源文件

  videojs('my-player', {
      sources: [{
          src: '//path/to/video.mp4',
          type: 'video/mp4'
          }, {
          src: '//path/to/video.webm',
          type: 'video/webm'
        }]
    });

等价于html中的格局:

<video ...>
    <source src="//path/to/video.mp4" type="video/mp4">
    <source src="//path/to/video.webm" type="video/webm">
</video>

techOrder: Array //使用哪种技术播放,可选值有'html5','flash'  默认为['html5'], 注意: 在v6.0.0 及以上的版本中,默认不包含flash的使用代码。如果要使用flash播放的,需要手动引入flash相关逻辑的代码。且需要指定swf文件的路径。
// 全局指定swf文件的位置
videojs.options.flash.swf = 'video-js.swf'
    // Create a player.
    var player = videojs('example_video_1',{
        teachOrder:['flash']
        },function(){
          console.log(this)
        }
     });

缘何早期禁止视频自动播放?

because it can be disruptive, data-hungry and many users don’t like
it.
(因为它是破坏性的、要求多量流量同时广大用户不希罕它)

2)系统接管播放

俺们下面说道调用h5的webkitRequestFullScreen方法来进入视频的全屏,那么这么些方法会使浏览器完全接管摄像播放,如图所示

皇家赌场手机版 8

那种接管的后果是此时的大家是一向不章程控制视频的播放,也不曾艺术在下边浮动大家的dom元素,如弹幕,礼物这一个,会完全被摄像盖在底下,所以大家的靶子即是解决那种系统接管的题材

方法
autoplay
buffered
bufferedEnd
bufferedPercent
cancelFullScreen deprecated
controls
currentSrc
currentTime
currentType
dispose
duration
ended
error
exitFullscreen
init
isFullScreen deprecated
isFullscreen
language
load
loop
muted
pause
paused
play
playbackRate
poster
preload
remainingTime
requestFullScreen deprecated
requestFullscreen
seeking
src
volume
addChild inherited
addClass inherited
buildCSSClass inherited
children inherited
contentEl inherited
createEl inherited
dimensions inherited
el inherited
enableTouchActivity inherited
getChild inherited
getChildById inherited
hasClass inherited
height inherited
hide inherited
id inherited
initChildren inherited
name inherited
off inherited
on inherited
one inherited
options inherited
player inherited
ready inherited
removeChild inherited
removeClass inherited
show inherited
trigger inherited
triggerReady inherited
width inherited

为什么又允许自动播放?

  • 稍加开发者使用任何措施如 canvas、gif
    等来落到实处视频自动播放的出力,不过质量上、流量消耗上都远不如视频播放;
  • 现在流量便宜了、手机硬件越来越好了;
  • 用户可以透过安装来禁止自动播放(开启省流量方式等);

3)使用伪全屏(样式全屏)

体制全屏的为主是设置video标签的宽高,使其撑满整个webview,看上去像全屏一样

可是因为视频一般都是16:9的宽高比,所以在竖屏景观下不能很好的成就铺满整整屏幕

皇家赌场手机版 9

而一般用户进入页面基本都是竖屏,所以大家即将考虑怎么让用户在竖屏点击全屏按钮时,能体会到像终端app一样自动进入横屏全屏的体验,上面有三种方案

1.在用户点击全屏时候,通过css3属性旋转显示器

通过css的transform,我们得以把dom元素旋转体现

通过-webkit-transform:
rotate(90deg)并安装video的惊人为眼前webview的宽窄,video的宽窄为当前webview的冲天来贯彻旋转全屏.

那种方式的显得没有太大难点,但因为是透过css控制的页面dom展现,对于原生的上空不可能很好的控制,如系统的键盘

皇家赌场手机版 10

在拉起键盘输入弹幕的时候,键盘不受控制如故竖屏彰显了
设若页面不涉及与原生组件的相互,那么那种方案是一种很管用且包容性比较好的方案

2.用户在点击全屏时,通过js api来控制webview旋转横屏

在手Q里,我们和极端的同学同盟添加了控制webview横竖屏的接口
在用户点击全屏的时候,先判断当前是或不是横屏

    /**
     * 是否横屏
     */
    function isHorizontal() {       
        if (window.orientation != undefined) {        
            return (window.orientation == 90 || window.orientation == -90);
        } else {         
            return window.innerWidth > window.innerHeight;
        }
    }

//设置webview为横竖屏
 mqq.ui.setWebViewBehavior({         
      orientation: 0 //0是竖屏,1是横屏
 });

只借使竖屏则强制webview旋转进入横屏,同时监听页面的resize方法,页面横竖屏变化的时候会触发那些措施,在这些艺术里再动态的调动video的宽高来铺满整个显示屏

皇家赌场手机版 11

注:

在此之前大家发现x5插入了一段js来胁制摄像的全屏的风波

皇家赌场手机版 12

满意条件的video标签全屏时都会被X5接管,此外调用webkitEnterFullscreen方法时,X5也会接管播放器。

只要发现在x5内核下不能利用伪全屏而被浏览器接管,可以问问下x5同事为您的域名开启白名单,不接管你域名下的视频播放

事件
durationchange
ended
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause
play
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited

干什么 IOS 下微信和钉钉可以自动播放带声音的摄像?

真正发现在微信常常能来看自动播放的H5,然则作者自己写的装置了
autoplay、playsInline
的摄像播放样例,在微信上如故不可能自动播放,而在钉钉上却足以自动播放

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

经过查询资料,IOS WebAPP 开发都是根据 IOS
提供的浏览器内核进行开发的
,所以在 WebAPP 的 webview
中得以修改自动播放的表现,钉钉显著是支撑自动播放,微信则是明令禁止自动播放,可是提供了安放事件来支撑自动播放:

微信下通过 WeixinJSBridgeReady 事件开展自动播放:

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

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

总结:

在经历过各样优化和调整后,大家可以在h5直播页做到看直播,看弹幕,发弹幕,发送礼物,表情,查看排行等种种效用,再合作上手Q里的隐藏titlebar的_wv=16777217,能够兑现全屏播放效果,做到了比美原生播放的感受。

现在的h5的播报还有不少的显现和包容性的难题,希望那份指南可以帮你在遭受同样的坑时能赶紧爬出来,并优化你的h5播放体验,吸引到更多的用户
: D


更加多精粹内容欢迎关心腾讯 Bugly的微信公众账号:

皇家赌场手机版 13

腾讯
Bugly是一款专为移动开发者营造的质量监控工具,协助开发者飞快,便捷的定位线上运用崩溃的气象以及解决方案。智能合并功用支持开发同学把每一天上报的数千条
Crash
按照根因合并分类,天天早报会列出影响用户数最多的倒台,精准定位功用扶助开发同学定位到出难点的代码行,实时反馈可以在文告后火速的询问应用的身分景况,适配最新的
iOS, Android 官方操作系统,鹅厂的工程师都在动用,快来出席我们啊!

组件
  Player
      PosterImage
      TextTrackDisplay
      LoadingSpinner
      BigPlayButton
      ControlBar
          PlayToggle
          FullscreenToggle
          CurrentTimeDisplay
          TimeDivider
          DurationDisplay
          RemainingTimeDisplay
          ProgressControl
              SeekBar
                LoadProgressBar
                PlayProgressBar
                SeekHandle
          VolumeControl
              VolumeBar
                  VolumeLevel
                  VolumeHandle
          MuteToggle


//eg:移除静音按钮
var player = videojs(‘video-id‘, {
  controlBar: {
    muteToggle: false
  }
});

此情此景二:全屏处理

在移动端浏览器,  video 在用户点击播放照旧通过API video.play()
触发播放时,会强制以全屏置顶的款型展开播报,设计的初衷可能是因为全屏能提供更好的用户体验,但有时开发者希望能友好主宰是或不是全屏从而完成任何急需。

自定义组件(低版本不帮忙)
    // Get the Component base class from Video.js
    // 从Videojs中获取一个基础组件
    var Component = videojs.getComponent('Component');

    // The videojs.extend function is used to assist with inheritance. In
    // an ES6 environment, `class TitleBar extends Component` would work
    // identically.
    // videojs.extend方法用来实现继承,等同于ES6环境中的class titleBar extends Component用法
    var TitleBar = videojs.extend(Component, {

    // The constructor of a component receives two arguments: the
    // player it will be associated with and an object of options.
    // 这个构造函数接收两个参数:
    // player将被用来关联options中的参数
    constructor: function(player, options) {

    // It is important to invoke the superclass before anything else,
    // to get all the features of components out of the box!
    // 在做其它事之前先调用父类的构造函数是很重要的,
    // 这样可以使父组件的所有特性在子组件中开箱即用。
    Component.apply(this, arguments);

    // If a `text` option was passed in, update the text content of
    // the component.
    // 如果在options中传了text属性,那么更新这个组件的文字显示
    if (options.text) {
      this.updateTextContent(options.text);
    }
    },

    // The `createEl` function of a component creates its DOM element.
    // 创建一个DOM元素
    createEl: function() {
    return videojs.dom.createEl('div', {

      // Prefixing classes of elements within a player with "vjs-"
      // is a convention used in Video.js.
      //给元素加vjs-开头的样式名,是videojs内置样式约定俗成的做法
      className: 'vjs-title-bar'
    });
    },

    // This function could be called at any time to update the text
    // contents of the component.
    // 这个方法可以在任何需要更新这个组件内容的时候调用
    updateTextContent: function(text) {

    // If no text was provided, default to "Text Unknown"
    // 如果options中没有提供text属性,默认显示Text Unknow
    if (typeof text !== 'string') {
      text = 'Text Unknown';
    }

    // Use Video.js utility DOM methods to manipulate the content
    // of the component's element.
    // 使用Video.js提供的DOM方法来操作组件元素
    videojs.dom.emptyEl(this.el());
    videojs.dom.appendContent(this.el(), text);
    }
    });

    // Register the component with Video.js, so it can be used in players.
    // 在videojs中注册这个组件,才可以使用哦.
    videojs.registerComponent('TitleBar', TitleBar);


    //使用组件
    player.addChild('TitleBar', {text: '这里是标题'});

我要好在github上的总计以及部分demo

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"
  />

那么对于其余基本的浏览器要怎么处理呢?这么些时候要询问下方今市面上存在的浏览器有哪些。

参考资料

原生video
videojs
文档
videojs
github
html5–移动端视频video的android包容,去除播放控件、全屏等
举手投足端手机网页强制横屏或全屏模仿横评的js和css3方法
videojs
使用以及开创组件
videojs的使用 方法 事件
比较全
video.js–很赞的H5摄像播放库
video.js
的文档

playsinline 兼容性

先是要知道全世界近期七个浏览器内核:

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

皇家赌场手机版 14

其中:

  • __Trident __在活动端首要为WP7种类内置浏览器
  • Presto 在颇具联网设备上都利用,移动终端上根本为 Opera
    Mobile、OperaMini、欧朋浏览器以及欧朋HD Beta版
  • __Webkit__根本的适用范围则相比广阔,Android原生浏览器、苹果的Safari、谷歌(谷歌)的Chrome(Android4.0施用)都是基于Webkit开源内核开发的。

而国内大规模的PC浏览器如__UC浏览器、QQ浏览器、百度手机浏览器、360海东浏览器、谷歌(Google)浏览器、搜狗手机浏览器、猎豹浏览器__以及__举手投足端的UC、QQ、百度等手机浏览器__都是基于Webkit修改回复的水源,本质上大家得以认为市场上移步端用户使用的差不离都是webkit内核或者根据webkit 内核做修改的浏览器,所以 playsinline 的包容性分外好!

场合三:播放控制

video
元素有提供七个表现事件供开发者控制视频播放,包容性比较好的有 onended 、
__ontimeupdate、onplay、onplaying ,__稍许事件在差距浏览器不相同装备上的的变现意况并不同,

例如:ios
下监听’canplay‘(是或不是已缓冲了丰裕的数量可以流畅播放),当加载时是不会触发的,即便__preload=”auto”
__也没用,但在 pc 的 Chrome 调试器下,是会在加载阶段就接触。ios
需求播放后才会触发。

Chrome 模拟器

加载成功:

皇家赌场手机版 15

点击播放:

皇家赌场手机版 16

MacOS Safari

加载成功:

皇家赌场手机版 17

点击播放

皇家赌场手机版 18

IOS Safari

加载成功:

皇家赌场手机版 19

点击播放:

皇家赌场手机版 20

有些事变在差距连串、设备、浏览器下显得的特性不平等,使用的时候需谨慎。

场馆四:隐藏播放控件

controls 加上那一个特性,Gecko
会提供用户控制,允许用户控制视频的广播,蕴涵音量,跨帧,暂停/苏醒播放。

controls
属性规定浏览器应该为视频提供播放控件,反之则藏身播放控件,那么开发者可以自定义自己的播放控件。隐藏播放控件在
PC 端和 IOS
移动端包容性非凡,而在__安卓移动端并不援救隐藏控件__,然而还可以通过一些方式来落到实处。

黑科学技术法

正如黑科学技术的主意是推广视频,把控件条移到视野之外,从而达成隐蔽的机能!其实就是让摄像元素比父容器还大,那样底部的支配条就会在父容器外面,然后父容器设置为:overflow:hidden, 达成隐藏播放控件的方法!
缺点是摄像会被推广,需求超前留好空白供放大用。

皇家赌场手机版 21

微信浏览器

腾讯的android团队的x5内核团队放手了视频播放的限制,视频不肯定调用它们相当备受诟病的摄像播放器了,利用__x5-video-player-type=”h5″ 品质隐藏控件元素,同时__视频不再置顶,允许其余因素浮动在顶层

总结

询问了摄像播放的通用场景及大面积的坑后,我们如果__本着不一样的场所提供相应的兜底方案__就能进步用户体验效果。例如移动端自动播放的H5
页面,可以因而带领用户举行点击或者滑动来直接触发视频播放是最保守的做法,no
bug!更好的方案是默许自动播放并捕捉禁止播放的景况,再引导用户展开交互完毕摄像播放。

动用 video
举办视频播放早期因为涉及到质量消耗大、流量消耗多以及处于用户体验等的考虑,在活动端被界定得很要紧,不过随起先机特性的擢升、流量时代的到来、更强地气象须要,稳步放松了限制,而PC端则日益从“宽松世代”走向“紧缩世代”,两者都有出于让用户有更好地体会的目的而不断更新自己的方针,将来说不定会走向一统,开发者就可以从尾部包容适配中释放出来,从而有越多沙参力来做更上层的做事。

参考

  • auto-play-policy-changes-for-macos
  • Chrome
    auto-play
  • auto-play-is-bad-for-users
  • 缘何很少有浏览器接纳Gecko内核?
  • 浏览器内核

 

1 赞 3 收藏
评论

皇家赌场手机版 22

Leave a Comment.