Браузер Safari / Chrome не способен воспроизводить видео более 16 видео на iPhone - PullRequest
0 голосов
/ 12 июня 2018

У нас есть мобильный первый веб-сайт, созданный с использованием React.js и пользовательского интерфейса Onsen.В приложении есть экран с перечнем глав, и в каждой главе много видео.При выборе любой главы из списка мы показываем видео один за другим, используя карусель (одно видео на слайды карусели, используя HTML-тег видео).

В некоторых главах может быть более 20 видео.Все видео имеют тип mp4 и имеют размер около 40 КБ - 3 МБ.

На iPhone с использованием браузера Safari или Chrome, после 16-го видео, что означает на 17-м видео, я получаю черный экран и разрезаю кнопку воспроизведения.На консоли браузера нет ошибок или предупреждений.

Вот пример изображения косой черты через кнопку воспроизведения.

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>

Вот прямой URL для открытия в браузере iphone, https://s3 -us-west-2.amazonaws.com / gathatesting / videos / video-без-carousel.html

Ответы [ 2 ]

0 голосов
/ 29 июня 2018

Я столкнулся с той же проблемой.Хитрость, кажется, состоит в том, чтобы заменить вложенный тег источника без замены тега видео в целом.Не забудьте вызвать .load () для элемента video после замены источника, чтобы запустить его для перезагрузки.

0 голосов
/ 12 июня 2018

Я думаю, что браузер перегружается, так как видео кэшируется, попробуйте сделать его немного динамичным, добавив немного javascript

...