Pixi.js: videoTexture.source.play()がIOSでフルスクリーンで起動します

作成日 2016年10月14日  ·  25コメント  ·  ソース: pixijs/pixi.js

昨日のコンボからの@ englercj#2873
これは#devブランチにあります。
ページに隠されたビデオ要素があり、自動再生などはありません。

私はキャンバスを作成するなど、必要なすべてのことを行い、デスクトップ/ Androidブラウザで正常に動作します。

videoTexture.source.play()を押すと、iOS 9でFSが開きます。唯一の解決策は、リクエストアニメーションフレームを使用してビデオをフレームごとにステップ実行することだと思います。 これがpixijsに実装されているかどうかはわかりませんでした。 ありがとう。

👍 Not A Bug 💾 v4.x (Legacy) 📢 Accepting PRs 🕷 Bug

最も参考になるコメント

omfg信じられない! それは完全にそれを修正します。 fml。 ありがとうございました。

全てのコメント25件

問題リストを見たので、これは#3078に似ていますか?

3066の方が正確だと思います。

私が使用しているレコード(https://github.com/bfred-it/iphone-inline-video)の場合、iOS 9でビデオを単独でインライン再生するために使用しています。これは機能しますが、videoTextureは描画されないようです。 ios9のフレーム。 そのlibはrequestanimationframe呼び出しを作成し、フレームごとにビデオをステップスルーします。

うーん、面白い。 私はiOSデバイスを持っていないので、これは私にとって難しいものです。 うまくいけば、他の開発者の1人がこれをすぐにノックアウトすることができます!

@ pr1ntrこの前のスレッドで、iOS9以下がフルスクリーンにならないとビデオを再生できないことを説明しました。 それはAppleがそれらを設計した方法の一部です。

さて、この動作を実際に許可するためにいくつかの巧妙なシェナニガンを実行するこのサードパーティのポリフィルライブラリがあります。 私が信じていることはPIXIの範囲を超えているので、PIXI自体に含まれていることはありませんでした。

しかし....私はさまざまなOSバージョンのiPhoneに囲まれており、このライブラリで遊ぶ予定です。 調査結果があればご連絡いたします:)

こんにちは、調査していただきありがとうございます。 ビデオが通常どおりイベントを発生させている場合、テクスチャの更新が更新されないことがわかりました。 私が使用しているポリフィルは、すべてのイベントを正常に発生させるはずです。ビデオをプッシュするための独自のブードゥーrequestAnimationFrameティックがあります。 <video>タグだけで使用すると、実際には正常に機能します。

バグは全画面表示ではなく、同じようにイベントが聞こえないことだと思います。 私は情報源を調査しようとしていましたが、それほど多くの時間や参照枠がありませんでした。

この動作を示すために、codepenで例を作成してみることができます。 それは役に立ちますか?

あなたがさらに数分間待っているなら、私はあなたのための解決策を見つけたかもしれません:)

甘い!

var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, { transparent: true });
document.body.appendChild(renderer.view);

// create the root of the scene graph
var stage = new PIXI.Container();

// create a video texture from a path
var texture = PIXI.Texture.fromVideo('video.mp4');
texture.baseTexture.autoPlay = false;
makeVideoPlayableInline(texture.baseTexture.source, false);

window.document.addEventListener( 'mousedown', function() {
    texture.baseTexture.source.play();
});

window.document.addEventListener( 'touchstart', function() {
    texture.baseTexture.source.play();
});

var videoSprite = new PIXI.Sprite(texture);
videoSprite.width = renderer.width;
videoSprite.height = renderer.height;
stage.addChild(videoSprite);

animate();

function animate(){
    requestAnimationFrame(animate);

    // render the stage
    renderer.render(stage);
}

したがって、上記はios8とios9で機能します。 'makeVideoPlayableInline'を呼び出すときは、 'false'を指定することに注意してください。 これは、ビデオに音がないということです。 これは、このサードパーティのポリフィルを使用してPIXIをインラインで使用できる唯一の方法です。 うまくいけば、それはあなたにとって許容できるトレードオフです!

