web-dev-qa-db-ja.com

iPhoneのインライン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>
iphonehtmluser-interfacevideo
8
Chris Johnson

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の最近のリリースになります。基本的に、ビデオテクスチャを使用したいと考えている人がたくさんいます。技術的に今すぐです。 、それはできません。

8
newshorts

IOS10/Safari 10では、HTML5 Video要素にplaysinlineプロパティを追加できるようになり、インラインで再生されます。

6
Eek

オーディオ要素とビデオ要素を作成する場合、ユーザー操作を介してオーディオを再生し、ビデオをシークしてキャンバスにレンダリングできます。これは私が思いついた簡単なものです（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

テストページ

3
Kyle

メインスレッドでコメントではなく回答としてこれを書き込んだことをお詫びしますが、コメントするのに十分な評判ポイントがないようです。

とにかく、OPとまったく同じことをしたいと思っています。

krpano videoplayer plugin と組み合わせた特定のライブラリ krpano があり、iPhone INLINEでビデオを再生できることに気づきました！これの実際のデモはここにあります： http://krpano.com/video/

私はこれらのクレイジーなパノラマビデオよりも単純な2Dビデオの例を好みますが、これは私がWebを調べているときに見つけた最も近いものです。私が知ることができることから、彼らはドキュメントに添付されていない通常の要素を使用しています：

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の例で行っていることです）が、当面はこのデモがspark他のいくつかのアイデアになるでしょう） ...

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

1
Jake