#javascript #html5-video
#javascript #html5-видео
Вопрос:
Мы с моей командой создаем пользовательский видеопроигрыватель html, и я работаю над панелью настроек, и первый вариант, о котором мы больше всего беспокоимся, поэтому я добавляю сначала, — это параметр качества видео.
<video id="video" class="nm" poster="the poster url">
<source src="video source url of the video at 480p" type="video/mp4" size="480">
<source src="video source url of the video at 720p" type="video/mp4" size="720">
<source src="video source url of the video at 1080p" type="video/mp4" size="1080">
</video>
И теперь, что мы хотим сделать, это когда пользователь переключает опцию, он изменит источник видео на источник с качеством, указанным size атрибутом
Ссылка на изображение здесь
PS: Мы создаем видеопроигрыватель с нуля, поскольку он сам по себе построен без API (например Video.js , JWPlayer, Plyr) Мы создаем все необходимое с нуля с помощью чистого javascript и html … и поскольку мы создаем веб-сайт для потокового вещания, и моя команда, и я хотимсоздайте видеопроигрыватель, созданный нами для веб-сайта, и «возможно» позже для распространения, но сейчас мы хотим создать совершенно новый видеопроигрыватель и просто откладывали эту часть, поскольку мы не уверены в лучшем способе сделать это!
Редактировать
Кроме того, мы хотим, чтобы видео приостанавливалось, меняло качество и снималось с того места, где оно было приостановлено
Ответ №1:
Обратите внимание, что для нативного video браузера браузер сам решит, что <source> показывать, и выберет первый элемент, который он поддерживает / понимает (например, первый поддерживаемый формат видеофайла): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Usage_notes
Чтобы обойти это и заставить браузер отображать определенный URL-адрес источника видео, введите только один <source> элемент и управляйте свойством источника с помощью javascript.
Чтобы приостановить и воспроизвести видео в собственном видеоплеере HTML5, вы можете использовать API HTMLMediaElement : https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement В нем есть функции воспроизведения и паузы, которые вы ищете.