Question

我试图以响应方式打开index.html时自动播放背景视频（宽高比为16/9）。另外，我希望用户在单击视频时可以全屏播放视频。最后，我想添加自定义控件以暂停和取消静音视频。如您所料，这真是一项艰巨的工作。

尽管还有很多事情，但我设法走得很远。到目前为止，这就是我所拥有的：为了获得取决于设备的响应行为，我仅使用CSS即可将容器显示为媒体屏幕大小。我正在使用Javascript通过调用Java脚本来暂停/播放和静音/取消静音，并且效果很好。另外，在桌面尺寸下，当我单击视频时，我设法以全屏显示视频。实际上，桌面大小已经完成，我非常喜欢它。另一方面，移动版本仍然是一场灾难。我设法在iPhone上自动播放了视频（没想到会这么难），而且我仍然不知道在Android设备上的效果。我仍然没有触摸过“桌子”设备。所以我现在想改善的是：

当我点击视频时，移动版本无法全屏显示，我也不明白为什么。
该视频在移动设备上效果不好，它覆盖了屏幕的一部分。我希望视频在纵向模式下显示移动设备中的大多数高度，而在横向模式下显示与桌面版本中的高度相同。目前这些都没有发生。
由于纵横比为16/9，我不确定以纵向模式显示此视频的最佳方法是什么。也许我会裁剪视频，但是我不介意视频缩放到占据视频的全部（或大部分）高度，并且视频的左右两侧不可见。但是，我不确定如何使用CSS完成此操作。
当我将手机置于横向模式时，它可以执行平板电脑的代码（this is the content for tablet被打印），但我不确定这是否是预期的行为。视频一直在播放，但是对齐是一场灾难。

我的CSS代码如下：

<style>

.myVideo {
  position: fixed;
  top: 10px;
  botom: 200px;
  right: 0;
  min-width: 100%; 
  min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 5px 10px;
}

.myBtn {
  width: 50px;
  padding: 5px 10px;
  border: 1px solid #818181;
  font-size: 18px;
  background: #000;
  color:#818181;
  cursor: pointer;
  margin:5px;   
}

.myBtn:hover {
  background: #ddd;
  color: black;
}

/* for the video*/
.fullscreen-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
}

.fullscreen-bg__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    height: 300%;
    top: -100%;
  }
}

@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: 300%;
    left: -100%;
  }
}

@media (max-width: 767px) {
  .fullscreen-bg {
    background: url('../img/videoframe.jpg') center center / cover no-repeat;
  }

  .fullscreen-bg__video {
    display: none;
  }
}

@media all and (min-width: 959px) {

    .content .x700{display:block;}
    .content .x490{display:none;}
    .content .x290{display:none;}

}

@media all and (max-width: 720px) {

    .content .x700{display:none;}
    .content .x490{display:block;}
    .content .x290{display:none;}

}

@media all and (max-width: 479px) {

    .content .x700{display:none;}
    .content .x490{display:none;}
    .content .x290{display:block;}
}   

.fullscreen-mobile {
    position: fixed;
    display:block;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: 100%;
    z-index: -100;
    background-color:#fff;
    background:url(../img/schrijven.jpg) no-repeat;
    top: 0px;
    left: 0px;
    background-size: cover;
    background-position: 50% 50%;
    /*background-position: 30% 50%;*/
/*  z-index: -100;*/
}   

</style>

然后输入html代码：

<div class="content">
    <div class="x700 fullscreen-bg">
        <video class="fullscreen-bg__video" autoplay muted loop id="video-desktop" poster="images/256x256.png" onClick="openFullscreen('video-desktop')">
          <source src="videos/edit-v1.mp4" type="video/mp4">
        </video>
        <div class="content">
            <button class="myBtn button-right" id="pid-desktop" onclick="pauseFunction('video-desktop','pid-desktop')"><i class="fas fa-pause"></i></button>
      <button class="myBtn button-right" id="aid-desktop" onclick="audioFunction('video-desktop','aid-desktop')"><i class="fas fa-volume-up"></i></button>
        </div>
    </div>


    <div class="x490">this is the content for tablet

</div>

    <!-- mobile-->
    <div class="x290 fullscreen-mobile">

        <video style="width: 100%" autoplay loop muted playsinline id="video-mobile" onClick="openFullscreen('video-mobile')">
          <source src="videos/edit-v1.mp4" type="video/mp4">
        </video>
        <div class="content">
            <button class="myBtn button-right" id="pid-mobile" onclick="pauseFunction('video-mobile','pid-mobile')"><i class="fas fa-pause"></i></button>
    <button class="myBtn button-right" id="aid-mobile" onclick="audioFunction('video-mobile','aid-mobile')"><i class="fas fa-volume-up"></i></button>
        </div>          
    </div>
</div>

最后，Java脚本如下所示：

  <script>

    function openFullscreen(vid) {
      var video = document.getElementById(vid);
      console.log("hitting")
      var elem = video
      console.log(elem)
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.mozRequestFullScreen) { /* Firefox */
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
        elem.webkitRequestFullscreen();
      } else if (elem.msRequestFullscreen) { /* IE/Edge */
        elem.msRequestFullscreen();
      }
    }

  // Pause and play the video, and change the button icon
  function pauseFunction(vid, pid) {

    // Get the video and buttons
    var video = document.getElementById(vid);
    var pausebtn = document.getElementById(pid);

    if (video.paused) {
      video.play();
      pausebtn.innerHTML = '<i class="fas fa-pause"></i>';
    } else {
      video.pause();
      pausebtn.innerHTML = '<i class="fas fa-play"></i>';
    }
  }

  // Unmute and mute the video, and change the button icon
  function audioFunction(vid, aid) {

    // Get the video and buttons
    var video = document.getElementById(vid);
    var audioBtn = document.getElementById(aid);

    if (video.muted) {
      video.muted = false;
      audioBtn.innerHTML = '<i class="fas fa-volume-mute"></i>';
    } else {
      video.muted = true;       
      audioBtn.innerHTML = '<i class="fas fa-volume-up"></i>';
    }
  }
  </script>

响应式背景视频HTML5 + JavaScript

0 个答案: