Safari / Chrome浏览器无法在iPhone上播放超过16个视频的视频

时间：2018-06-12 17:43:17

标签： safari html5-video mobile-safari

我们有一个使用React.js和Onsen UI创建的移动优先网站。该应用程序有一个章节列表的屏幕，每章都有很多视频。在从列表中选择任何章节时，我们将使用轮播逐个显示视频（每个轮播幻灯片使用HTML视频标签播放一个视频）。

某些章节可能有20多个视频。所有视频均为mp4类型，大小约为40kb - 3MB。

在使用Safari或Chrome浏览器的iPhone上，在播放第17个视频后的第16个视频后，我会看到一个黑屏并通过播放按钮。浏览器控制台上没有错误或任何警告。

以下是斜线播放按钮的示例图像。

enter image description here

一旦这个黑屏出现，它将开始出现在所有视频中。

我有示例代码，您可以按任意顺序播放视频，只要您点击第17个视频就会出错。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

    <title>Hello, world!</title>
    <style>
      .item {
        border: 1px solid black;
      }
      .carousel-control-next, .carousel-control-prev {
        background: red;
        margin: 15px;
        height: 40px;
      }
      .video {
        width: 100%;
      }
      .count {
        text-align: center;
        margin: 10;
      }
    </style>
  </head>
  <body>
    <div class="container">
      
      <div class="row">
        <div class="col">
          <h1>Video Issue!</h1>
        </div>
      </div>
      
      <div class="row">
        <div class="col">
          <div class="item active">
            <video id="video-0" class="video" controls="" playsinline=""  >
              <source type="video/mp4" src="https://s3-us-west-2.amazonaws.com/gathatesting/videos/video-0.mp4">
            </video>
          </div>
          <div class="item">
            <video id="video-1" class="video" controls="" playsinline="" >
              <source type="video/mp4" src="https://s3-us-west-2.amazonaws.com/gathatesting/videos/video-1.mp4">
            </video>
          </div>
          <div class="item">
            <video id="video-2" class="video" controls="" playsinline="" >
              <source type="video/mp4" src="https://s3-us-west-2.amazonaws.com/gathatesting/videos/video-2.mp4">
            </video>
          </div>
          <div class="item">
            <video id="video-3" class="video" controls="" playsinline="" >
              <source type="video/mp4" src="https://s3-us-west-2.amazonaws.com/gathatesting/videos/video-3.mp4">
            </video>
          </div>
          <div class="item">
            <video id="video-4" class="video" controls="" playsinline="" >
              <source type="video/mp4" src="https://s3-us-west-2.amazonaws.com/gathatesting/videos/video-4.mp4">
            </video>
          </div>
          <div class="item">
            <video id="video-5" class="video" controls="" playsinline="" >
              <source type="video/mp4" src="https://s3-us-west-2.amazonaws.com/gathatesting/videos/video-5.mp4">
            </video>
          </div>
          <div class="item">
            <video id="video-6" class="video" controls="" playsinline="" >
              <source type="video/mp4" src="https://s3-us-west-2.amazonaws.com/gathatesting/videos/video-6.mp4">
            </video>
          </div>
          <div class="item">
            <video id="video-7" class="video" controls="" playsinline="" >
              <source type="video/mp4" src="https://s3-us-west-2.amazonaws.com/gathatesting/videos/video-7.mp4">
            </video>
          </div>
          <div class="item">
            <video id="video-8" class="video" controls="" playsinline="" >
              <source type="video/mp4" src="https://s3-us-west-2.amazonaws.com/gathatesting/videos/video-8.mp4">
            </video>
          </div>
          <div class="item">
            <video id="video-9" class="video" controls="" playsinline="" >
              <source type="video/mp4" src="https://s3-us-west-2.amazonaws.com/gathatesting/videos/video-9.mp4">
            </video>
          </div>
          <div class="item">
            <video id="video-10" class="video" controls="" playsinline="" >
              <source type="video/mp4" src="https://s3-us-west-2.amazonaws.com/gathatesting/videos/video-10.mp4">
            </video>
          </div>
          <div class="item">
            <video id="video-11" class="video" controls="" playsinline="" >
              <source type="video/mp4" src="https://s3-us-west-2.amazonaws.com/gathatesting/videos/video-11.mp4">
            </video>
          </div>
          <div class="item">
            <video id="video-12" class="video" controls="" playsinline="" >
              <source type="video/mp4" src="https://s3-us-west-2.amazonaws.com/gathatesting/videos/video-12.mp4">
            </video>
          </div>
          <div class="item">
            <video id="video-13" class="video" controls="" playsinline="" >
              <source type="video/mp4" src="https://s3-us-west-2.amazonaws.com/gathatesting/videos/video-13.mp4">
            </video>
          </div>
          <div class="item">
            <video id="video-14" class="video" controls="" playsinline="" >
              <source type="video/mp4" src="https://s3-us-west-2.amazonaws.com/gathatesting/videos/video-14.mp4">
            </video>
          </div>
          <div class="item">
            <video id="video-15" class="video" controls="" playsinline="" >
              <source type="video/mp4" src="https://s3-us-west-2.amazonaws.com/gathatesting/videos/video-15.mp4">
            </video>
          </div>
          <div class="item">
            <video id="video-16" class="video" controls="" playsinline="" >
              <source type="video/mp4" src="https://s3-us-west-2.amazonaws.com/gathatesting/videos/video-16.mp4">
            </video>
          </div>
          <div class="item">
            <video id="video-17" class="video" controls="" playsinline="" >
              <source type="video/mp4" src="https://s3-us-west-2.amazonaws.com/gathatesting/videos/video-17.mp4">
            </video>
          </div>
          <div class="item">
            <video id="video-18" class="video" controls="" playsinline="" >
              <source type="video/mp4" src="https://s3-us-west-2.amazonaws.com/gathatesting/videos/video-18.mp4">
            </video>
          </div>
          <div class="item">
            <video id="video-19" class="video" controls="" playsinline="" >
              <source type="video/mp4" src="https://s3-us-west-2.amazonaws.com/gathatesting/videos/video-19.mp4">
            </video>
          </div>
          <div class="item">
            <video id="video-20" class="video" controls="" playsinline="" >
              <source type="video/mp4" src="https://s3-us-west-2.amazonaws.com/gathatesting/videos/video-20.mp4">
            </video>
          </div>
        </div>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    
  </body>
</html>

这是在iphone浏览器上打开的直接网址https://s3-us-west-2.amazonaws.com/gathatesting/videos/video-without-carousel.html

2 个答案:

答案 0 :(得分：0)

我认为浏览器超载，因为视频是缓存的，尝试通过添加一点javascript使其有点动态

答案 1 :(得分：0)

我遇到了同样的问题。诀窍似乎是要替换嵌套的源代码，而不要整个替换视频代码。交换源以触发其重新加载后，请记住在视频元素上调用.load（）。

相关问题
最新问题