← Cloudflare Stream / stream / examples

Shaka Player

Сначала создайте элемент video и с помощью атрибута poster задайте изображение для предварительного просмотра. См. Отображение миниатюр с инструкциями по созданию миниатюры с помощью Cloudflare Stream.

<video
	id="video"
	width="640"
	poster="https://customer-f33zs165nr7gyfy4.cloudflarestream.com/6b9e68b07dfee8cc2d116e4c51d6a957/thumbnails/thumbnail.jpg"
	controls
	autoplay
></video>

Затем прослушивайте DOMContentLoaded событие, создайте новый экземпляр Shaka Player и загрузите URI манифеста.

// Replace the manifest URI with an HLS or DASH manifest from Cloudflare Stream
const manifestUri =
	'https://customer-f33zs165nr7gyfy4.cloudflarestream.com/6b9e68b07dfee8cc2d116e4c51d6a957/manifest/video.mpd';

document.addEventListener('DOMContentLoaded', () => {
	const video = document.getElementById('video');
  const player = new shaka.Player(video);
	await player.load(manifestUri);
});

См. Документация Shaka Player ↗, где это описано подробнее.