javascript - 关于vedio播放适配问题

问题描述

问 题

怎么让vedio播放在设定的div里面，

我现在遇到的问题是：vedio在不同的设备有不同的播放效果，有的是全屏，有的不是全屏
这个怎么解决，怎么让vedio播放在设定的div里面？

解决方案

• 首先，视频小窗播放。在安卓手机中，qq浏览器和微信里 肯定会自动全屏 。而且不加限制 会出现四周黑边。

• 苹果手机可以通过添加标签 容许小窗

<video
    id="video1" 
    src=""
    preload="auto"
    webkit-playsinline
    playsinline 

    x-webkit-airplay="allow" 
    x5-video-player-type="h5"  
    x5-video-player-fullscreen="true"
    x5-video-orientation="portrait"
    style="object-fit:fill">

  </video>

• 黑边的解决方法

// 原理 通过监听 是否进入全屏播放 更改video大小
//进入全屏
video.addEventListener("x5videoenterfullscreen", function(){
  that.cover = false;
  window.onresize = function(){
    video.style.width = window.innerWidth + "px";
    video.style.height = window.innerHeight + "px";
  }
})

//退出全屏
video.addEventListener("x5videoexitfullscreen", function(){
  window.onresize = function(){
    video.style.width = 4.33 + "rem";
    video.style.height = 7.69 + "rem";
  }
  that.cover = true;
})

---

是video播放小窗的时候 安卓自动全屏问题吗 （qq和微信里面）

这篇关于javascript - 关于vedio播放适配问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！