Краткий разговор о заливке подводных камней html5-видео на мобильных терминалах

В этой статье рассказывается о мобильном видеотерминале html5, раскрываются подводные камни и рассказывается о нем всем. Подробности следующие:

 <video id=video style=object-fit:fill autoplay webkit-playsinline playsinline x5-video-player-type=h5 x5-video-player-fullscreen=true x5-video-orientation=portraint src=video.mp4 />< /video><!-- object-fit: fill Видеоконтент заполняет весь видеоконтейнер Poster:img.jpg Автовоспроизведение обложки видео: Автоматическое автоматическое воспроизведение - Загружать все видео при загрузке мета страницы. Метаданные загружаются только при загрузке страницы. Нет. Не загружать видео при загрузке страницы с отключенным звуком: если этот атрибут установлен, он указывает, что звук видео должен быть отключен. webkit -playsinline playsinline: встроенное воспроизведение x5-video-player-type=h5: включить x5 core H5 player x5-video-player-fullscreen=настройка истинного полноэкранного режима. Настройки true и false приведут к разным макетам. x5-video-orientation=portraint: объявляет направление, поддерживаемое проигрывателем. Необязательные значения — альбомный горизонтальный экран и портретный вертикальный экран. Портрет значения по умолчанию. Будь то прямая трансляция или полноэкранный H5, он обычно воспроизводится вертикально, но для этого атрибута требуется тип x5-video-player-type для включения режима H5 -->

 <автовоспроизведение видео></видео>

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

 dom.addEventListener('click', function () { video.play()})

Video.play() также может быть запущен в wx.ready().

 wx.ready(функция () {video.play()})

Установите свойство webkit-playsinline

 <video id=video webkit-playsinline playsinline /></video>

При воспроизведении видео в iOS Safari и некоторых браузерах Android видео невозможно воспроизвести на странице h5, и система автоматически возьмет на себя управление видео.

Если вам нужно воспроизвести видео на странице h5, вам необходимо добавить webkit-playsinline в тег видео. После iOS 10 вам необходимо добавить playsinline. Рекомендуется добавлять эти два атрибута одновременно. Приложение также должно поддерживать этот режим.

 webview.allowsInlineMediaPlayback = ДА;

И iOS Mobile QQ, и WeChat поддерживают этот режим, но Android WeChat зависает.

Встроенный браузер Android WeChat использует ядро ​​Tencent X5 и не соответствует стандарту X5web. Один из них — принудительное полноэкранное видео. После воспроизведения видео появятся собственные видеорекомендации QQ.

Говорят, что у него есть белый список, и видеоресурсы в белом списке не будут полноэкранными. Но Tencent больше не может добавиться в белый список. Мочевыводящие пути, решения нет. . . . . .

В настоящее время существует решение: использовать холст h5 для воспроизведения видео.

Подводные камни, возникающие при использовании холста: к видео необходимо добавить атрибут x5-video-player-type=h5, иначе видео застрянет на мобильном терминале и не сможет воспроизводиться. Лично я думаю, что это связано с тем, что видео перехвачено.

 <div class=wrapper> <video id=video style=display: none autoplay src=video.mp4 x5-video-player-type=h5></video> <canvas id=canvas></canvas></div> <script> var video = document.querySelector('#video') var Canvas = document.querySelector('#canvas') var Wrapper = Canvas.parentNode var width = Wrapper.offsetWidth var height = Wrapper.offsetHeight var ctx = c.getContext('2d') var time = null Canvas.width = ширина Canvas.height = высота Canvas.addEventListener('click', function () { video.play( ) }) video.addEventListener('play', function () { time = window.setInterval(function () { ctx.drawImage(v, 0, 0, ширина, высота); }, 20); }, false); video.addEventListener('pause', function () { window.clearInterval(time); }, false); video.addEventListener('завершено') , функция () { window.clearInterval(time }, false);</script>

Наконец, было обнаружено, что, хотя для воспроизведения видео используется холст, рекомендуемые видео после полноэкранного воспроизведения видео могут быть заблокированы в Android WeChat. Но нет возможности отключить проблему полноэкранного режима при воспроизведении видео. Все еще получаю злой белый список. Подавайте жалобы. . . . . . . . . . . . . . . .

Что еще больше раздражает, так это то, что я не нашел способа вызвать полноэкранный выход через js.

При воспроизведении видео на iOS на короткое время появляется черный экран, а затем отображается нормально.

Решение:

