Question

我想在iPhone上播放HTML5视频，但每当我尝试时，当视频播放时，iPhone会自动全屏弹出。播放（）＆＃39;叫做。如何在不改变iPhone的UI的情况下内联播放视频：

http://www.easy-bits.com/iphone-inline-video-autostart

http://www.takeyourdose.com/en（当您点击＆＃34;开始360体验＆＃34;）

编辑：这是我的代码：

<!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>

Answer 1

我正在努力解决这个问题，直到Apple允许＆＃34; webkit-playsinline＆＃34;实际上是内联播放。

我在这里开了一个图书馆：https://github.com/newshorts/InlineVideo

这非常粗糙，但基本的要点是你“寻求”＆＃34;通过视频而不是直接播放。所以不要打电话：

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。基本上会有很多人希望使用视频纹理。从技术上讲，现在还无法完成。

Answer 2

在IOS10 / Safari 10上，您现在可以将playsinline属性添加到HTML5视频元素，它将只是内联播放。

Answer 3

如果您创建音频元素和视频元素，则可以通过用户交互播放音频，然后搜索视频，将其渲染到画布。这是我提出的快速（在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();
}

CodePen

Test Page

Answer 4

抱歉写这个作为答案而不是主线程的评论，但我显然没有足够的声誉点来评论！

无论如何，我也希望做与OP完全相同的事情。

我注意到有一个特定的库krpano，加上krpano videoplayer plugin，允许在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>

但仅凭这一点似乎还不够：播放视频时，它仍会全屏显示。

他们如何设法阻止视频全屏显示？

编辑：看了两个例子之后看起来他们都在利用画布元素来渲染视频，所以我继续前进并制作了一个演示通过画布元素显示视频渲染的演示。虽然该演示效果很好，但它无法在iPhone上传送（即使视频元素已从DOM中完全删除！） - 视频仍会跳转到全屏。我认为下一步是将这些相同的原则应用于WebGL画布（这是krpano示例正在做的事情），但与此同时，这个演示可能会引发其他人的想法......

http://jakesiemer.com/projects/video/index.htm

iphone上的内联html5视频

4 个答案: