2026-01-20 00:25:55 +03:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Document</title>
|
|
|
|
|
|
2026-01-22 09:50:51 +03:00
|
|
|
<script src="dash.all.min.js"></script>
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/polyfill/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent,Object.entries,Object.values,URL"></script>
|
2026-01-20 00:25:55 +03:00
|
|
|
<script src="https://unpkg.com/plyr@3"></script>
|
|
|
|
|
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.container {
|
|
|
|
|
margin: 50px auto;
|
|
|
|
|
max-width: 1500px;
|
2026-01-22 09:50:51 +03:00
|
|
|
}
|
|
|
|
|
video {
|
|
|
|
|
max-height: 800px;
|
|
|
|
|
}
|
2026-01-20 00:25:55 +03:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<video controls playsinline></video>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
2026-01-22 09:50:51 +03:00
|
|
|
const source = 'http://localhost:3000/test-videotoolbox/manifest.mpd';
|
|
|
|
|
// const source = 'http://localhost:3000/test-nvenc/manifest.mpd';
|
2026-01-20 00:25:55 +03:00
|
|
|
const dash = dashjs.MediaPlayer().create();
|
|
|
|
|
const video = document.querySelector('video');
|
|
|
|
|
dash.initialize(video, source, true);
|
|
|
|
|
|
|
|
|
|
const player = new Plyr(video, {captions: {active: true, update: true}});
|
|
|
|
|
window.player = player;
|
|
|
|
|
window.dash = dash;
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
2026-01-22 09:50:51 +03:00
|
|
|
</html>
|
