关于vedio播放适配问题

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

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

阅读 2.1k
2 个回答
  • 首先,视频小窗播放。在安卓手机中,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和微信里面)

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题