Каким образом создать свой полностью стилизованный видео плеер? Насколько можно разгуляться с либой video.js?
Озадачился созданием собственного видео плеера со своим дизайном. Хочу узнать как это работает, обязательно ли использовать video.js библиотеку? Все что я нагуглил и выпытал у чат гпт - так это то что с ней можно сделать больше функционала и никакой конкретики.
Так вот, как сделать свой стилизованный видео плеер со своим функционалом? Как стилизуется плеер в video.js?
Необходимо просто применять новые стили к классам которые можно достать из панели разработчика?
Или же можно создать свой интерфейс с полного нуля, использовать свои иконки, свои стили и классы, сверстать так сказать по обычному?
Я, походу, просто глупый и информации даже в документации не очень много, т.е. там про стилизацию только "зайдите в код элемента, возьмите класс кнопки паузы и напишите в css стили к классу и примените !important"
Дополнительно:
В документации Video.js есть подробная информация по кастомизации плеера. Нужно читать документацию, а не использовать всякие ваши новомодные ЧатГПТ... Учитесь думать головой!
https://videojs.com/getting-started/#customize
- Отлично, там написано буквально "Использование Video.js прямо из коробки — это хорошо, но мы считаем, что лучше сделать его самостоятельно. Плагины и скины позволяют полностью настроить ваш плеер."
И ниже написано как сменить одну дефолтную тему на другую настроенную заранее тему.
Мне же нужна полностью своя тема, свой интерфейс. Однако как я и написал:
там про стилизацию только "зайдите в код элемента, возьмите класс кнопки паузы и напишите в css стили к классу и примените !important"
Документацию я читал, она не огромная чтобы там заблудиться) И про стилизацию буквально только что нужно залезть, глянуть классы и применить к ним стили.
Не думаю что с таким сильно разгуляешься, но там ни слова про то что можно добавить свою кнопку, со своей собственной иконкой и добавить ей функционал какой-либо ( ну либо же я упустил этот момент ) - Ivan, да, пасиб, я видел примеры где люди сами в отдельном блоке верстают свои кнопки для интерфейса но не думал что это не является костылем и что так делают только извращенцы. Это реально используется, так стало проще:)
- Ivan, хотел убедиться что это нормальная практика. Или же есть еще нормальные способы?
- Ivan, ну окей, спасибо елки палки:)
Чистый JS и работа с видео тегом значит костыль, понял
Значит буду верстать кнопки сам, сэнкс - Ivan, интересно, лучше все же верстать свои кнопки и свой интерфейс прописывать или действовать таким способом?: https://codepen.io/metod/pen/ZQvgom?editors=0100
Собственный плеер под конкретную задачу можно написать используя api HTMLMediaElement.
Пример собственного плеера с уникальным дизайном
<html><body> <video id="v" style="max-width:300px"> <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" /> </video> <p id="b" style='position:absolute; top: 60px; left: 130px; background: red; color: yellow; cursor:pointer'>play</> <script> v = document.getElementById('v') b = document.getElementById('b') b.addEventListener('click',()=>{ if(b.innerText=='play'){ b.innerText='pause' v.play() }else{ b.innerText='play' v.pause() } }) </script> </body></html> |
<html><body> <video id="v" style="max-width:300px"> <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" /> </video> <p id="b" style='position:absolute; top: 60px; left: 130px; background: red; color: yellow; cursor:pointer'>play</> <script> v = document.getElementById('v') b = document.getElementById('b') b.addEventListener('click',()=>{ if(b.innerText=='play'){ b.innerText='pause' v.play() }else{ b.innerText='play' v.pause() } }) </script> </body></html>
video.js точно также работает с html5 video, так что можно подглядывать в их исходники ;)
Это если "собственный плеер" - не свой велосипед на замену video.js. Иначе, сначала нужно забыть о чатгпт и разобраться с video.js самостоятельно.
- Нет, "собственный плеер" это не свой костыль на замену 10 летней video.js)
Просто хочу понять как из стандартного video.js плеера сделать конфетку, свою кастомную тему любую, мб добавить новый функционал - iljaGolubev интересно, лучше все же верстать свои кнопки и свой интерфейс прописывать или действовать таким способом?: https://codepen.io/metod/pen/ZQvgom?editors=0100
- Niksak, у videojs богатый функционал. Если вам сейчас нужна только кнопка старт/стоп, то зачем целая либа? Если в вашем плеере нужно больше функций, то вам решать, что лучше - научиться использовать основу (media element) или написанную знающими людьми либу. Если нужно быстро сделать, то не до обучения уже.
Что лучше решать ваи. - iljaGolubev, нет, будет доп. функционал, будет аналитика и разделение видео на эпизоды ( как в ютубе похоже, наводишь на видео трэк и в определенной его части название эпизода )
Но не слишком заходит кнчн искать стили в панели разработчика и думать че там где переписать, удобнее с нуля верстать.
Или в случае с video.js так нельзя? У них свое api есть, значит поддерживают емае
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания своего полностью стилизованного видео плеера вы можете использовать библиотеку video.js, которая предоставляет множество возможностей для настройки и кастомизации видео плеера.
Вот пример того, как вы можете создать свой стилизованный видео плеер с помощью video.js:
1. Установите библиотеку video.js на ваш проект. Вы можете сделать это с помощью npm или загрузить файлы библиотеки напрямую.
2. Создайте HTML разметку для вашего видео плеера:
<div class="video-container"> <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"> Your browser does not support the video tag. </video> </div><div class="video-container"> <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"> Your browser does not support the video tag. </video> </div>
3. Добавьте стили для вашего видео плеера:
.video-container { position: relative; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } .video-js { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
4. Инициализируйте видео плеер с помощью JavaScript:
var player = videojs('my-video', { controls: true, fluid: true });
5. Теперь вы можете настроить плеер по своему усмотрению, добавив различные плагины, изменяя цвета и стили элементов управления и т.д.
Video.js предоставляет широкие возможности для кастомизации видео плеера, но помните, что exccessive кастомизация может замедлить производительность и создать проблемы совместимости с различными браузерами. Будьте осторожны и тестируйте ваш плеер на различных устройствах и браузерах перед развертыванием на продакшене.