时间戳

首页 > 解决方案 > HTML5 视频全屏未填充在移动视图的 android 浏览器上

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

问题描述

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

谁能帮帮我？

您可以在下面找到我的 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;
}

标签： javascripthtmljquerycsshtml5-video

解决方案

您可以尝试像这样使用allowfullscreen

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

推荐阅读