video标签在移动端的兼容处理

移动端的视频兼容处理

  //其他移动端浏览器只能让用户自己触发
  $(window).on('touchstart', function(){
    $("#video").trigger('play');
  });
  // 兼容微信(微信可以自动播放)
  document.addEventListener("WeixinJSBridgeReady", function () {
    $("#video").trigger('play');
  }, false);

监听video的播放、暂停和结束事件

let video = document.getElementById("video");
// 开始播放后隐藏播放图标
  video.addEventListener("play",function(){  
    $('.playbtn').hide();
  });
// 暂停时显示播放图标
  video.addEventListener("pause",function(){  
    $('.playbtn').show();
  });
// 播放结束后显示封面图和播放图标
  video.addEventListener("ended",function(){
    $('.coverimg').show();
    $('#video').hide();
    $('.playbtn').show();
  });