HTML5 视频全屏未填充在移动视图上的 android 浏览器上

Posted 2023-05-07

【中文标题】HTML5 视频全屏未填充在移动视图上的 android 浏览器上

【英文标题】：HTML5 video full screen not populate on android browser on mobile view

【发布时间】：2021-04-01 05:18:42

【问题描述】：

我正在尝试在移动浏览器上全屏打开视频。 视频显示得很好，但是当我点击视频上的“全屏”按钮时，只播放声音，没有显示视频和控件。

谁能帮帮我？

您可以在下面找到我的 html 代码：

<div class = "container">
<div class = "row">
  <div class = "col-md-12">
    <p class="new-txt-styl-mob">Video Title</p>
    <video class = "ved-sttng-mob" controls id = "control1" src = "video1.mp4" type="video/mp4" >
  </div>
 </div>
</div>

这是我的 javascript 代码：

var myVideo;
window.onload = function()

  myVideo = document.getElementById("control1");
  myVideo.load();
  myVideo.addEventListener("webkitfullscreenchange", setFullScreenMode);


function setFullScreenMode()

  if(myVideo.requestFullscreen) 
    myVideo.requestFullscreen();
   else if (myVideo.webkitRequestFullscreen) 
    myVideo.webkitRequestFullscreen();
   else if (myVideo.msRequestFullscreen) 
    myVideo.msRequestFullscreen();
   else if (myVideo.mozRequestFullScreen) 
    myVideo.mozRequestFullScreen();
  

最后，我的 CSS 代码：

.ved-sttng-mob 
   width: 100%;
   height: auto;


.ved-sttng-mob:-webkit-full-screen 
   width: 100%;
   height: auto;

【参考方案1】：

你可以尝试像这样使用allowfullscreen

<video class = "ved-sttng-mob" controls id = "control1" src = "video1.mp4" type="video/mp4" allowfullcreen="true">

【讨论】：

我试过了，但我在移动浏览器而不是网络浏览器上遇到问题