ITエンジニア/デザイナ向けにオープンソースを毎日紹介

iPhoneを使ってサイト内で動画を再生しようとすると背景が真っ黒になって動画だけの再生モードになります。動画だけを見せたい場合はこれでもいいですが、一緒にテキストを見せたい時などには不便な表示です。

そこで使ってみたいのがWhitewater Mobile Videoです。音声は出ませんが、動画のインラインでの再生を可能にします。

Whitewater Mobile Videoの使い方

このような表示になっています。まるで画像です。

クリックすると再生開始します。リピート再生です。

JavaScriptと連携して再生や停止、動画の情報を取得できます。

複数の動画を並べて再生もできます。

Whitewater Mobile Videoは動画をCanvasの上に描画しています。そのため音は出ませんが、インラインでの再生が可能です。なんとなく画質の綺麗なアニメーションGIFといった感じで、あまり長くない動画をリピート再生するのが良いかもしれません。

Whitewater Mobile VideoはHTML5/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

Whitewater Mobile Video

samiare/whitewater-mobile-video: An encoding system for playing inline videos on the mobile web.

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2