Blog

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

2016.09.13Cat:html5 javascript デザイナー

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

しかし、

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

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

↓作ってみたもの
DEMO

方法

仕組みは、

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

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

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

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