Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<div id="video1"> <video class="video-player" controls="controls"> <source src="" type="video/mp4"> </video> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#video1 { width: 320px } #video1 > .video-player { width: 100% }
CSS
Autoformát
CSS reset
Až na konci
/** * @constructor */ var VideoRotator = function () { /** @type {VideoRotator} */ var self = this; /** @type {number} */ this.videoIndex = -1; /** @type {null|Element} */ this.videoPlayer = null; /** @type {Array} */ this.videoList = []; /** @type {boolean} */ this.videoAutoplay = false; /** * @returns {number} */ this.counter = function () { if (self.videoIndex < self.videoList.length - 1) { self.videoIndex++; } else { self.videoIndex = 0; } return self.videoIndex; }; /** * @returns {void} */ this.rotateVideo = function () { var videoUrl = self.videoList[self.counter()]; if (self.videoPlayer.src === videoUrl) { console.log('Duplicate video url: ' + videoUrl); } else { self.videoPlayer.src = videoUrl; } if (self.videoAutoplay) { self.videoPlayer.play(); } }; /** * @returns {VideoRotator} */ this.setVideoEndEvent = function () { self.videoPlayer.addEventListener('ended', function () { self.rotateVideo(); }); return self; }; /** * @param {{ video_element: Element, video_list: Array, video_autoplay: boolean * }} config * @returns {boolean} */ this.setConfigData = function (config) { if (config.hasOwnProperty('video_element') && config['video_element'] !== null && typeof config['video_element'] === 'object') { self.videoPlayer = config['video_element']; } else { console.log('Video element not found.'); return false; } if (config.hasOwnProperty('video_list') && config['video_list'].length) { config['video_list'] = config['video_list'].filter(function (item) { return item; }); if (config['video_list'].length < 1) { console.log('Video list is empty.'); return false; } self.videoList = config['video_list']; } else { console.log('Video list is empty.'); return false; } if (config.hasOwnProperty('video_autoplay') && typeof config['video_autoplay'] === 'boolean' && config['video_autoplay'] === true) { self.videoAutoplay = config['video_autoplay']; console.log('Autoplay is enabled.'); } else { console.log('Autoplay is disabled.'); } return true; }; /** * @param {{ video_element: Element, video_list: Array, video_autoplay: boolean * }} config * @returns {void} */ this.init = function (config) { if (typeof config === 'undefined' || !self.setConfigData(config)) { return; } self.setVideoEndEvent().rotateVideo(); }; }; (new VideoRotator()).init({ 'video_element': document.querySelector('#video1 > .video-player'), 'video_list': [ 'http://mirrors.standaloneinstaller.com/video-sample/P6090053.mp4', 'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_2mb.mp4', 'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_2mb.mp4', '', 'http://techslides.com/demos/sample-videos/small.mp4' ], 'video_autoplay': true });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>