Question

我正在尝试在HTML网站中以预加载器的形式显示7秒的视频。这是代码

它适用于Mozilla和Edge。但不适用于Chrome和移动浏览器。

<div class="modal fade video-container" id="myModal" role="dialog">
        <div class="">
           <video id="myVideo" src="media/2.mp4" autoplay></video>
        </div>
 </div>

JS

$("#myModal").modal()
$(".container").hide();
document.getElementById('myVideo').addEventListener('ended', closeModal,     false);

function closeModal() {
    $(".container").show();
    $('#myModal').modal('hide');
}

CSS

.video-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color:#4d4d4d;
  height: 100%; 
  overflow: hidden;
}
.video-container video {
  /* Make video wide and tall */
  min-width: 80%; 
  min-height: 80%; 

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: 100%;
  height: 100%;

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

https://jsfiddle.net/akshayrox123/or6bqzw9/2/

如何使其在所有浏览器上都能正常工作？谎言视频应该在每次有人登陆网站时加载，然后显示实际网站！

如何将视频显示为网站的预加载器？

0 个答案: