スクロールで動画をシーク

スクロールで動画をシークするデモ
MacProのサイトやちょっと前のオキナワーズで使われてる動画をスクロール量で早送り巻き戻しするパララックス技を試してみた。
DEMO

今回は表示速度を少しでも速めるためにjQueryじゃなく生のJavascriptで書いてみた。

document.addEventListener("DOMContentLoaded", init, false);
function init() {
	var video = document.getElementById("myVideo");
	var scrollObj = document.documentElement;
	if (navigator.userAgent.indexOf('WebKit') != -1) scrollObj = document.body;
	var sizeObj = document.documentElement;
	if (video) {
		var duration = 0;
		var targetframe = 0;
		if (navigator.userAgent.indexOf('Firefox') != -1) duration = video.duration;
		video.addEventListener('loadedmetadata', function() {
			duration = video.duration;
		});
		document.addEventListener("scroll", function () {
			if (duration == 0) return;
			var scrollTop = scrollObj.scrollTop;
			var winheight = sizeObj.clientHeight;
			if (scrollTop > 100) video.style.opacity = 1;
			else video.style.opacity = 0.5 + scrollTop/200;
			targetframe = Math.floor(duration*(scrollTop/(10000-winheight))*10)/10;
		}, false);
		setInterval(function () {
			var now = video.currentTime;//console.log(now);
			if (now > targetframe) {
				now -= 1;
				if (now <= targetframe) now = targetframe;
				video.currentTime = now;
			} else if (now < targetframe) {
				now += 1;
				if (now >= targetframe) now = targetframe;
				video.currentTime = now;
			}
		}, 1000 / 10);//10fps
	}
}

ブラウザによるブレもIE8以前を無視したので少なく、生Javascriptの割にシンプルになった。
スクロールの度にシークすると反応が気持ち悪かったのでスクロール時はシーク先の秒数を記憶しておいて、10fpsのインターバルを用意し、この中で先ほど指定したシーク先に近づけるスクリプトを書く事でスムーズなスクロールにしてます。

Tags: ,

トラックバック

コメントを書く