У нас есть мобильный первый веб-сайт, созданный с использованием React.js и пользовательского интерфейса Onsen.В приложении есть экран с перечнем глав, и в каждой главе много видео.При выборе любой главы из списка мы показываем видео один за другим, используя карусель (одно видео на слайды карусели, используя HTML-тег видео).
В некоторых главах может быть более 20 видео.Все видео имеют тип mp4 и имеют размер около 40 КБ - 3 МБ.
На iPhone с использованием браузера Safari или Chrome, после 16-го видео, что означает на 17-м видео, я получаю черный экран и разрезаю кнопку воспроизведения.На консоли браузера нет ошибок или предупреждений.
Вот пример изображения косой черты через кнопку воспроизведения.
Икак только этот черный экран появится, он начнет появляться для всех видео.
У меня есть пример кода, вы можете воспроизводить видео в любом порядке, как только вы нажимаете 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