スクロールで動画をシーク
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: JavaScript, 動画