document.write('');
document.write('');
document.write('');
var LgpVideo = function(id, options) {
var defaultOptions = { auto: 0, loop: 0, soundOff: 0, fullOff: 0 };
if(typeof options !== 'undefined') {
for(var key in options) {
defaultOptions[key] = options[key];
}
}
options = defaultOptions;
var self = this;
self.id = id;
self.container = document.getElementById('lgp-video-' + id);
self.startButton = self.container.getElementsByClassName('lgpv-start-button')[0];
self.video = self.container.getElementsByTagName('video')[0];
if (typeof onPlayVideo == 'function') self.video.addEventListener('play', onPlayVideo);
self.control = self.container.getElementsByClassName('lgpv-control-bar')[0];
self.playButton = self.control.getElementsByClassName('lgpv-parts-play')[0];
self.muteButton = self.control.getElementsByClassName('lgpv-parts-volume')[0];
self.fullScreenButton = self.control.getElementsByClassName('lgpv-parts-full-screen')[0];
self.seekBar = self.control.getElementsByClassName('lgpv-parts-seek-bar')[0];
self.seekThumb = self.seekBar.getElementsByClassName('lgpv-progress-thumb')[0];
self.volumeBar = self.control.getElementsByClassName('lgpv-parts-volume-bar')[0];
self.volumeThumb = self.volumeBar.getElementsByClassName('lgpv-progress-thumb')[0];
self.timeView = self.control.getElementsByClassName('lgpv-parts-time')[0];
self.startButton.addEventListener('click', function() {
start();
});
// オプション 自動再生
if (options.auto) {
self.startButton.style.display = 'none';
start();
}
function start() {
self.startButton.style.display = 'none';
self.container.addEventListener('mouseover', function() {
self.control.style.display = 'flex';
});
self.container.addEventListener('mouseout', function() {
self.control.style.display = 'none';
});
self.playButton.addEventListener('click', function() {
if (self.video.paused == true) {
self.video.play();
self.playButton.classList.remove('lgpv-icon-play');
self.playButton.classList.add('lgpv-icon-pause');
} else {
self.video.pause();
self.playButton.classList.remove('lgpv-icon-pause');
self.playButton.classList.add('lgpv-icon-play');
}
});
self.video.addEventListener('click', function() {
triggerEvent(self.playButton, 'click');
});
self.muteButton.addEventListener('click', function() {
if (self.video.muted == false) {
self.video.muted = true;
self.muteButton.classList.remove('lgpv-icon-volume');
self.muteButton.classList.add('lgpv-icon-volume-off');
} else {
self.video.muted = false;
self.muteButton.classList.remove('lgpv-icon-volume-off');
self.muteButton.classList.add('lgpv-icon-volume');
}
});
self.fullScreenButton.addEventListener('click', function() {
if (self.video.requestFullscreen != null) {
self.video.requestFullscreen();
} else if (self.video.mozRequestFullScreen != null) {
self.video.mozRequestFullScreen(); // Firefox
} else if (self.video.msRequestFullscreen != null) {
self.video.msRequestFullscreen();
} else if (self.video.webkitRequestFullscreen != null) {
self.video.webkitRequestFullscreen(); // Chrome and Safari
}
});
self.video.addEventListener('timeupdate', function() {
var value = Math.round(((100 / self.video.duration) * self.video.currentTime) * 100) / 100;
self.seekThumb.parentNode.style.width = value + '%';
self.timeView.innerHTML = secondToTimeFormat(self.video.currentTime);
});
self.video.addEventListener('volumechange', function() {
var value = Math.round(((100 / 1) * self.video.volume) * 100) / 100;
self.volumeThumb.parentNode.style.width = value + '%';
});
self.video.addEventListener('ended', function() {
// オプション ループ
if (options.loop) {
wait(1000, function () {
self.video.play();
});
}
});
self.drag = null;
self.dragX = null;
self.seekThumb.addEventListener('mousedown', thumbMousedown, false);
self.volumeThumb.addEventListener('mousedown', thumbMousedown, false);
self.seekBar.addEventListener('click', barClick, false);
self.volumeBar.addEventListener('click', barClick, false);
function thumbMousedown(event) {
self.drag = this;
self.dragX = event.pageX - this.offsetLeft;
document.body.addEventListener('mousemove', thumbMousemove, false);
}
function thumbMousemove(event) {
event.preventDefault();
var max = self.drag.parentNode.parentNode.clientWidth;
var x = event.pageX - self.dragX;
if (x > max) {
x = max;
}
if (x < 0) {
x = 0;
}
self.drag.parentNode.style.width = parseInt(x / max * 100, 10) + "%";
// 動画
if ((' ' + self.drag.className + ' ').replace(/[\n\t]/g, ' ').indexOf('seek-thumb') !== -1) {
var duration = self.video.duration * (x / max);
if (duration > self.video.duration) {
duration = self.video.duration;
}
if (duration < 0) {
duration = 0;
}
self.video.currentTime = duration;
}
// 音声
if ((' ' + self.drag.className + ' ').replace(/[\n\t]/g, ' ').indexOf('volume-thumb') !== -1) {
var volume = 1 * (x / max);
if (volume > self.video.duration) {
volume = self.video.volume;
}
if (volume < 0) {
volume = 0;
}
self.video.volume = volume;
}
document.body.addEventListener('mouseup', thumbMouseup, false);
}
function thumbMouseup(event) {
document.body.removeEventListener('mousemove', thumbMousemove, false);
document.body.removeEventListener('mouseup', thumbMouseup, false);
}
function barClick (event) {
var max = this.clientWidth;
var x = event.pageX - this.getBoundingClientRect().left;
// 動画
if ((' ' + this.className + ' ').replace(/[\n\t]/g, ' ').indexOf('seek-bar') !== -1) {
var duration = self.video.duration * (x / max);
if (duration > self.video.duration) {
duration = self.video.duration;
}
if (duration < 0) {
duration = 0;
}
self.video.currentTime = duration;
}
// 音声
if ((' ' + this.className + ' ').replace(/[\n\t]/g, ' ').indexOf('volume-bar') !== -1) {
var volume = 1 * (x / max);
if (volume > self.video.duration) {
volume = self.video.volume;
}
if (volume < 0) {
volume = 0;
}
self.video.volume = volume;
}
}
// デフォルトボリューム
self.video.volume = 0.5;
// オプション 音声OFF
if (options.soundOff) {
triggerEvent(self.muteButton, 'click');
}
// オプション フルスクリーンボタンOFF
if (options.fullOff) {
self.fullScreenButton.style.display = 'none';
}
// ボリューム変更発火
triggerEvent(self.video, 'volumechange');
// 再生ボタン発火
triggerEvent(self.playButton, 'click');
}
function triggerEvent(element, event) {
if (document.createEvent) {
// IE以外
var evt = document.createEvent("HTMLEvents");
evt.initEvent(event, true, true ); // event type, bubbling, cancelable
return element.dispatchEvent(evt);
} else {
// IE
var evt = document.createEventObject();
return element.fireEvent("on"+event, evt)
}
}
function secondToTimeFormat (second) {
return ('00' + Math.floor(second / 60)).slice(-2) + ':' + ('00' + Math.floor(second % 60)).slice(-2);
}
function wait(ms, callback) {
setTimeout(callback, ms);
}
};
;
// document.write遅延対策
(function () {
if (document.getElementById('lgp-video-12243') == null) {
setTimeout(arguments.callee, 500);
} else {
new LgpVideo(12243, {auto: 1, loop: 1, soundOff: 1});
}
})()