STERFIELD

iPhoneでもインラインでVideo再生する方法

iPhoneでもインラインでVideo再生する方法

iPhoneでは基本的に、WEBページの中で、インラインで動画を再生させることはできません。
動画を再生させようとすると、強制的にフルスクリーンで再生されます。

しかし、

iPhone Safariで動画をインライン再生する方法 – Qiita

↑こちらのサイトで、インラインで動画を再生させる方法が紹介されていましたので、
実際にやってみました。

↓作ってみたもの
DEMO

方法

仕組みは、

iPhoneでvideoがフルスクリーン表示がされるのは、
playというイベントが発生した時なので、
videoの時間だけを操作して、
その動画の映像をCanvasに表示することで、
実現できています。

ただ、動画によってはブラウザに負担がかかってしまうようで、
私がDEMOで使った動画では、途中で止まってしまいました。

動画によっては問題が起こらないので、
動画のファイルのエンコード方法などを調整することで、その問題は解決できそうです。

Author Profile

著者近影

NINOMIYA

Webデザイナー兼コーダー出身のフロントエンド開発者です。 UXデザインやチーム開発の効率化など、勉強中です。

SHARE

合わせて読みたい