我正在研究这个问题的解决方案，直到苹果允许“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。基本上会有很多人希望使用视频纹理。从技术上来说，目前还无法做到这一点。
