我想在 iPhone 上播放 HTML5 视频，但每当我尝试播放时，当调用视频“.play()”时，iPhone 会自动全屏弹出。如何在 iPhone 不更改其 UI 的情况下内联播放视频:
http://www.easy-bits.com/iphone-inline-video-autostart
http://www.takeyourdose.com/en (点击“开始360体验”时)
编辑:这是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>iPhone Test</title>
<meta charset="utf-8">
</head>
<body>
<button onclick="document.getElementById('vid').play()">Start</button>
<video id="vid">
<source src="/videos/tutorial.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
最佳答案
我正在研究这个问题的解决方案，直到 Apple 允许“webkit-playsinline”实际播放内联。
我在这里创建了一个图书馆:https://github.com/newshorts/InlineVideo
这很粗糙，但基本要点是您通过视频“寻找”而不是直接播放。所以不要打电话:
video.play()
您改为使用请求动画帧或 setInterval 设置循环，然后设置:
video.currentTime = __FRAME_RATE__
因此整个内容在您的 html 中可能看起来像这样:
<video controls width="300">
<source src="http://www.w3schools.com/html/mov_bbb.mp4">
</video>
<canvas></canvas>
<button>Play</button>
和你的 js(确保包含 jquery)
var video = $('video')[0];
var canvas = $('canvas')[0];
var ctx = canvas.getContext('2d');
var lastTime = Date.now();
var animationFrame;
var framesPerSecond = 25;
function loop() {
var time = Date.now();
var elapsed = (time - lastTime) / 1000;
// render
if(elapsed >= ((1000/framesPerSecond)/1000)) {
video.currentTime = video.currentTime + elapsed;
$(canvas).width(video.videoWidth);
$(canvas).height(video.videoHeight);
ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
lastTime = time;
}
// if we are at the end of the video stop
var currentTime = (Math.round(parseFloat(video.currentTime)*10000)/10000);
var duration = (Math.round(parseFloat(video.duration)*10000)/10000);
if(currentTime >= duration) {
console.log('currentTime: ' + currentTime + ' duration: ' + video.duration);
return;
}
animationFrame = requestAnimationFrame(loop);
}
$('button').on('click', function() {
video.load();
loop();
});
http://codepen.io/newshorts/pen/yNxNKR
Apple 改变这一点的真正驱动力是最近发布的默认启用的 ios 设备的 webGL。基本上会有一大群人希望使用视频纹理。从技术上讲，目前无法做到这一点。
关于iphone - iphone 上的内联 html5 视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30855662/