我想在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>
我正在研究这个问题的解决方案，直到苹果允许"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
苹果改变这一点的真正驱动力将是默认启用的适用于ios设备的最新版本的webGL。基本上会有一大群人希望使用视频纹理。从技术上讲，现在这是不可能的。
在 IOS10/Safari 10 上，您现在可以将 playsinline 属性添加到 HTML5 Video 元素中，它只会内联播放。
如果创建音频元素和视频元素，则可以通过用户交互播放音频，然后查找视频，将其呈现到画布。这是我想出的快速方法（在iPhone iOS 9上测试）
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var audio = document.createElement('audio');
var video = document.createElement('video');
function onFrame(){
ctx.drawImage(video,0,0,426,240);
video.currentTime = audio.currentTime;
requestAnimationFrame(onFrame);
}
function playVideo(){
var i = 0;
function ready(){
i++;
if(i == 2){
audio.play();
onFrame();
}
}
video.addEventListener('canplaythrough',ready);
audio.addEventListener('canplaythrough',ready);
audio.src = video.src = "http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_10mb.mp4";
audio.load();
video.load();
}
代码笔
测试页面
很抱歉将此作为答案而不是对主线程的评论，但我显然没有足够的声誉点来评论！
无论如何，我也希望做与OP完全相同的事情。
我注意到有一个特定的库，krpano，再加上krpano视频播放器插件，允许在iPhone上播放视频内联！可以在此处找到一些实际演示：http://krpano.com/video/
虽然我更喜欢一个简单的 2D 视频示例而不是这些疯狂的全景视频，但这是我在搜索网络时发现的最接近的。据我所知，他们使用未附加到文档的普通元素：
var v = document.querySelector('video');
// remove from document
v.parentNode.removeChild(v);
// touch anywhere to play
document.ontouchstart = function () {
v.play();
}
移除前的视频元素：
<video playsinline webkit-playsinline preload="auto" crossorigin="anonymous" src="http://www.mediactiv.com/video/Milano.mp4" loop style="transform: translateZ(0px);"></video>
但仅凭这一点似乎还不够：当视频播放时，它仍然会全屏播放。
他们如何设法防止视频全屏显示？
编辑：在查看了这两个示例之后，看起来它们都在利用canvas元素来渲染视频，所以我继续制作了一个演示，展示了通过canvas元素进行视频渲染。虽然演示效果很好，但它无法在iPhone上交付（即使视频元素从DOM中完全删除！） - 视频仍然跳到全屏。我认为下一步是将这些相同的原则应用于 WebGL 画布（这就是 krpano 示例正在做的事情），但与此同时，也许这个演示会在其他人中激发一些想法......
http://jakesiemer.com/projects/video/index.htm