【发布时间】：2018-06-12 17:43:17
【问题描述】：
我们有一个使用 React.js 和 Onsen UI 创建的移动优先网站。该应用程序有一个章节列表屏幕，每个章节都有许多视频。在从列表中选择任何章节时，我们会使用轮播一个一个地显示视频（每个轮播幻灯片一个视频，使用 HTML 视频标签）。
有些章节可能有超过 20 个视频。所有视频均为 mp4 类型，大小约为 40kb - 3MB。
在使用 Safari 或 Chrome 浏览器的 iPhone 上，在第 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>这是在 iPhone 浏览器上打开的直接网址，https://s3-us-west-2.amazonaws.com/gathatesting/videos/video-without-carousel.html
【问题讨论】：
标签： safari html5-video mobile-safari