Published
Edited
Dec 15, 2021
1 star
Insert cell
Insert cell
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`;
// const previewUrl = ``;
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;
}
}
Insert cell
Plyr = {
const v = "3.6.9";
const cssUrl = await require.resolve(`plyr@${v}/dist/plyr.css`);
const link = htl.html`<link rel="stylesheet" href="${cssUrl}" />`;
document.head.appendChild(link);
invalidation.then(
() => link.parentElement && link.parentElement.removeChild(link)
);
return await require(`plyr@${v}`);
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more