html5 弹窗盖不住 video 标签播放的 mp4 视频

时间：

分类：

html5

字数：

947 字

时长：

大约需要 4 分钟

次数：

0 人阅读

移动端部分浏览器（如：小米自带浏览器）存在 mp4 视频播放问题：如果视频正在播放，这时再弹出自定义弹窗，会发现视频覆盖在弹窗上面，无论 z-index 设置多大都无效！！

跟踪其他视频站点（如：百度、腾讯、爱奇艺）发现，他们的弹窗并不会被视频遮挡，研究代码之后发现，他们的视频地址都是 blob:http://192.168.0.1/2d307a8e-f287-494e-8e4d-0eba1bab0b63 这类地址。

一番折腾之后，得出结果：

如果 <video> 标签直接播放 mp4 的视频链接，部分浏览器会将其置为最顶层播放，任何弹窗都将无法覆盖视频标签，如果将 mp4 视频转为 blob 地址，这时候浏览器就将正常播放，弹窗也能正常覆盖视频。

处理问题

找到问题原因处理即可：将 mp4 地址转为 blob 地址播放。

核心代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function getBlob(cb) {
  //创建XMLHttpRequest对象
  var xhr = new XMLHttpRequest();
  //配置请求方式、请求地址以及是否同步
  xhr.open('POST', './test.mp4', true);
  //设置请求结果类型为blob
  xhr.responseType = 'blob';
  //请求成功回调函数
  xhr.onload = function(e) {
      if (this.status == 200) {//请求成功
          //获取blob对象
          var blob = this.response;
          //获取blob对象地址，并把值赋给容器
          cb(URL.createObjectURL(blob));
      }
  };
  xhr.send();
}

注意：本示例代码中 ./test.mp4 为相对地址，ajax请求不允许跨域，如果需要使用cdn等类似三方地址，需要配置允许跨域请求！！！

完整测试代码：

由于视频版权问题，本实例中 test.mp4 将不再此贴出，可自行找 mp4 视频测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>

<head>
  <title>视频测试</title>
  <meta charset="utf-8">
  <meta name="viewport"
    content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1,viewport-fit=cover" />
  <meta name="screen-orientation" content="portrait">
  <meta name="x5-orientation" content="portrait">
  <meta name="format-detection" content="telephone=no, email=no">
  <meta name="apple-mobile-web-app-status-bar-style" content="white" />
  <meta name="apple-mobile-web-app-capable" content="no">
  <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.15.0/vconsole.min.js"></script>
  <script>
    new VConsole()
  </script>
</head>

<body>
<video
  src=""
  controls="controls"
  playsinline="true"
  webkit-playsinline="true"
  x-webkit-airplay="allow"
  disablepictureinpicture="true"
  x5-video-orientation="landscape"
  x5-video-player-type="h5-page"
  t7-video-player-type="h5"
  controlslist="nodownload nofullscreen noremoteplayback"
  class="test-video"
  style="width: 100%;object-fit: cover; object-position: center center;">您的浏览器不支持video标签。</video>
<div id="test-play-blob" style="font-size: 13px; margin: 10px 0;">播放Blob地址</div>
<div id="test-play-mp4" style="font-size: 13px; margin: 10px 0;">播放mp4地址</div>
<div id="test-pop" style="font-size: 13px; margin: 10px 0;">弹窗</div>
<script>
  function getBlob(cb) {
    //创建XMLHttpRequest对象
    var xhr = new XMLHttpRequest();
        //配置请求方式、请求地址以及是否同步
        xhr.open('POST', './test.mp4', true);
        //设置请求结果类型为blob
        xhr.responseType = 'blob';
        //请求成功回调函数
        xhr.onload = function(e) {
            if (this.status == 200) {//请求成功
                //获取blob对象
                var blob = this.response;
                //获取blob对象地址，并把值赋给容器
                cb(URL.createObjectURL(blob));
            }
        };
        xhr.send();
  }
  document.querySelector('#test-play-blob').addEventListener('click', () => {
    const video = document.querySelector('.test-video')
    getBlob((u) => {
      video.src = (u);
      video.play()
    })
  })
  document.querySelector('#test-play-mp4').addEventListener('click', () => {
    const video = document.querySelector('.test-video')
    video.src = './test.mp4';
    video.play()
  })
  document.querySelector('#test-pop').addEventListener('click', () => {
    const mask = document.createElement('div')
    mask.style = `position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.65)`
    document.body.appendChild(mask)
    mask.addEventListener('click', () => {
      document.body.removeChild(mask)
    })
  })
</script>
</body>

</html>
本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2023-01-10/html5-video-pop/

如果您觉得文章不错，可以点击文章中的广告支持一下！