Chr*_*son 8 iphone video user-interface html5
我想在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.基本上会有很多人希望使用视频纹理.从技术上讲,这是不可能完成的.
很抱歉将其写为答案而不是在主线程上发表评论，但我显然没有足够的声誉点来发表评论！
无论如何，我也希望做与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
| 归档时间： |
|
| 查看次数： |
22946 次 |
| 最近记录： |