読者です 読者をやめる 読者になる 読者になる

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

javascript

はじめに

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

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

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に随時描画する形になるのかなぁ・・・