记录一次video标签在移动端浏览器上下滑动出现小窗或置顶的问题-江城时光穗海拾珍

记录一次video标签在移动端浏览器上下滑动出现小窗或置顶的问题

发布时间：2024-09-29更新时间：2024-11-10阅读量：380原创

在做一次移动端适配的问题上。使用swiper做全屏滑动的效果。其中第二屏是是一个mp4格式的视频。但是在pc端浏览器上是可以做到全屏整页滑动。但是在移动端安卓浏览器就会出现视频被置顶或出现小窗口的问题。

排查过程

刚开始遇到这个情况一脸懵逼，这不是移动端浏览器劫持video标签做的处理吗？网上有很多资料是配置video标签属性

例如：

html 复制代码

   <video
             webkit-playsinline="true"
             x-webkit-airplay="true"
             x5-playsinline="true"
             playsinline="playsInline"
             controls=""
             x5-video-orientation="portraint"
             loop="loop"
             webkit-playsinline=""
             playsinline
             x5-playsinline
             t7-video-player-type="inline"
             x5-video-player-type="h5-page"
             x-webkit-airplay="allow"
             disablePictureInPicture
         >

但是只能解决部分问题。很多浏览器例如小米和夸克浏览器依然不生效。

解决方案

但是设想2种方案

方案一通过canvas绘制视频

原理：通过video播放视频，再隐藏video标签。例如canvas绘制视频。
代码大概如下

js 复制代码

    const video = document.createElement('video');
    video.src = './xxx.mp4';
    video.autoplay = true
    video.muted = true;
    video.style.width = '100%';
    video.style.paddingTop = '50%';
    video.style.display='none';
    document.querySelector('.video-container').appendChild(video);
    const canvas = document.getElementById('mcanvas');
    const width = document.documentElement.clientWidth||document.body.clientWidth
    const height = document.documentElement.clientHeight||document.body.clientHeight
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');
    const cvsWidth = width;
    const cvsHeight =width * 0.75;
    canvas.style.width = width + 'px';
    canvas.style.height = height + 'px';
    const cvsPosHeight = (height/2)-(cvsHeight/2)
    video.play();
    function videoRender() {
        ctx.drawImage(video, 0, 0, cvsWidth, cvsHeight, 0, cvsPosHeight, cvsWidth, cvsHeight) 
        ctx.clearRect(0, 0, cvsWidth, cvsHeight);
        window.requestAnimationFrame(videoRender);
      
    }
    videoRender();

方案二：先不配置controlls。再通过js动态的配置。（推荐）

后来发现不配置controls就不会出现小窗效果。