Добавьте div над видео и заполните его изображением, чтобы создать иллюзию загрузки перед воспроизведением. Затем прослушайте событие timeupdate и удалите этот блок div во время воспроизведения видео.

 video.addEventListener('timeupdate', function(){ if(video.currentTime > 0.1){posterImg.hidden(); }})

HTMLVideoElement и HTMLAudioElement наследуют от HTMLMediaElement.

 //Ошибка носителя MediaObj.error; //null: нормальный MediaObj.error.code //1. Завершение пользователя 2. Ошибка сети 3. Ошибка декодирования 4. Неверный URL //Текущее состояние носителя MediaObj.currentSrc; /Вернуться к текущему ресурсу URLMediaObj.src = value; //Вернуть или установить текущий ресурс URLMediaObj.canPlayType(type); //Могут ли воспроизводиться ресурсы в определенном формате MediaObj.networkState; //0. Этот элемент не инициализирован 1. Нормально, но не использует сеть 2. Данные загружаются 3. Ресурс MediaObj.load() не найден //Перезагружаем ресурс, указанный в src MediaObj.buffered; Возврат в буферизованную область, TimeRangesMediaObj.preload; //нет: не загружать метаданные: предварительно загружать информацию о ресурсе auto://ready state MediaObj.readyState; //1:HAVE_NOTHING; //2:HAVE_METADATA //3.HAVE_CURRENT_DATA //4.HAVE_FUTURE_DATA //5.HAVE_ENOUGH_DATAMediaObj.seeking; //Ищет ли он // Статус воспроизведения MediaObj.currentTime = value; //Текущая позиция воспроизведения, назначение может изменить значение; позиция MediaObj .startTime; //Обычно 0, если это потоковое мультимедиа или ресурс, который не начинается с 0, это не 0MediaObj.duration //Поток текущей длины ресурса возвращает бесконечный MediaObj.paused //Приостанавливать ли MediaObj.defaultPlaybackRate = value; ; //По умолчанию Для скорости воспроизведения можно установить MediaObj.playbackRate = значение //Текущая скорость воспроизведения, измените ее сразу после установки MediaObj.played; //Вернем область, которая была воспроизведена, TimeRanges, см. ниже для этого объекта MediaObj.seekable //Вернем область, в которой можно искать TimeRangesMediaObj.ended; //Завершить ли MediaObj.autoPlay //Будет ли автоматически воспроизводиться MediaObj; .loop; //Да Цикл воспроизведения MediaObj.play(); //Воспроизведение MediaObj.pause(); //Пауза//Управление видео MediaObj.controls;//Есть ли панель управления по умолчанию MediaObj.volume = value; //Volume MediaObj.muted = value; //Mute//TimeRanges (регион) объект TimeRanges.length; /Region Количество сегментов TimeRanges.start(index) //Начальная позиция области сегмента индекса TimeRanges.end(index) //Конечная позиция индексного раздела //[★★★**Связанные события**★★★]//Распределение событий var eventTester = function(e){ Media.addEventListener(e, function(){ console.log ((new Date()).getTime(),e) },false);}//Мониторинг событий eventTester(loadstart); //Клиент начинает запрашивать данные eventTester(progress); //Клиент запрашивает данные eventTester(suspend); //Задержка загрузки eventTester(abort); //Клиент активно прекращает загрузку (не по причине ошибки) eventTester(loadstart); //Клиент начинает запрашивать данные eventTester( Progress) ; //Клиент запрашивает данные eventTester(suspend); //Задержка загрузки eventTester(abort); //Клиент активно прекращает загрузку (не из-за ошибки), eventTester(error); //Произошла ошибка при запросе данных eventTester(stalled); //Скорость сети остановилась eventTester(play); //EventTester(pause) запускается, когда play() и автовоспроизведение запускают eventTester(loadedmetadata); ); // Длина ресурса успешно получена eventTester(loadeddata); //eventTester(waiting); //Ожидание данных, а не ошибка eventTester(playing); //Начало воспроизведения eventTester(canplay); //Воспроизведение возможно, но может быть приостановлено из-за загрузки eventTester(canplaythrough); //Воспроизведение возможно, все песни загружены eventTester(seeked); //Поиск eventTester(seeked); /Нахождение eventTester(timeupdate); //Изменено время воспроизведения eventTester(ended); //Воспроизведение завершено eventTester(ratechange); //Изменена скорость воспроизведения eventTester(durationchange); //Изменение длины ресурса eventTester(volumechange); //Изменение объема;

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.