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

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

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

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

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

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

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

コンセプト

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

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

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

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

実装フローチャート

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

タイプ	'documentTrigger'
triggerName	‘hihaho_ready’
triggerData	object,{supportsFullscreen: boolean}

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

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

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

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

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

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

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

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

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

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

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

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

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