HTML5 视频未在移动设备上显示？答案

【问题标题】：HTML5 Video not displaying on Mobile Devices?HTML5 视频未在移动设备上显示？
【发布时间】：2015-12-19 00:58:49
【问题描述】：

我正在尝试在视频背景上显示文本。我使用简单的 HTML5 和 CSS 来做到这一点。我的代码适用于使用 Chrome、Safari 和 Firefox 的桌面网站，但是当用户在 Android 或 iPhone 设备上查看页面时......只有文本显示并且视频拒绝播放（我正在 iPhone 6s Plus 上进行测试和三星 S5)。

这是相关页面的实时预览：http://buzzanimatedvideos.com/video-test/

这是我正在使用的 CSS 和 HTML：

   .header-unit {
      background: #fff;
      border: 0 solid #fff;
      height: 500px;
      border: none;
      position: relative;
      padding: 0;
      overflow: hidden;
      text-align: center;
      margin: 0 auto;
   }
   .video_container {
      text-align: center;
      margin: 0 auto;
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
   }
   video {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto;
      min-height: 50%;
      min-width: 50%;
   }
   .video-overlay {
      position: relative;
      z-index: 999;
      text-align: center;
      margin: 0 auto;
   }
   .video-overlay-color {
      background-color: rgba(0,0,0,0.5);
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0%;
      bottom: 0;
      left: auto;
      right: auto;
      margin: 0 auto;
      text-align: center;
   }
   .video-overlay-content {
      position: absolute;
      z-index: 9999;
      opacity: 1;
      width: 100%;
      height: 100%;
      top: 25%;
      bottom: 0;
      left: auto;
      right: auto;
      margin: 0 auto;
      text-align: center;
   }
   .video-overlay-content h1 {
      max-width: 640px;
      color: #fff;
      margin: 0 auto;
      text-align: center;
      font-size: 3.1rem;
   }
   .video-overlay-content p {
      margin-top: 1rem;
   }

<div class="video-overlay">
   <div class="header-unit">
      <div class="video_container">
         <video poster="/wp-content/themes/buzz/vid/video-still.jpg" preload autoplay loop>
            <source src="http://buzzanimatedvideos.com/wp-content/uploads/2015/12/BuzzAnimated_HeroBG.mp4" type="video/mp4" />
            <source src="http://buzzanimatedvideos.com/wp-content/uploads/2015/12/BuzzAnimated_HeroBG.webm" type="video/webm" />
            <source src="http://buzzanimatedvideos.com/wp-content/uploads/2015/12/BuzzAnimated_HeroBG.ogv" type="video/ogg" />
         </video>
      </div>
   </div>
   <div class="video-overlay-color">
      <div class="video-overlay-content">
         <h1>ANIMATED VIDEOS THAT ENTERTAIN, EXPLAIN & GAIN NEW CUSTOMERS</h1>
         <p><a href="/portfolio/" class="button large-alt">WATCH OUR VIDEOS</a></p>
      </div>
   </div>
</div>

有谁知道问题出在哪里？我一直在寻找某种类型的线索，但我一无所获。 =/感谢您的帮助！

【问题讨论】：

所有移动浏览器都不支持自动播放，您需要给这些用户一个播放按钮，以便他们选择是否要使用带宽/电池
太棒了。我不知道。也就是说，我通过将视频转换为 GIF 来解决移动设备上的自动播放问题。我将视频隐藏在 640 像素以下并显示 GIF。无论用户输入如何，GIF 都会一直循环播放，因此效果很好。

标签： html video mobile html5-video

【解决方案1】：

太棒了。我不知道。也就是说，我通过将视频转换为 GIF 来解决移动设备上的自动播放问题。我将视频隐藏在 640 像素以下并显示 GIF。无论用户输入如何，GIF 都会一直循环播放，因此效果很好。

【讨论】：