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();
  });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容