Jin的博客

HTML5 Video 踩坑记录

2018/01/10 HTML 共 2620 字，约 8 分钟

视频的默认播放图标

视频会存在系统级别的 play 按钮，解决方案：

video::-webkit-media-controls-play-button,
video::-webkit-media-controls-start-playback-button {
    opacity: 0;
    pointer-events: none;
    width: 5px;
}

视频的控制栏

注意不要添加 controls 属性

<video controls></video>

内联播放问题

默认的 video 标签执行 play 后会直接进入全屏播放。

此时需要添加 playsinline 属性

<video playsinline webkit-playsinline></video>

IOS 10 以下的 iphone 不支持，作为 workaround，加入了 iphone-inline-video插件。

自动播放问题

  • 通过 autoplay 属性
<video autoplay></video>

但是在很多浏览器里，如 mobile 端并不支持这个属性，

  • 在 iOS 下必须给 webview 设置
self.wView.allowsInlineMediaPlayback = YES;
self.wView.mediaPlaybackRequiresUserAction = NO;

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

  • 假浮层调用 video.play()方法

总体不推荐，因为仍旧存在兼容问题

视频层级问题

在安卓下，一些浏览器，系统会把视频的层级调到最高，所以如果想在页面上显示 dom 元素，都会被视频盖住，单纯的设置该 dom 的 z-index 是无效的

解决步骤：

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

视频 play/pause promise 报错

ERROR MSG: Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().
  • DON’T
<video id="video" preload="none" src="https://example.com/file.mp4"></video>

<script>
  video.play(); // <-- This is asynchronous!
  video.pause();
</script>
  • DO
<video id="video" preload="none" src="https://example.com/file.mp4"></video>

<script>
  // Show loading animation.
  var playPromise = video.play();

  if (playPromise !== undefined) {
    playPromise.then(_ => {
      // Automatic playback started!
      // Show playing UI.
      // We can now safely pause video...
      video.pause();
    })
    .catch(error => {
      // Auto-play was prevented
      // Show paused UI.
    });
  }
</script>

视频的全屏 api 问题

  • enter
function enterFullScreen(wrap, vdo) {
    if (wrap.webkitEnterFullScreen) {
        wrap.webkitEnterFullScreen();
    } else if (wrap.requestFullscreen) {
        wrap.requestFullscreen();
    } else if (wrap.msRequestFullscreen) {
        wrap.msRequestFullscreen();
    } else if (wrap.mozRequestFullScreen) {
        wrap.mozRequestFullScreen();
    } else if (wrap.webkitRequestFullscreen) {
        wrap.webkitRequestFullscreen();
    } else if (vdo.requestFullscreen) {
        vdo.requestFullscreen();
    } else if (vdo.webkitEnterFullScreen) {
        vdo.webkitEnterFullScreen();
    }
}
  • exit
function exitFullscreen(wrap, vdo) {
    if (wrap.webkitExitFullscreen) {
        wrap.webkitExitFullscreen();
    } else if (wrap.exitFullscreen) {
        wrap.exitFullscreen();
    } else if (wrap.msExitFullscreen) {
        wrap.msExitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    } else if (wrap.mozCancelFullScreen) {
        wrap.mozCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    } else if (document.cancelFullScreen) {
        document.cancelFullScreen();
    } else if (wrap.webkitCancelFullScreen) {
        wrap.webkitCancelFullScreen();
    } else if (vdo.exitFullscreen) {
        vdo.exitFullscreen();
    } else if (vdo.webkitExitFullscreen) {
        vdo.webkitExitFullscreen();
    }
}

文档信息

Search

    Table of Contents