Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// LOAD needed player
<script async src="https://content.jwplatform.com/libraries/{{YOUR-PLAYER-ID}}.js"></script>
document.addEventListener('DOMContentLoaded', event => {
// workaround to autoplay video
if (document.querySelector('.top-splash .widget__video')) {
document.querySelector('.top-splash .widget__image').click();
}
});
function playlists() {
let widgets = document.querySelectorAll('.playlist-posts .widget:not(.extended)');
widgets.forEach(function(widget) {
let playlistBody = document.createElement('div');
let lead = widget.querySelector('.widget__head');
widget.classList.add('extended');
playlistBody.classList.add('playlist-body');
widget.querySelector('#col-center').appendChild(playlistBody);
if (!lead) {
widget.querySelectorAll('.widget__body')[1]
.insertAdjacentHTML('beforebegin', '<div class="widget__head"><div class="widget__video crop-16x9 clearfix"></div></div>');
} else if (lead && !lead.querySelector('.widget__video')) {
let videoHead = document.createRange().createContextualFragment('<div class="widget__video crop-16x9 clearfix" style="display:none"></div>');
lead.appendChild(videoHead);
}
let video = widget.querySelector('.widget__video');
let image = widget.querySelector('.widget__image');
let rebelltItems = widget.querySelectorAll('.rebellt-item');
rebelltItems.forEach((rebelltItem, index) => {
let videoUrl;
let videoPlayer = document.createElement('div');
let listicUrl = rebelltItem.getAttribute('data-href');
let videoID = rebelltItem.getAttribute('data-video-id');
//jwp streaming doesn't work in some mobile devises
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ) {
videoUrl = 'https://content.jwplatform.com/videos/'+videoID+'.mp4';
} else {
videoUrl = 'https://content.jwplatform.com/manifests/'+videoID+'.m3u8';
}
videoPlayer.id = 'jwPlayer-' + videoID;
if (videoID) {
if( index === 0 && !image ) {
video.style.display = "block";
video.appendChild(videoPlayer);
let playerInstance = jwplayer(videoPlayer.id);
playerInstance.setup({
file: videoUrl,
mediaid: videoID,
autostart: false,
image: `https://cdn.jwplayer.com/v2/media/${videoID}/poster.jpg`
});
}
rebelltItem.onclick = () => {
if (widget.querySelector('.jwplayer')) {
widget.querySelector('.jwplayer').remove();
}
if (listicUrl.length > 0 && listicUrl) {
window.history.pushState("", "", listicUrl);
}
let content = rebelltItem.cloneNode(true);
if (content.querySelector('.media-photo-preview') ) {
content.querySelector('.media-photo-preview').remove();
} else if ( content.querySelector('.rm-shortcode') ) {
content.querySelector('.rm-shortcode').remove();
}
widget.querySelector('.playlist-body').innerHTML = "";
widget.querySelector('.playlist-body').appendChild(content);
image.classList.add('hidden');
video.style.display = 'block';
video.appendChild(videoPlayer);
let playerInstance = jwplayer(videoPlayer.id);
playerInstance.setup({
file: videoUrl,
mediaid: videoID
});
if (window.innerWidth < 1024) {
window.scrollTo({ top: widget.offsetTop, behavior: 'smooth' });
}
}
}
});
});
};
playlists();
{{require}}(['core/event_dispatcher'], function(eventDispatcher) {
eventDispatcher.on('load-more:sync', () => playlists());
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.