【javascript】videoタグを使わずスマホで動画を自動再生できるライブラリ

javascript

はじめに

今回やりたかったことは以下
・ページが表示されたら動画を自動再生する
・全画面表示ではなくページに埋め込む形でインライン再生
・スマホ（ios・android）で実装

動画広告のようなイメージでしょうか

videoタグを使えばできると思ったのですが、スマホではautoplayが効きませんでした。
色々試してみたのですがユーザの端末操作(再生ボタンをクリック等)なしでの自動再生は端末の制御でできないようでした。

※スマホで勝手に再生して意図しないパケット使用量の増加を防ぐためのようです

ogv.jsライブラリ

で、調べていると、ogv.jsというライブラリがありました。
中身を見てみるとurlから取得した動画ファイルをデコードして随時canvasに描画していました

あまり理解できていないのですが、こんなの作ってしまうなんてすごいですね・・・

https://github.com/brion/ogv.js/
使い方はgithubからダウンロードして展開すると中にあるogv.jsを読み込めば使用できました

html

<!-- 動画を埋め込む箇所 -->
<div id="video"></div>

<script src="/js/ogvjs-1.1/ogv.js"></script
<script>
var video = document.getElementById("video");
var player = new OGVPlayer();
video.appendChild(player);
player.src = "/path/to/xxx.ogv"; // 動画ファイル
player.muted = true; // ミュート
player.load();
player.play();

css

#video > ogvjs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

その他

> ios + safari
音声ストリームがのっているファイルでは自動再生ができなかった
readmeにそれっぽいこと書いてあったのでsafariの制限なのかも

> android + 標準ブラウザ(4以下)
android5以上では標準がchromeっぽいので自動再生が確認できた。
4以下の標準ブラウザでは動作が確認できなかった・・・
4以下で対応させるなら動画広告とかでも使われてそうに連続画像をcanvasに随時描画する形になるのかなぁ・・・

追記

スマホでの動画インライン自動再生が解禁されるらしい〜iPhone(safari)・Android(chrome) - とりあえずphpとか
ios10、chrome53〜自動再生が標準で可能になるらしい。。。

スマホでの動画インライン自動再生まわりについて調べたことまとめ - とりあえずphpとか
スマホでの動画のインライン再生まわりまとめてみた

以上です