在iphone上内嵌html5视频 [英] inline html5 video on iphone
问题描述
我想在iPhone上播放HTML5视频，但每当我尝试时，当视频.play（）被调用时，iPhone都会自动弹出全屏。如何在不改变iPhone的UI的情况下播放视频： $ b 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（）>开始< / button>
< video id =vid>
< source src =/ videos / tutorial.mp4type =video / mp4>
您的浏览器不支持视频标记。
< / 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>
<按钮>播放< /按钮>
和您的js（确保包含jquery）
var video = $（'video'）[0];
var canvas = $（'canvas'）[0];
var ctx = canvas.getContext（'2d'）;
var lastTime = Date.now（）;
var animationFrame;
var framesPerSecond = 25;
函数loop（）{
var time = Date.now（）;
var elapsed =（time - lastTime）/ 1000; （经过> =（（1000 / framesPerSecond）/ 1000））{
video.currentTime = video.currentTime +经过;
//渲染
if
$（canvas）.width（video.videoWidth）;
$（canvas）.height（video.videoHeight）;
ctx.drawImage（video，0，0，video.videoWidth，video.videoHeight）;
lastTime = time;
}
//如果我们在视频结束时停止
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）; （），
$ b $（'button'）。on（'click'，function（）{
video.load（）;
loop（）;
}）;
http://codepen.io/newshorts/pen/yNxNKR
苹果改变这个的真正驱动程序将是最近发布的webGL适用于默认情况下启用的ios设备。基本上会有一大群人希望使用视频纹理。技术上现在，这是无法完成的。
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:
http://www.easy-bits.com/iphone-inline-video-autostart
http://www.takeyourdose.com/en (When you click "Start the 360 experience")
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>
I'm working on a solution to this until Apple allows the "webkit-playsinline" to actually play inline.
I started a library here: 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:
video.currentTime = __FRAME_RATE__
So the whole thing might look like in your 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)
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
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.
这篇关于在iphone上内嵌html5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
