Question

我在mywebsite中使用视频作为背景，但它在网络中运行良好，为什么不在移动视图中？这是我的html css和java脚本代码，但背景视频在Web视图中工作正常，但为什么不在移动设备中我尝试在移动设备中使用不同的浏览器，但它根本不工作？这是背景视频的脚本

<script>
            (function() {
  /**
   * Video element
   * @type {HTMLElement}
   */
  var video = document.getElementById("my-video");

  /**
   * Check if video can play, and play it
   */
  video.addEventListener( "canplay", function() {
    video.play();
  });
})();
    </script>
    
the css for background video is here

    
    
html,
body,
div,
h1,
p,
a,
video {
  margin: 0;
  padding: 0;
}

/* =============================================================================
  HTML, BODY
============================================================================= */

html,
body {
  height: 100%;
}

body {
  font-family: "Oxygen", sans-serif;
}
     

/* =============================================================================
  VIDEO
============================================================================= */

.video {
 position: fixed;
  top: 50%; left: 50%;
  z-index: 1;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}
    
    .content {
  position: relative;
  top: 30%;
  z-index: 2;
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
}

.content__heading {
  margin-bottom: 24px;
  color: rgb(39,39,39);
  font-size: 44px;
}

.content__teaser {
  margin-bottom: 24px;
  color: rgb(89,89,89);
  font-size: 22px;
}

.content__cta {
  display: inline-block;
  margin: 0;
  padding: 12px 48px;
  color: rgb(255,60,100);
  font-size: 22px;
  text-decoration: none;
  border: solid 4px rgb(255,60,100);
}

the html code 
<video id="my-video" class="video" autoplay="autoplay" loop="loop"  width="300" height="150">
  <source src="video.mp4" type="video/mp4" />
  
  Your browser doesn't support HTML5 video. Here's a <a target="_blank" href="#">link</a> to download the video.</video>

背景视频不在移动视图中工作原因？

0 个答案: