container = {
const size = width - 10;
const mp4Url = `https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4`;
const previewUrl = `https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg`;
return newVideo({ mp4Url, previewUrl, size });
function newVideo({ mp4Url, previewUrl, size }) {
const video = htl.html`
<video controls crossorigin playsinline poster="${previewUrl}" style="width: ${size}px;">
<source src="${mp4Url}" type="video/mp4" size="${size}">
<!-- Fallback for browsers that don't support the <video> element -->
<a href="${mp4Url}" download>Download</a>
</video>`;
const player = new Plyr(video, {
captions: { active: true }
});
const container = htl.html`<div class="container">${video}</div>`;
container.player = player;
return container;
}
}