123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542 |
- lb.player = function lbPlayer() {
- var self = this;
- this.upNextTimer;
- this.current;
- this.title;
- this.subtitle;
- this.video;
- this.videoID;
- this.placeholder;
- this.elPlayer = document.getElementById('pl-player');
- this.elVideo = document.getElementById('pl-video');
- this.elTitle = document.getElementById('pl-player-title').getElementsByTagName('h1')[0];
- this.elSubtitle = document.getElementById('pl-player-title').getElementsByTagName('h3')[0];
- this.elPlaceholder = document.getElementById('pl-placeholder');
- this.elSeek = document.getElementById('pl-playback-progress');
- this.elTime = document.getElementById('pl-playback-time');
- this.elRuntime = document.getElementById('pl-runtime');
- this.elLoaded = document.getElementById('pl-playback-loaded');
- this.elProgressBarWrap = document.getElementById('pl-playback-progress-wrap');
- this.elProgressPosition = document.getElementById('pl-playback-position');
- this.elInfoTitle = document.getElementById('pl-info-series');
- this.elInfoSubtitle = document.getElementById('pl-info-episode');
-
-
-
- this.elUpNext = document.getElementById('pl-up-next');
- this.elUpNextWatchAgain = document.getElementById('pl-watch-again');
- this.elUpNextBg = document.getElementById('pl-up-next-bg');
- this.elUpNextImage = document.getElementById('pl-up-next-image');
- this.elUpNextTitle = document.getElementById('pl-up-next-title').getElementsByTagName('h1')[0];
- this.elUpNextSubtitle = document.getElementById('pl-up-next-title').getElementsByTagName('h3')[0];
- this.elUpNextCounter = document.getElementById('pl-up-next-timer');
- this.elUpNextGo = document.getElementById('pl-up-next-go');
- this.elControls = document.getElementById('pl-player-ctrl-wrap');
- this.elControlsPlayback = document.getElementById('pl-playback-ctrls-wrap');
- this.elControlsAudio = document.getElementById('pl-audio-ctrls-wrap');
- this.elControlPlay = document.getElementById('pl-playback-play');
- this.elControlPause = document.getElementById('pl-playback-pause');
- this.elControlVolume = document.getElementById('pl-audio-volume');
- this.elControlMute = document.getElementById('pl-audio-mute');
- this.elControlsNav = document.getElementById('pl-navigation-ctrls-wrap');
- this.elControlNext = document.getElementById('pl-next');
- this.finalScreen = document.getElementById('pl-final-screen');
- this.finalWatchAgain = document.getElementById('pl-final-watch-again');
- this.elVolumeWrap = document.getElementById('pl-volume-wrap');
- this.elVolume = document.getElementById('pl-volume');
- this.elVolumeBar = document.getElementById('pl-volume-bar');
- this.hookListeners();
- this.setCurrent(0);
- };
- lb.player.prototype.setTitle = function (value) {
- this.title = value;
- this.elTitle.innerHTML = this.elInfoTitle.innerHTML = value;
- }
- lb.player.prototype.setSubtitle = function (value) {
- this.subtitle = value;
- this.elSubtitle.innerHTML = this.elInfoSubtitle.innerHTML = value;
- }
- lb.player.prototype.setPlaceholder = function (value) {
- this.placeholder = value;
- this.elPlaceholder.style.backgroundImage = 'url("' + value + '")';
- }
- lb.player.prototype.setVideo = function (value) {
- var self = this;
- this.videoID = value;
- if(this.video) {
- this.video.loadVideoById(value);
- } else {
- this.video = new YT.Player(this.elVideo, {
- height: '768',
- width: '1366',
- videoId: value,
- playerVars: {
- controls: 0,
- disablekb: 1,
- enablejsapi: 1,
- loop: 0,
- modestbranding: 1,
- rel: 0,
- start: 0,
- showinfo: 0,
- iv_load_policy: 3,
- cc_load_policy: 1
- },
- events: {
- 'onReady': self.onPlayerReady.bind(this),
- 'onStateChange': self.onPlayerStateChange.bind(this)
- }
- });
- }
- }
- lb.player.prototype.changeInfo = function (title, subtitle, placeholder, video) {
- this.setTitle(title);
- this.setSubtitle(subtitle);
- this.setPlaceholder(placeholder);
- this.setVideo(video);
- }
- lb.player.prototype.showTime = function () {
- setInterval((function() {
- var remaining = this.video.getDuration() - this.video.getCurrentTime(),
- s = Math.floor(remaining) % 60,
- m = Math.floor(remaining / 60) % 60,
- h = Math.floor((remaining / 60) / 60) % 60;
- this.elTime.innerHTML = (h < 10 ? '' + h : h) + ':' + (m < 10 ? '0' + m : m) + ':' + (s < 10 ? '0' + s : s);
- }).bind(this), 100);
- }
- lb.player.prototype.showLoaded = function () {
- setInterval((function() {
- this.elLoaded.style.width = this.video.getVideoLoadedFraction() * 100 + '%';
- }).bind(this), 100);
- }
- lb.player.prototype.showProgressPosition = function () {
- setInterval((function() {
- if(this.isSeeking) return;
- this.elProgressPosition.style.width = (this.video.getCurrentTime() / this.video.getDuration()) * 100 + '%';
- }).bind(this), 100);
- }
- lb.player.prototype.setCurrent = function(current) {
- clearInterval(this.upNextTimer);
- this.elPlayer.classList.add('loading');
- this.current = current;
- this.changeInfo(
- lb.videos[current].title,
- lb.videos[current].subtitle,
- lb.videos[current].placeholder,
- lb.videos[current].video);
- this.elUpNext.style.display = 'none';
- this.finalWatchAgain.style.backgroundImage =
- this.elUpNextWatchAgain.style.backgroundImage = 'url("' + lb.videos[current].thumb480 + '")';
- this.setNext();
- if(this.current === lb.videos.length - 1) {
- this.finalWatchAgain.style.backgroundImage = 'url("' + lb.videos[0].thumb480 + '")';
- }
- }
- lb.player.prototype.hookListeners = function () {
- this.elPlayer.addEventListener('contextmenu', function(e){ e.preventDefault() });
- this.elControlPlay.addEventListener('click', this.onPlayClick.bind(this));
- this.elControlPause.addEventListener('click', this.onPauseClick.bind(this));
- this.elControlVolume.addEventListener('click', this.onVolumeClick.bind(this));
- this.elControlMute.addEventListener('click', this.onMuteClick.bind(this));
-
-
- this.elUpNextGo.addEventListener('click', this.onNextClick.bind(this));
- this.elUpNextWatchAgain.addEventListener('click', this.onWatchAgainClick.bind(this));
- this.finalWatchAgain.addEventListener('click', this.onWatchAgainClick.bind(this));
- this.elControlsAudio.addEventListener('mouseenter', this.onVolumeControlsHover.bind(this));
- this.elControlsAudio.addEventListener('mouseleave', this.onVolumeControlsLeave.bind(this));
- this.elControlsNav.addEventListener('mouseenter', this.onNextHover.bind(this));
- this.elControlsNav.addEventListener('mouseleave', this.onNextLeave.bind(this));
- this.elSeek.addEventListener('mousedown', this.startSeek.bind(this));
- document.addEventListener('mouseup', this.stopSeek.bind(this));
- this.elVolume.addEventListener('mousedown', this.startVolumeChange.bind(this));
- document.addEventListener('mouseup', this.stopVolumeChange.bind(this));
- this.elPlayer.addEventListener('mousemove', this.showControls.bind(this));
- window.addEventListener('keypress', (function(e) {
- var k = e.keyCode || e.which;
- if(k === 0 || k === 32) {
- if(this.video.getPlayerState() <= 0) return;
- if(this.video.getPlayerState() === 1) {
- this.onPauseClick();
- } else {
- this.onPlayClick();
- }
- }
- }).bind(this));
-
- window.addEventListener('keydown', (function(e) {
- var k = e.keyCode || e.which;
-
- if (k == '38')
- this.changeVolumeDelta(+10);
- else if (k == '40')
- this.changeVolumeDelta(-10);
-
- else if (k == '37')
- this.seekTo(-10);
- else if (k == '39')
- this.seekTo(+10);
- }).bind(this));
- document.getElementById('pl-fs').addEventListener('click', (function() {
- var elem = this.elPlayer;
- if (elem.requestFullscreen) {
- elem.requestFullscreen();
- } else if (elem.msRequestFullscreen) {
- elem.msRequestFullscreen();
- } else if (elem.mozRequestFullScreen) {
- elem.mozRequestFullScreen();
- } else if (elem.webkitRequestFullscreen) {
- elem.webkitRequestFullscreen();
- }
- document.getElementById('pl-fs-wrap').classList.add('fs');
- }).bind(this));
- document.getElementById('pl-fs-ex').addEventListener('click', (function(){
- if (document.exitFullscreen) {
- document.exitFullscreen();
- } else if (document.msExitFullscreen) {
- document.msExitFullscreen();
- } else if (document.mozCancelFullScreen) {
- document.mozCancelFullScreen();
- } else if (document.webkitExitFullscreen) {
- document.webkitExitFullscreen();
- }
- document.getElementById('pl-fs-wrap').classList.remove('fs');
- }).bind(this));
- }
- lb.player.prototype.onPlayerReady = function () {
- this.video.playVideo();
- this.showTime();
- this.showLoaded();
- this.showProgressPosition();
- }
- lb.player.prototype.onPlayerStateChange = function (e) {
- switch(e.data) {
- case -1:
- break;
- case 0:
- this.onPause.call(this);
- this.onEnded.call(this);
- break;
- case 1:
- this.onPlay.call(this);
- break;
- case 2:
- this.onPause.call(this);
- break;
- case 3:
- break;
- case 5:
- break;
- }
- }
- lb.player.prototype.onPlay = function () {
- this.elPlayer.classList.remove('loading');
- this.elControlsPlayback.classList.add('pause');
- this.elControlsPlayback.classList.remove('play');
- this.elVolumeBar.style.height = this.video.getVolume() + '%';
- this.showControls();
- }
- lb.player.prototype.onPause = function () {
- this.elControlsPlayback.classList.add('play');
- this.elControlsPlayback.classList.remove('pause');
- }
- lb.player.prototype.onEnded = function () {
- if(this.current < lb.videos.length - 1) {
- this.elUpNext.style.display = 'block';
- var time = 15;
- this.upNextTimer = setInterval((function() {
- if(time > 0) {
- time--;
- this.elUpNextCounter.innerHTML = time + ' segundos';
- } else {
- this.onNextClick(this);
- this.elUpNextCounter.innerHTML = '15 segundos';
- }
- }).bind(this), 333);
- } else {
- this.finalScreen.style.display = 'block';
- }
- }
- lb.player.prototype.onPlayClick = function () {
- this.video.playVideo();
- }
- lb.player.prototype.onPauseClick = function () {
- this.video.pauseVideo();
- }
- lb.player.prototype.onVolumeClick = function () {
- this.video.mute();
- this.elControlsAudio.classList.add('mute');
- this.elControlsAudio.classList.remove('volume');
- }
- lb.player.prototype.onMuteClick = function () {
- this.video.unMute();
- this.elControlsAudio.classList.add('volume');
- this.elControlsAudio.classList.remove('mute');
- }
- lb.player.prototype.onNextClick = function () {
- if(this.current < lb.videos.length - 1) {
- this.setCurrent(this.current + 1);
- } else {
- this.video.pauseVideo();
- this.finalScreen.style.display = 'block';
- }
- }
- lb.player.prototype.onWatchAgainClick = function () {
- this.finalScreen.style.display = 'none';
- if(this.current === lb.videos.length - 1) {
- this.setCurrent(0);
- } else {
- this.setCurrent(this.current);
- }
- }
- lb.player.prototype.hideVolumeWrap = function () {
- this.elVolumeWrap.style.display = 'none';
- this.elVolumeWrap.removeEventListener('transitionend', this.hideVolumeWrapBind)
- }
- lb.player.prototype.onVolumeControlsHover = function () {
- this.hideSeekBar();
- this.elVolumeWrap.removeEventListener('transitionend', this.hideVolumeWrapBind);
- this.elVolumeWrap.style.display = 'block';
- setTimeout((function(){
- this.elVolumeWrap.style.opacity = 1;
- }).bind(this), 10);
- }
- lb.player.prototype.onVolumeControlsLeave = function () {
- this.showSeekBar();
- this.hideVolumeWrapBind = (function() {
- this.elVolumeWrap.style.display = 'none';
- this.elVolumeWrap.removeEventListener('transitionend', this.hideVolumeWrapBind);
- }).bind(this);
- this.elVolumeWrap.addEventListener('transitionend', this.hideVolumeWrapBind);
- var timer = setInterval((function() {
- if(this.isChangingVolume) {
- return;
- }
- this.elVolumeWrap.style.opacity = 0;
- clearInterval(timer);
- }).bind(this),10);
- }
- lb.player.prototype.hideNext = function () {
-
-
- }
- lb.player.prototype.onNextHover = function () {
- this.hideSeekBar();
-
-
- setTimeout((function(){
-
- }).bind(this),10);
- }
- lb.player.prototype.onNextLeave = function () {
- this.showSeekBar();
- this.hideNextBind = (function() {
-
-
- }).bind(this);
-
-
- }
- lb.player.prototype.startSeek = function (e) {
- this.isSeeking = true;
- this.bindSeek = this.seek.bind(this);
- this.bindSeek(e);
- this.elSeek.addEventListener('mousemove', this.bindSeek);
- }
- lb.player.prototype.stopSeek = function (e) {
- if(!this.isSeeking) return;
- var layerX = e.clientX - this.elSeek.getBoundingClientRect().left,
- seconds = (layerX / this.elSeek.clientWidth) * this.video.getDuration();
- seconds = (seconds < 0 ? 0 : seconds > this.video.getDuration()-1 ? this.video.getDuration()-1 : seconds);
- this.video.seekTo(seconds, true);
- this.isSeeking = false;
- this.elSeek.removeEventListener('mousemove', this.bindSeek);
- }
- lb.player.prototype.seek = function(e) {
- var layerX = e.clientX - this.elSeek.getBoundingClientRect().left,
- seconds = (layerX / this.elSeek.clientWidth) * this.video.getDuration(),
- progress = (seconds / this.video.getDuration()) * 100;
- progress = (progress < 0 ? 0 : progress > 100 ? 100 : progress);
- seconds = (seconds < 0 ? 0 : seconds > this.video.getDuration() ? this.video.getDuration() : seconds);
- this.video.seekTo(seconds, false);
- this.elProgressPosition.style.width = progress + '%';
- }
- lb.player.prototype.seekTo = function(deltaSeconds) {
- var currSeconds = this.video.getCurrentTime();
- this.video.seekTo(currSeconds + deltaSeconds, true);
- }
- lb.player.prototype.startVolumeChange = function(e) {
- this.isChangingVolume = true;
- this.bindVolumeChange = this.volumeChange.bind(this);
- this.bindVolumeChange(e);
- this.elVolume.addEventListener('mousemove', this.bindVolumeChange);
- }
- lb.player.prototype.stopVolumeChange = function(e) {
- if(!this.isChangingVolume) return;
- var layerY = e.clientY - this.elVolume.getBoundingClientRect().top,
- volume = 100 - (layerY / this.elVolume.clientHeight) * 100;
- this.isChangingVolume = false;
- this.elVolume.removeEventListener('mousemove', this.bindVolumeChange);
- }
- lb.player.prototype.volumeChange = function(e) {
- if(window.YT === undefined) return;
- var layerY = e.clientY - this.elVolume.getBoundingClientRect().top,
- volume = 100 - (layerY / this.elVolume.clientHeight) * 100,
- delta = volume - this.video.getVolume();
- this.changeVolumeDelta(delta);
- };
- lb.player.prototype.changeVolumeDelta = function(deltaVolume) {
- var currVolume = this.video.getVolume();
- var finalVolume = currVolume + deltaVolume;
- finalVolume = (finalVolume < 0 ? 0 : finalVolume > 100 ? 100 : finalVolume);
- this.video.setVolume(finalVolume);
- this.elVolumeBar.style.height = finalVolume + '%';
- }
- lb.player.prototype.hideSeekBar = function () {
- this.elProgressBarWrap.classList.add('hide');
- }
- lb.player.prototype.showSeekBar = function () {
- this.elProgressBarWrap.classList.remove('hide');
- }
- lb.player.prototype.hideControls = function () {
- this.controlsHideBind = (function(){
- document.getElementById('exit-button').style.display = 'none';
- document.getElementById('exit-button').addEventListener('transitionend', this.controlsHideBind);
- this.elControls.style.display = 'none';
- this.elControls.addEventListener('transitionend', this.controlsHideBind);
- }).bind(this);
- document.getElementById('exit-button').addEventListener('transitionend', this.controlsHideBind);
- document.getElementById('exit-button').classList.add('hide');
- this.elControls.addEventListener('transitionend', this.controlsHideBind);
- this.elControls.classList.add('hide');
- }
- lb.player.prototype.showControls = function () {
- clearTimeout(this.controlsTimer);
- document.getElementById('exit-button').style.display = 'block';
- document.getElementById('exit-button').removeEventListener('transitionend', this.controlsHideBind);
- document.getElementById('exit-button').classList.remove('hide');
- this.elControls.style.display = 'block';
- this.elControls.removeEventListener('transitionend', this.controlsHideBind);
- this.elControls.classList.remove('hide');
- this.controlsTimer = setTimeout(this.hideControls.bind(this), 3000);
- }
|