我有一个基本的 HTML5 视频播放器，没有像这样的控件......
<video id="videoPlayer" preload="auto" webkit-playsinline>
<source id="videoSourceMP4" src="" type="video/mp4" />
<source id="videoSourceOGG" src="" type="video/ogg" />
</video>
顶部有一个按钮，按下时会加载所需的视频:
document.getElementById("videoSourceMP4").src = "videos/video.mp4";
document.getElementById("videoSourceOGG").src = "videos/video.ogg";
document.getElementById("videoPlayer").load();
我现在也开始检查视频是否可以播放并应该开始播放:
document.getElementById("videoPlayer").oncanplaythrough = function(){
document.getElementById("videoPlayer").play();
}
这在 ios8 中有效，但是自从 ios9 之后什么都没有发生。视频卡在第一帧，无法播放。即使我在顶部添加另一个按钮并分配了 play() 也没有任何反应。我必须启用控件并使用提供的播放按钮播放它。如果我暂停视频然后按下我自己的播放按钮，它就会工作。我希望能够使用我自己设计的控件。
有人知道为什么现在这样做吗？
最佳答案
下面的代码工作如下；
- iOS 9.2.1 - 按下按钮时视频全屏播放
- 从主屏幕内联播放视频
- iOS 9.3 beta 1 - 按下按钮时内联播放视频
- 视频从主屏幕内联播放
视频文件来自http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style>
video{
width:400px;
border: 2px dashed black;
}
button{
font-size:2em;
padding:1em;
}
</style>
</head>
<body onload='init()'>
<video id="videoPlayer" preload="auto" webkit-playsinline>
<source id="videoSourceMP4" src="" type="video/mp4" />
<source id="videoSourceOGG" src="" type="video/ogg" />
</video>
<br/>
<button type='button' onclick='go()'>Play</button>
<script>
function init(){
document.getElementById("videoPlayer").oncanplaythrough = function(){
document.getElementById("videoPlayer").play();
}
}
function go(){
document.getElementById("videoSourceMP4").src = "small.mp4";
document.getElementById("videoSourceOGG").src = "small.ogg";
document.getElementById("videoPlayer").load();
}
</script>
</body>
关于Javascript HTML5 play() 在 ios9 Safari 中不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33272547/