52 lines
1.3 KiB
JavaScript
52 lines
1.3 KiB
JavaScript
(function () {
|
|
'use strict';
|
|
|
|
function bindVideoTile(tile) {
|
|
var video = tile.querySelector('.video-tile-player');
|
|
var playBtn = tile.querySelector('.video-tile-play');
|
|
|
|
if (!video || !playBtn) {
|
|
return;
|
|
}
|
|
|
|
playBtn.addEventListener('click', function () {
|
|
if (video.paused) {
|
|
video.play();
|
|
playBtn.innerHTML = '<i class="lni-pause"></i>';
|
|
tile.classList.remove('is-paused');
|
|
} else {
|
|
video.pause();
|
|
playBtn.innerHTML = '<i class="lni-play"></i>';
|
|
tile.classList.add('is-paused');
|
|
}
|
|
});
|
|
|
|
video.addEventListener('ended', function () {
|
|
video.pause();
|
|
playBtn.innerHTML = '<i class="lni-play"></i>';
|
|
tile.classList.add('is-paused');
|
|
});
|
|
}
|
|
|
|
function initVideoTiles() {
|
|
var tiles = document.querySelectorAll('[data-video-tile]');
|
|
|
|
tiles.forEach(function (tile) {
|
|
if (tile.getAttribute('data-video-bound') === 'true') {
|
|
return;
|
|
}
|
|
|
|
tile.setAttribute('data-video-bound', 'true');
|
|
bindVideoTile(tile);
|
|
});
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initVideoTiles);
|
|
} else {
|
|
initVideoTiles();
|
|
}
|
|
|
|
document.addEventListener('site-config-loaded', initVideoTiles);
|
|
})();
|