重要なのは、音声がまったく含まれていないビデオかもしれないと思います。 falseを指定していましたが、ビデオにオーディオトラックがあります。 音声付きのテストビデオを使用していました。 私たちが作っているアプリの実際のビデオには何もありません。 再エンコードを試してみてください。報告します。

複数のビデオを使用した私のテストでは、ビデオにオーディオが含まれているかどうかは関係ありません。 'false'を 'makeVideoPlayableInline'に渡すと、ビデオはインラインで再生されます。

右私は偽を渡している。 しかし、私は他の場所でビデオをラップしています。

これは私のビデオコンポーネント_Warning_Reactです。
https://gist.github.com/pr1ntr/8511ede7068eac180f515a18ddf75a89#file -connectvideo-js-L52
これは、インラインポリフィルを実行する場所です(52行目)
60行目は、親にPixiVideoWrapperをレンダリングするように指示するready関数を呼び出します。
これはここにあります:
https://gist.github.com/pr1ntr/57032704841e471c3a145308072f3ee2#file -game-js-L37

次に、PixiVideoWrapperがマウントされると、ビデオテクスチャを実行するためにすべての処理を実行します。
https://gist.github.com/pr1ntr/3a44f327406d5d5a97824c47d6194484#file -pixivideowrapper-js-L118

したがって、Game.jsでは、ユーザーがタップした場合、PixiVideoWrapperの81行目で121行目componentWillReceiveProps介して再生するようにビデオに指示する必要があります。

display:none削除すると、インラインビデオの再生が表示されます。

また、最新の#devを使用していますか?

うん

最新の開発以前のものは、ベースビデオテクスチャのロードに問題があるか、ios10が必要とするビデオのインラインタグが含まれていません

わかりました、あなたの例は私のために働きます。 しかし、DOMのビデオはどこにありますか? また、このボタンはHOOK DIVと呼ばれていますか? これは奇妙です。 ビデオがページにすでに存在する場合、なぜそれが違いを生むのでしょうか?

basevideotextureを作成するときに、ソースがダイレクトビデオの場合、htmlビデオタグ自体が作成されます。 おそらくこれが違いです。 ソースコードを見て、イベントリスナーの設定が異なるかどうかを確認しますか? 木曜日までiOSデバイスにアクセスしてこれをもう一度プレイすることはできません。

シミュレーターでテストしていますか?

いいえ、実際のデバイスでテストしていました。

こんにちは
独自のビデオ要素を提供することが機能するかどうかを確認するために、基本的なテストを行いました。 文字列としてソースを提供した場合の例であるios9では機能しませんでした。

import inlineVideo from 'iphone-inline-video';

var video = document.createElement('video');
video.setAttribute('playsinline','');
video.setAttribute('webkit-playsinline','');

var src = document.createElement('source');
src.setAttribute('src', vidUrl);
src.setAttribute('type', 'video/mp4');

video.appendChild(src);

console.log(video);

// create the root of the scene graph
var stage = new PIXI.Container();

// create a video texture from a path
var texture = PIXI.Texture.fromVideo(video);
texture.baseTexture.autoPlay = false;
inlineVideo(texture.baseTexture.source, false);

window.document.addEventListener( 'mousedown', function() {
    texture.baseTexture.source.play();
});

window.document.addEventListener( 'touchstart', function() {
    texture.baseTexture.source.play();
});

var videoSprite = new PIXI.Sprite(texture);
videoSprite.width = renderer.width;
videoSprite.height = renderer.height;
stage.addChild(videoSprite);

animate();

function animate(){
    requestAnimationFrame(animate);

    // render the stage
    renderer.render(stage);
}

PIXIのソースに違いは見つかりませんでした。 私は気が狂っていると思います。

私が違うのは、PIXIに文字列のURLから独自のビデオタグを作成させると、次のように呼び出されることだけです。
video.load();
直後に試してみてください
video.appendChild(src);

omfg信じられない! それは完全にそれを修正します。 fml。 ありがとうございました。

このスレッドは、閉じられた後に最近のアクティビティがないため、自動的にロックされています。 関連するバグについては、新しい問題を開いてください。

このページは役に立ちましたか?
0 / 5 - 0 評価