iPhoneで動画をブラウザ内で再生する

iPhoneでvideoを使用する場合、autoplayの指定が効かない、再生時はフルスクリーン表示になるなど色々な制約があります。
今回は、インラインで動画を自動再生させる方法がないかを調べてみました。
確認はiOS9で行っています。

自動再生

まずは自動再生することができるかを試してみます。
autoplayの指定と、動画読み込み後にplay()メソッドを実行してみます。

HTML

<div id="video-area"></div>

CSS

video {
	width: 320px;
	height: 180px;
}

JavaScript

// videoの埋め込み
var video = document.createElement('video');
video.autoplay = true;
document.getElementById('video-area').appendChild(video);

// 動画のメタデータ読み込み後
video.addEventListener('loadedmetadata', function() {
	video.play();
});

// 動画読み込み
video.src = 'movie.mp4';
video.load();

実機で確認してみたところ、自動再生はされませんでした。
自動再生のデモページ

ユーザー操作のイベントが発生しないと、動画を再生させることができないようです。
touchstartで動画を再生するようにしてみます。

JavaScript

// videoの埋め込み
var video = document.createElement('video');
document.getElementById('video-area').appendChild(video);

// touchstartでvideoを再生
window.addEventListener('touchstart', function videoPlay() {
	video.play();
	// イベントの削除
	this.removeEventListener('touchstart', videoPlay);
});

// 動画読み込み
video.src = 'movie.mp4';
video.load();

画面をタッチすることで、動画を再生することができました。
自動再生のデモページ2

インラインでの動画再生

上記サンプルで画面をタッチ後に動画を再生するようにできましたが、フルスクリーン表示で再生されてしまいます。
通常はインラインでの再生はできませんが、再生ではなくcurrentTimeで再生位置を動かすことで、インラインで再生しているように見せることができます。

JavaScript

// videoの埋め込み
var video = document.createElement('video');
document.getElementById('video-area').appendChild(video);
// 動画のビットレート
var bitrate = 25;

// 動画のメタデータ読み込み後
video.addEventListener('loadedmetadata', function() {
	var elapsedTime = 0; // 動画の経過時間
	var lastTime = new Date().getTime(); // 前回のgetTime()
	setInterval(function() {
		var currentTime = new Date().getTime(); // 現在のgetTime()
		var df = currentTime - lastTime; // 前回と現在のgetTime()の差
		elapsedTime += df / 1000; // ミリ秒単位を秒単位にして、経過時間に追加
		video.currentTime = elapsedTime; // videoに経過時間を反映
		lastTime = currentTime; // 前回のgetTime()を更新
		// 経過時間が動画の長さ以上になった時、経過時間を0に戻す
		if(elapsedTime >= video.duration) {
			elapsedTime = 0;
		}
	}, 1000 / bitrate);
});

// 動画読み込み
video.src = 'movie.mp4';
video.load();

setIntervalとcurrentTimeを使って、再生位置を細かく移動させるようにしています。
インラインで再生のデモページ
ただ実機で確認してみると、videoの中央に再生アイコンが残ったままになってしまいます。

currentTimeで再生位置を動すのと同時に、canvasのdrawImage()メソッドを使って、videoの再生位置のフレームを描画するようにしてみます。

HTML

<div id="video-area"></div>
<div id="canvas-area"></div>

CSS

canvas {
	width: 320px;
	height: 180px;
}

JavaScript

// videoの埋め込み
var video = document.createElement('video');
document.getElementById('video-area').appendChild(video);
// 動画の表示サイズ
var videoWidth = 320;
var videoHeight = 180;
 // 動画のビットレート
var bitrate = 25;

// canvasの埋め込み
var canvas = document.createElement('canvas');
document.getElementById('canvas-area').appendChild(canvas);

// 動画のメタデータ読み込み後
video.addEventListener('loadedmetadata', function() {
	// canvasの準備
	if(!canvas || !canvas.getContext) return false;
	var ctx = canvas.getContext('2d');

	var elapsedTime = 0; // 動画の経過時間
	var lastTime = new Date().getTime(); // 前回のgetTime()
	setInterval(function() {
		var currentTime = new Date().getTime(); // 現在のgetTime()
		var df = currentTime - lastTime; // 前回と現在のgetTime()の差
		elapsedTime += df / 1000; // ミリ秒単位を秒単位にして、経過時間に追加
		video.currentTime = elapsedTime; // videoに経過時間を反映
		lastTime = currentTime; // 前回のgetTime()を更新
		// 経過時間が動画の長さ以上になった時、経過時間を0に戻す
		if(elapsedTime >= video.duration) {
			elapsedTime = 0;
		}
		// canvasの描画
		ctx.drawImage(video, 0, 0, videoWidth, videoHeight);
	}, 1000 / bitrate);
});

// 動画読み込み
video.src = 'movie.mp4';
video.load();

インラインで再生しているように描画することができました。
インラインで再生のデモページ2
ただし、videoの内容をcanvasで描画しているだけなので、音声は再生されません。
　

【参考サイト】

• videoタグの動画をcanvasを使って表示する | スターフィールド株式会社
• iPhone Safariで動画をインライン再生する方法 – Qiita