Проблемы с разработкой видео H5 и связанные с ними знания

внешний интерфейс HTML
Проблемы с разработкой видео H5 и связанные с ними знания

Ссылки по теме:

♢ видео по запросу и в прямом эфире

H5 videoВ настоящее время формат видео, поддерживаемый всеми браузерами, — MP4, поэтому mp4 должен быть предпочтительным форматом для веб-видео по запросу.

Для живого видео видео H5 изначально поддерживается только на мобильных устройствах.HLSПотоковое видео в реальном времени (тег Mac safari video также поддерживает,ПК Chrome не поддерживается), другие прямые трансляции (например,FLV) требуется дляFlashПоддержка плагинов.

♢ видео и код состояния 206

Когда видео воспроизводит mp4, оно по-прежнему отправляет запрос на получение, но http возвращает код состояния 206, то естьpartial Content. Для соответствующего содержания кода состояния 206 вы можете обратиться к следующему

♢ Прекратить загрузку видео

video.pause()Воспроизведение видео можно поставить на паузу, но это не может остановить непрерывную загрузку видеоресурсов.Элементы мультимедиа будут продолжать загружаться до тех пор, пока они не будут переработаны механизмом сборки мусора.

Чтобы остановить воспроизведение сразу после паузы, используйте следующий метод

video.pause()
video.src=''
video.removeAttribute('src');

♢ Запретить полноэкранное воспроизведение по умолчанию на iOS.

Для iOS10 и более поздних версий вы можете запретить полноэкранное воспроизведение iOS по умолчанию, добавив атрибут playsinline в тег видео.webkit-playsinlineатрибут, если вы хотите быть совместимым, добавьте оба атрибута.

Добавить конфигурацию через клиентUIwebview: webview.allowsInlineMediaPlayback = YES, но по-прежнему требует добавления атрибута playsinline к элементу видео.

Ссылаться на:

♢ Управление автозапуском и воспроизведением

На мобильной стороне некоторые браузеры поддерживают автовоспроизведение после добавления атрибута автозапуска, а некоторые также могут автоматически воспроизводиться, установив атрибуты автозапуска и отключения звука, например IOS 10+ и Chrome.

Если вы хотите контролировать, когда воспроизводиться, и это не запускается пользователем (например, элементы управления не установлены), установите свойство muted, затем вызовите метод video.play() и примерно через 300 мс включите звук через video.muted = false .

vide.muted = true;
video.play()
setTimeout(function () {
    video.muted = false
}, 300)

iOS9 и предыдущие версии требуют взаимодействия с пользователем для воспроизведения, то есть ручного нажатия кнопки воспроизведения или щелчка, касания, клавиатуры и других событий, инициированных пользователем, а затем вызова метода video.play() для воспроизведения. До iOS9 iOS Native была доступна черезMediaPlaybackRequiresUserAction в UIWebViewсвойство, чтобы контролировать, требуется ли взаимодействие с пользователем.

Может ли событие щелчка, вызванное element.click(), быть искусственным действием пользователя? не можем

Как браузер узнает, что это событие, инициированное пользователем? Доступное только для чтения свойство isTrusted объекта Event

<div id="test-ele">这个元素监听事件</div>
<script>
    const testEle = document.querySelector('#test-ele');
    testEle.addEventlistener('click', function (evt) {
        // 用户触发为true，script或EventTarget.dispatchEvent() 触发为false
        console.log(evt.isTrusted);
    }, false);
    testEle.click() // 这个触发，evt.isTrusted = false
</script>

Чтобы узнать о стратегии релаксации iOS 10 для сафари-видео, вы можете обратиться к:New Policies for iOS

♢ Объект обещания video.play() (может использоваться для обнаружения ошибок воспроизведения видео)

В Chrome, если свойство video.muted не установлено, если вы используете video.play() для воспроизведения непосредственно в непользовательском режиме, вы получите ошибку Uncaught (в обещании) DOMException, и видео не будет воспроизводиться. Под iOS ошибок может и не быть, и видео не воспроизводится, поэтому проблему локализовать не удается.

video.play() вернет объект Promise.Если воспроизведение не удается, вы можете получить соответствующую информацию об ошибке через возвращенный Promise.

const pro = video.play();
if (pro) {  // iOS9及以下版本不会返回Promise对象，做下兼容处理
   pro.catch(err=>{ console.log(err) });   
}

♢ Объект TimeRange

Когда я начал получать атрибут play, я думал, что он вернет длительность воспроизведения, но на самом деле он вернул объект TimeRanges, и, увидев, что длина TimeRanges осталась неизменной, я был сбит с толку и не знал, что это такое. Позже, когда я занимался контролем прогресса, мне нужно было знать, насколько видео было буферизовано, прежде чем я это понял.

Объект видео DOM имеет три свойства, которые будут возвращать объект TimeRanges, а именно:video.played/ video.buffered/ video.seekable

В начале видео есть только один период времени воспроизведения, если не пропускать просмотр, всегда будет только один период времени, т.е.TimeRanges.lengthЗначение равно 1; если выполняется просмотр перехода (например, внезапный переход с 2 минут на 15 минут) и содержимое перехода не буферизовано, будет два периода времени, а длина TimeRanges равна 2. Поэтому количество TimeRanges будет увеличиваться при переходе к просмотру небуферизованного контента, и уменьшаться при завершении буферизации, как минимум на 1, то есть от начала до конца.

------------------------------------------------------

|=============| |===========| |

------------------------------------------------------

0         5                15 19    21

Объекты TimeRanges имеют свойство длины иstart(),play()Два метода:

TimeRanges: length: 1 // Представляет сегмент воспроизведения, существующий в воспроизводимом в данный момент видео play(index) // Получает время начала воспроизведения (буферизации) указанного сегмента воспроизведения, индекс начинается с 0 и отсчитывается в секундах end(index ) // Получает указанное время окончания воспроизведения (буферизации) сегмента

Чтобы получить время начала первого сегмента, используйтеTimeRanges.start(0), время окончанияTimeRanges.end(0), второй абзацTimeRanges.start(1), и так далее

Ссылаться на:

♢ ширина и высота видео

Высота и ширина области просмотра видео имеют разные фиксированные соотношения в зависимости от источника видео, но растяжения или деформации не будет из-за несоответствия между соотношением высоты и ширины тега видео или его контейнера и соотношением источника видео. Меньшее значение масштабируется в соответствии со своей пропорцией, а недостаточное значение будет центрировано с обеих сторон.

Если исходный размер видео 640*360

Установите высоту видео на 400 и ширину на 800. Рост высоты не пропорционален росту ширины.Ширина будет шире, чем видимая ширина, и видео будет заполнено слева и справа, а область просмотра будет центрировано.

Категории