Html iphone上的内联html5视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30855662/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
inline html5 video on iphone
提问by Chris Johnson
I want to play an HTML5 video on the iPhone but whenever I try to, the iPhone automatically pops out in fullscreen when the video '.play()' is called. How do I play the video inline without the iPhone changing the UI of it like these:
我想在 iPhone 上播放 HTML5 视频，但每当我尝试播放时，当视频“.play()”被调用时，iPhone 会自动全屏弹出。如何在不让 iPhone 像这样改变它的 UI 的情况下在线播放视频：
http://www.easy-bits.com/iphone-inline-video-autostart
http://www.easy-bits.com/iphone-inline-video-autostart
http://www.takeyourdose.com/en(When you click "Start the 360 experience")
http://www.takeyourdose.com/en（当您单击“开始 360 度体验”时）
Edit: Here's my code:
编辑：这是我的代码：
<!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>
回答by newshorts
I'm working on a solution to this until Apple allows the "webkit-playsinline" to actually play inline.
我正在为此寻找解决方案，直到 Apple 允许“webkit-playsinline”实际内联播放。
I started a library here: https://github.com/newshorts/InlineVideo
我在这里创建了一个库：https: //github.com/newshorts/InlineVideo
It's very rough, but the basic gist is that you "seek" through the video instead of playing it outright. So instead of calling:
这非常粗糙，但基本要点是您通过视频“寻找”而不是直接播放。所以，而不是调用：
video.play()
You instead set a loop using request animation frame or setInterval, then set the:
您改为使用请求动画帧或 setInterval 设置循环，然后设置：
video.currentTime = __FRAME_RATE__
So the whole thing might look like in your html:
所以整个事情在你的 html 中可能看起来像：
<video controls width="300">
<source src="http://www.w3schools.com/html/mov_bbb.mp4">
</video>
<canvas></canvas>
<button>Play</button>
and your js (make sure to include jquery)
和你的 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
http://codepen.io/newshorts/pen/yNxNKR
The real driver for Apple changing this will be the recent release of webGL for ios devices enabled by default. Basically there are going to be a whole bunch of people looking to use video textures. technically right now, that can't be done.
苹果改变这一点的真正驱动力将是最近为默认启用的 ios 设备发布的 webGL。基本上会有一大群人希望使用视频纹理。从技术上讲，现在无法做到。
回答by Eek
On IOS10 / Safari 10 you can now add the playsinlineproperty to the HTML5 Video element, and it will just play inline.
在 IOS10 / Safari 10 上，您现在可以将playsinline属性添加到 HTML5 Video 元素，它只会内联播放。
回答by Kyle
If you create an audio element and a video element, you can play the audio via user interaction and then seek the video, rendering it to a canvas. This is something quick that I came up with (tested on iPhone iOS 9)
如果您创建一个音频元素和一个视频元素，您可以通过用户交互播放音频，然后搜索视频，将其渲染到画布上。这是我想出的快速方法（在 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();
}
回答by Jake
Apologies for writing this as an answer instead of a comment on the main thread, but I apparently do not have enough reputation points to comment!
很抱歉将其写为答案而不是对主线程的评论，但我显然没有足够的声望点来评论！
Anyways, I am also looking to do exactly the same thing as the OP.
无论如何，我也希望做与 OP 完全相同的事情。
I noticed that there is a particular library, krpano, coupled with the krpano videoplayer pluginthat allows for video to be played on iPhone INLINE! Some demos of this in action can be found here: http://krpano.com/video/
我注意到有一个特定的库krpano，加上krpano视频播放器插件，允许在 iPhone 上在线播放视频！可以在此处找到此操作的一些演示：http: //krpano.com/video/
While I would prefer a simple 2D video example over these crazy panorama videos, this is the closest I have found while scouring the web. From what I can tell, they use a normal element not attached to the document:
虽然与这些疯狂的全景视频相比，我更喜欢简单的 2D 视频示例，但这是我在网上搜索时发现的最接近的示例。据我所知，他们使用未附加到文档的普通元素：
var v = document.querySelector('video');
// remove from document
v.parentNode.removeChild(v);
// touch anywhere to play
document.ontouchstart = function () {
v.play();
}
Video element before it's removed:
删除之前的视频元素：
<video playsinline webkit-playsinline preload="auto" crossorigin="anonymous" src="http://www.mediactiv.com/video/Milano.mp4" loop style="transform: translateZ(0px);"></video>
But that alone doesn't seem to be enough: when the video is played, it still goes fullscreen.
但这似乎还不够：播放视频时，它仍然全屏显示。
How do they manage to prevent the video from going fullscreen?
他们如何设法防止视频全屏显示？
EDIT: After looking at both examples it looked like they both were leveraging the canvas element to render the video, so I went ahead and whipped up a demo showing off video rendering thru the canvas element. While the demo works great, it fails to deliver on iPhone (even tho the video element is completely removed from the DOM!) -- the video still jumps to full screen. I'm thinking the next step would be to apply these same principles to a WebGL canvas (that's what the krpano examples are doing), but in the meantime maybe this demo will spark some ideas in others...
编辑：在查看了两个示例之后，看起来他们都在利用 canvas 元素来渲染视频，所以我继续制作了一个演示，通过 canvas 元素展示了视频渲染。虽然演示效果很好，但它无法在 iPhone 上交付（即使视频元素完全从 DOM 中删除！）——视频仍然跳到全屏。我想下一步是将这些相同的原则应用于 WebGL 画布（这就是 krpano 示例所做的），但与此同时，这个演示可能会激发其他人的一些想法......
