iPhoneでインタラクティブ動画を全画面で再生するにはどうすればよいですか?

更新日

Appleは、非ネイティブ動画に全画面再生することを許可していません。

したがって、iPhoneでのネイティブフルスクリーンでの再生はできません。

iOSのiPhoneで動画をフルスクリーン再生する場合、Appleは常にQuicktimeプレーヤーを使用しますが、これはインタラクティブなhihahoレイヤーをサポートしません。

このようなリンクでインタラクティブ動画を共有する場合、hihahoの開発チームは、回避策でこれを解決しています。残念ながら、動画を埋め込んだ場合は、iFrame を超えて動画を展開することができないため、この機能は動作しません。

ウェブサイトやプラットフォームに動画を埋め込み、同じ効果を作りたい場合は、この機能を技術的な知識があれば自分で行うことができます。

このページでは、その考え方と手順についての情報を提供します。

もしJavaScript APIに慣れていないなら、より簡単な回避策を確認してみてください。

コンセプト

フルスクリーンをシミュレーションする:
・アプリを強制的に横向きにする
・フルスクリーンサイズで埋め込みを行う

これは、フルスクリーンエクスペリエンスに近い、または少なくともAppleが彼らのプラットフォーム上でルールを決定することを考えると、実際に可能な限り近いものになっています。

hihahoの非エンベッドバージョン(プレイヤーページ)は、単にブラウザ内で100%の幅と高さにそれを拡大縮小するので、それは、iPhone上でフルスクリーンオプションを持っているように見えますが、これはフルスクリーンではありません。そしてiframeを超えてhihahoの動画を拡大することはできませんので、iframe内では動作しません。

そこで、hihahoの動画を埋め込む際は、同じような仕掛けを実装する必要があります。これを可能にするために、私たちはenter-fullscreenexit-fullscreenというjs apiイベントを流して、ユーザーがfullscreenボタンをクリックイベントを取得し、これから提案する内容を実装してください。

実装フローチャート

プレーヤーが初期化されると、以下の詳細を含む postmessage を送信します(動画のクエリ パラメータに ?api=true が追加されている場合)。

タイプ'documentTrigger'
triggerName‘hihaho_ready’
triggerDataobject,{supportsFullscreen: boolean}
postmessage

つまりこのイベントは、hihahoが完全にロードされ、かつ現在のブラウザでフルスクリーンがサポートされているかどうかを確認します。iPhoneの場合、triggerName'hihaho_ready'のイベントは、オブジェクトキーsupportsFullscreenのtriggerDataの値はfalseとなります。

次に、フルスクリーンイベントを処理することをプレーヤーに伝え、フルスクリーンボタンを再度追加します。
これを行うには、postmessage を送り返します(iframe の contentWindow を必ずターゲットにしてください)。

この postmessage は、値として以下のオブジェクトを渡す必要があります。{'type': 'api_fullscreen_event'} 

そうすると、フルスクリーンボタンがプレーヤーに再び表示されるようになります。
ユーザーがこのボタンをクリックすると、自作したプレーヤーをフルスクリーンにしたり、フルスクリーンを閉じたりして、それに反応する必要があります。

これらのイベントを取得することができます:

タイプ'documentTrigger'
triggerName‘hihaho_enter_fullscreen’
triggerDataobject,{isSupported: boolean}
タイプ'documentTrigger'
triggerName‘hihaho_exit_fullscreen’
triggerDataobject,{isSupported: boolean}
postmessage

ご覧の通り、フルスクリーンイベントには、ネイティブフルスクリーンがサポートされているかどうかを示す triggerData が含まれます。ネイティブフルスクリーンがサポートされている場合、これらのイベントを無視することができ、その後、ネイティブフルスクリーンでフルスクリーン動作を処理します。

JavaScript API のドキュメントは以下からダウンロードできます。


JavaScript APIを使用しない場合の回避策

javascript APIに慣れていない場合は、インタラクティブ動画の下にフルスクリーンボタンを追加し、埋め込みリンクへのリンクを追加することをお勧めします。

埋め込みリンクは、フルスクリーンでの体験を提供します。以下のような感じです:

https://player.hihaho.com/embed/42735e18-0e03-4578-9d4a-216778380954

例として、https://hihaho.com/showcase/car-promotion/をモバイルで見てみましょう。