Часто используемые интерфейсы API для видео html5 «Рекомендуемая коллекция»
Всем привет, мы снова встретились, я ваш друг Цюаньчжаньцзюнь.
1. Хотя некоторые атрибуты имеют логический тип, все же рекомендуется записывать их в формате XHTML (имя атрибута = «значение атрибута»), чтобы избежать ошибок (атрибуты, выделенные жирным шрифтом ниже, являются часто используемыми атрибутами).
свойство | ценить | Описание функции |
|---|---|---|
controls | controls | Отображать ли элементы управления воспроизведением |
autoplay | autoplay | Установите, будет ли воспроизводиться автоматически после открытия браузера |
width | Пиксели | Установите ширину плеера |
height | Пиксели | Установить высоту игрока |
loop | loop | Установите, будет ли видео воспроизводиться циклично (то есть, оно будет продолжать воспроизводиться снова после воспроизведения). |
preload | preload | Установите, следует ли ждать завершения загрузки перед воспроизведением. |
src | url | Установите URL-адрес видео для воспроизведения |
poster | imgurl | Установите начальное изображение дисплея по умолчанию для проигрывателя. |
autobuffer | autobuffer | Установите режим буферизации браузера, он эффективен только в том случае, если не установлен автозапуск. |
Демо:
<video controls="controls" width="500px" height="500px" loop autoplay poster="imgUrl">
<source src="Хакер Сити.mp4" type="video/mp4"/>
<track src="a.vtt" label="Китайский" srclang="zh" kind="subtitles" default/>
</video>два、.videoЭтикеткаAPIметод：VideoЭтикетка Это также обеспечивает более удобный для пользователяМетоды интерфейса API,Для прямого вызова при написании JS,Удобно и просто
API | Описание события |
|---|---|
addTextTrack() | Добавить новую текстовую дорожку к аудио/видео. |
play | видео.play(); воспроизвести видео |
pause | видео.пауза(); Приостановить воспроизведение видео |
load | video.load(); Верните всем свойствам значение по умолчанию и восстановите видео в состояние перезапуска. |
canPlayType | var support = videoid.canPlayType(‘video/mp4’); Определите,поддерживает ли браузер текущий тип формата видео. возвращатьсяценить： Пустая строка: не поддерживается Может быть: может поддержать Вероятно: Полностью поддерживается |
Использование интерфейса API тега видео в JS выглядит следующим образом:
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <style>
5 video::cue{
6 background-color:transparent;
7 color:white;
8 font-size:20px;
9 line-height: 100px;
10 }
11 </style>
12 </head>
13 <body>
14
15 <video controls="controls" id="video1">
16 <source src="Хакервилл.Хакервилл.S01E01.720P.mp4" type="video/mp4"/>
17 <track src="a.vtt" label="Китайские субтитры" srclang="zh" kind="subtitles" default/>
18 </video>
19 <button onclick="isPlay(this)">играть</button>
20 <button onclick="replay()">сноваиграть</button>
21 <button onclick="isPlayType()">Поддержка браузера</button>
22
23 <script>
24 var video1 = document.getElementById("video1"); //В скобках указан идентификатор видеотега
25 //Воспроизвести видео (нажмите кнопку воспроизведения, затем наступит пауза)
26 function isPlay(obj1){
27 if(video1.paused){ //на паузе принадлежит видео аписвойство
28 obj1.innerHTML="Пауза";
29 video1.play();
30 }else{
31 obj1.innerHTML="Играть";
32 video1.pause();
33 }
34 }
35
36 //Перезапускаем игру с начала
37 function replay(){
38 video1.load();
39 }
40
41 //Определяем, поддерживается ли воспроизводимый формат видео текущим браузером
42 function isPlayType(){
43 var support = video1.canPlayType("video/mp4");
44 console.log(support); //Возвращаем результаты: пустая строка, возможно (возможно, поддерживается), вероятно (поддерживается)
45 }
46 </script>
47 </body>
48 </html>3. Видео тег APIсвойство: Видео не только предоставляет интерфейс API,Также предоставляет множествоAPIсвойство,Удобно для вынесения суждений в JS.,Следующим образом: Большинство свойств оценивается по логической цене.
APIсвойство | Описание события |
|---|---|
duration | Возвращает общее время воспроизведения мультимедиа в секундах. |
loop | Стоит ли зацикливаться |
muted | Отключить ли звук |
paused | Стоит ли делать паузу |
currentTime | Текущее время воспроизведения (единица измерения: секунды) |
volume | объемценить(0~1) |
networkState | Вернуть текущий статус сети |
playbackRate | Скорость воспроизведения (ускорение, замедление воспроизведения) (-2~2) |
src | URL-адрес текущего источника видео |
ended | Возвращает, закончилось ли текущее воспроизведение или нет |
error | Возвращает статус ошибки текущего воспроизведения |
initialTime | Возврат к исходной позиции воспроизведения |
mediaGroup | Медиа-группа, к которой принадлежит текущий аудио и видео (используется для связи нескольких тегов аудио и видео). |
played | Диапазон времени, в течение которого воспроизводился текущий компонент воспроизведения (объект TimeRanges). |
preload | Загружать ли аудио и видео одновременно при загрузке страницы |
readyState | Вернуться к текущему состоянию готовности |
seekable | Возвращает временной диапазон текущего компонента с возможностью перехода (объект TimeRanges) |
audioTracks | Возвращает список доступных аудиодорожек (объект MultiTrackList) |
autoplay | Автоматическое воспроизведение мультимедиа после загрузки |
buffered | Возвращает временной диапазон компонента буфера (объект TimeRanges) |
controller | Возвращает текущий медиа-контроллер (объект MediaController) |
controls | Показать элементы управления воспроизведением |
crossOrigin | Настройки CORS |
currentSrc | Возвращает URL текущего мультимедиа |
defaultMuted | по умолчанию Отключить ли звук |
defaultPlaybackRate | Скорость управления трансляцией по умолчанию |
seeking | Возвращает, выполнил ли пользователь операцию перехода. |
startOffsetTime | Возвращает текущее смещение времени (объект Date) |
textTracks | Возвращает доступные текстовые дорожки (объект TextTrackList) |
videoTracks | Возврат доступных видеодорожек (объект VideoTrackList) |
Демо:
1 <script>
2 function setting(){
3 video1.muted=true; //Установить звук
4 video1.volume=0.2; //Устанавливаем громкость, 1 равно 100%
5 video1.playbackRate=2; //2x скорость воспроизведения
6 video1.controls=false; //Нет Показать элементы управления воспроизведением 7 }
8 </script>4. Аудио/видео мероприятия
событие | описывать |
|---|---|
abort | Вызывается, когда загрузка аудио/видео была прервана. |
canplay | Запускается, когда браузер может начать воспроизведение аудио/видео. |
canplaythrough | Запускается, когда браузер может воспроизводить игру без остановки из-за буферизации. |
durationchange | Вызывается, когда продолжительность аудио/видео изменилась. |
emptied | Вызывается, когда текущий список воспроизведения пуст. |
ended | Вызывается, когда текущий плейлист закончился. |
error | Запускается, когда возникает ошибка во время загрузки аудио/видео. |
loadeddata | Запускается, когда браузер загрузил текущий кадр аудио/видео. |
loadedmetadata | Запускается, когда браузер загрузил метаданные для аудио/видео. |
loadstart | Запускается, когда браузер начинает искать аудио/видео. |
pause | Вызывается, когда аудио/видео было приостановлено. |
play | Срабатывает, когда аудио/видео началось или больше не приостановлено. |
playing | Срабатывает, когда аудио/видео готово после паузы или остановки из-за буферизации. |
progress | Запускается, когда браузер загружает аудио/видео. |
ratechange | Срабатывает при изменении скорости воспроизведения аудио/видео. |
seeked | Вызывается, когда пользователь переместился/перешел в новое место в аудио/видео. |
seeking | Срабатывает, когда пользователь начинает перемещаться/перепрыгивать на новую позицию в аудио/видео. |
stalled | Запускается, когда браузер пытается получить медиаданные, но данные недоступны. |
suspend | Вызывается, когда браузер намеренно не получает медиаданные. |
timeupdate | Срабатывает, когда текущая позиция воспроизведения изменилась. |
volumechange | Срабатывает при изменении громкости. |
waiting | Срабатывает, когда видео останавливается из-за необходимости буферизации следующего кадра. |
Издатель: Лидер стека программистов полного стека, укажите источник для перепечатки: https://javaforall.cn/155505.html Исходная ссылка: https://javaforall.cn
Неразрушающее увеличение изображений одним щелчком мыши, чтобы сделать их более четкими артефактами искусственного интеллекта, включая руководства по установке и использованию.
Копикодер: этот инструмент отлично работает с Cursor, Bolt и V0! Предоставьте более качественные подсказки для разработки интерфейса (создание навигационного веб-сайта с использованием искусственного интеллекта).
Новый бесплатный RooCline превосходит Cline v3.1? ! Быстрее, умнее и лучше вилка Cline! (Независимое программирование AI, порог 0)
Разработав более 10 проектов с помощью Cursor, я собрал 10 примеров и 60 подсказок.
Я потратил 72 часа на изучение курсорных агентов, и вот неоспоримые факты, которыми я должен поделиться!
Идеальная интеграция Cursor и DeepSeek API
DeepSeek V3 снижает затраты на обучение больших моделей
Артефакт, увеличивающий количество очков: на основе улучшения характеристик препятствия малым целям Yolov8 (SEAM, MultiSEAM).
DeepSeek V3 раскручивался уже три дня. Сегодня я попробовал самопровозглашенную модель «ChatGPT».
Open Devin — инженер-программист искусственного интеллекта с открытым исходным кодом, который меньше программирует и больше создает.
Эксклюзивное оригинальное улучшение YOLOv8: собственная разработка SPPF | SPPF сочетается с воспринимаемой большой сверткой ядра UniRepLK, а свертка с большим ядром + без расширения улучшает восприимчивое поле
Популярное и подробное объяснение DeepSeek-V3: от его появления до преимуществ и сравнения с GPT-4o.
9 основных словесных инструкций по доработке академических работ с помощью ChatGPT, эффективных и практичных, которые стоит собрать
Вызовите deepseek в vscode для реализации программирования с помощью искусственного интеллекта.
Познакомьтесь с принципами сверточных нейронных сетей (CNN) в одной статье (суперподробно)
50,3 тыс. звезд! Immich: автономное решение для резервного копирования фотографий и видео, которое экономит деньги и избавляет от беспокойства.
Cloud Native｜Практика: установка Dashbaord для K8s, графика неплохая
Краткий обзор статьи — использование синтетических данных при обучении больших моделей и оптимизации производительности
MiniPerplx: новая поисковая система искусственного интеллекта с открытым исходным кодом, спонсируемая xAI и Vercel.
Конструкция сервиса Synology Drive сочетает проникновение в интрасеть и синхронизацию папок заметок Obsidian в облаке.
Центр конфигурации————Накос
Начинаем с нуля при разработке в облаке Copilot: начать разработку с минимальным использованием кода стало проще
[Серия Docker] Docker создает мультиплатформенные образы: практика архитектуры Arm64
Обновление новых возможностей coze | Я использовал coze для создания апплета помощника по исправлению домашних заданий по математике
Советы по развертыванию Nginx: практическое создание статических веб-сайтов на облачных серверах
Feiniu fnos использует Docker для развертывания личного блокнота Notepad
Сверточная нейронная сеть VGG реализует классификацию изображений Cifar10 — практический опыт Pytorch
Начало работы с EdgeonePages — новым недорогим решением для хостинга веб-сайтов
[Зона легкого облачного игрового сервера] Управление игровыми архивами
