Detailed explanation of html5 video mobile terminal

This article mainly introduces a brief discussion of html5 video mobile terminal filling in pitfalls. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor to take a look, I hope it can help everyone.

This article introduces the html5 video mobile terminal filling pitfalls and shares it with everyone. The details are as follows:

<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

Set autoplay Attribute

<video autoplay></video>

In mobile browsers

But in many mobile browsers, the user's actual operation is required (touchend, click, doubleclick or Keydown event and other standard events) trigger calling video.play() to automatically play audio and video.

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

In WeChat

you can also trigger video.play() in wx.ready()

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

Inline play

Set the attribute webkit-playsinline playsinline

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

When playing a video in iOS Safari and some Android browsers, the video cannot be played in the h5 page, and the system will automatically take over the video.

If you need to play a video in an h5 page, you need to add webkit-playsinline to the video tag. After iOS10, you need to add playsinline. It is recommended to add these two attributes at the same time. At the same time, the app needs to support this mode

webview.allowsInlineMediaPlayback = YES;

Both ios mobile QQ and WeChat support this mode, but android WeChat is down

android WeChat

android WeChat’s built-in browser uses the Tencent X5 kernel and does not follow the X5web standard. One of them is forced full screen video. After the video is played, QQ's own video recommendations will appear. It is said that it has a whitelist, and the video resources in the whitelist will not be full screen. But Tencent can no longer add to the whitelist. Urinary, no solution. . . . . .

There is currently a solution, which is to use h5 canvas to play video

canvas to play video

The pitfalls encountered when using canvas: video must be added x5-video-player-type="h5" attribute, otherwise, the mobile terminal will freeze and cannot play the video. Personally, I think it is because the video is taken over.

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

  canvas.addEventListener(&#39;click&#39;, function () {
    video.play()
  })

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

  video.addEventListener(&#39;pause&#39;, function () {
      window.clearInterval(time);
  }, false);

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

Finally, I found that although canvas is used to play videos, Android WeChat can block recommended videos after the full-screen video has been played. But there is no way to disable the full-screen problem during video playback. Still get the evil white list. Make complaints. . . . . . . . . . . . . . . .

What’s even more annoying is that I haven’t found a way to trigger js to exit full screen.

ios black screen problem

ios When playing a video, a black screen will appear briefly and then display normally.

Solution:

Cover a p on top of the video and fill it with a picture to create the illusion of loading before playback. Then listen to the event timeupdate, and remove this "p block" when there is a picture in the video playback

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

Media methods and properties

HTMLVideoElement and HTMLAudioElement are both inherited from 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"); //音量改变

Related recommendations:

HTML5 video Methods to achieve browser compatibility

Summary of mobile video video playback problems case

Brief description of the parameters and attributes of the