Для работы с видеоплеером на веб-странице вы можете использовать HTML5 VideoPlayer API. Она предоставляет основные функции для воспроизведения видео, управления его состоянием и отображения элементов управления. Вот пример использования:
```html
<video id="myVideo" controls>
<source src="video.mp4" type="video/mp4">
</video>
<script>
var video = document.getElementById("myVideo");
function playVideo() {
video.play();
}
function pauseVideo() {
video.pause();
}
function seekVideo(time) {
video.currentTime = time;
}
</script>
```
При использовании HTML5 VideoPlayer API вы также можете добавить свои собственные элементы управления и логику воспроизведения, чтобы создать более настраиваемый видеоплеер.
Если вам нужно добавить сезоны и серии к видео контенту, вы можете использовать сторонние библиотеки, такие как Video.js или Plyr. Они предоставляют более продвинутые функции и элементы управления для видеоплеера. Вот примеры использования этих библиотек:
Video.js:
```html
<video id="myVideo" class="video-js vjs-default-skin" controls>
<source src="video.mp4" type="video/mp4">
</video>
<script src="https://vjs.zencdn.net/7.15.0/video.min.js"></script>
<link href="https://vjs.zencdn.net/7.15.0/video-js.min.css" rel="stylesheet"/>
<script>
var player = videojs("myVideo", { /* настройки плеера */ });
player.playlist([
{ sources: [{ src: 'video1.mp4', type: 'video/mp4' }], poster: 'poster1.jpg', title: 'Видео 1' },
{ sources: [{ src: 'video2.mp4', type: 'video/mp4' }], poster: 'poster2.jpg', title: 'Видео 2' },
{ sources: [{ src: 'video3.mp4', type: 'video/mp4' }], poster: 'poster3.jpg', title: 'Видео 3' },
]);
player.playlist.autoadvance(0); // Автовоспроизведение следующего видео
</script>
```
Plyr:
```html
<div id="myPlayer" class="plyr__video-embed">
<iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe>
</div>
<script src="https://cdn.plyr.io/3.6.7/plyr.polyfilled.js"></script>
<link href="https://cdn.plyr.io/3.6.7/plyr.css" rel="stylesheet"/>
<script>
const player = new Plyr('#myPlayer', { /* настройки плеера */ });
</script>
```
У каждой из этих библиотек есть обширная документация, в которой вы можете найти больше примеров использования и настроек.