Safari/Chrome浏览器无法在iPhone上播放超过16个视频
Safari/Chrome浏览器无法在iPhone上播放超过16个视频
提问于 2018-06-13 01:43:17
我们有一个使用React.js和Onsen UI创建的移动第一网站。该应用程序有一个章节列表屏幕，每个章节都有许多视频。
有些章节可能有超过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上打开的直接url
回答 2
Stack Overflow用户
发布于 2018-06-13 01:47:33
我认为浏览器过载了，因为视频是缓存的，所以尝试通过添加一点javascript来使其具有一点动态性
Stack Overflow用户
发布于 2018-06-29 08:28:37
我遇到了同样的问题。诀窍似乎是替换嵌套的source标记，而不是整体替换video标记。切记在交换源以触发其重新加载之后，在视频元素上调用.load()。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50822906
复制相关文章
相似问题
腾讯云开发者
