スマートフォン(特にiOS)は動画を自動再生してくれないという問題があります。また、動画再生時はフルスクリーンになってしまったり、JavaScriptから操作できないといった問題もあります。 それらを解決してくれるかも知れないのがmobile-videoplayerです。音は出ないですが、上記問題は解決できます。

mobile-videoplayerの使い方

動画の読み込み中…。この辺りでネタバレしているかも?

再生開始しました。スムーズです。

さらに面白いのはスクロールして動画が表示されている時だけ再生してくれる機能です。

見えなくなると再生が停止します。

実際に試しているところです。停止しているのが分かるでしょうか。

種明かしをすると、これは実際には動画ではなくJPEGをつなぎ合わせた画像です。それを動画のように見せています。そのため、読み込みに若干時間がかかったり、音が出ないと言った問題があります。いわば高画質版のアニメーションGIFと言えるかも知れません。

ただ、音が出て欲しくない場合もありますし、用途によっては使いやすいかも知れません。なお動画をmobile-videoplayerで使える画像にコンバートするにはshin1ohno/jani-strip_makerを使うのが良いようです。

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

mobile-videoplayer (scroll) mobile-videoplayer yoheimuta/mobile-videoplayer.js: Web video player for mobile browser, especially for ios safari which is disabled to autoplay mp4