Резюме ямы тегов живого видео H5

прямая трансляция
Резюме ямы тегов живого видео H5

сведения о теге видео

<video 
    class="video-source"
    width="100%"
    height="240px"  /*如果有封面，请设置高度*/
    preload="auto" /*这个属性规定页面加载完成后载入视频*/ 
    controls /* 显示播放器控件 */ 
    style="object-fit:cover/fill"
    playsinline="true"  /*IOS微信浏览器支持小窗内播放*/ 
    webkit-playsinline="true"  /*这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放*/  
    x5-video-player-type="h5-page" /*启用X5内核同层渲染*/
    x5-video-orientation="h5" /*播放器支付的方向，landscape横屏，portraint竖屏，默认值为竖屏*/
    x5-video-player-fullscreen="true" /*全屏设置，设置为 true 是防止横屏*/
    /* x5-playsinline="true" */  /*设置X5内核为行内播放模式，不能和`x5-video-player-type同时设置会覆盖*/
    x-webkit-airplay="true"  /*未知*/
    x5-video-ignore-metadata="true" /*未知*/
</video>

preload="auto"

Атрибут указывает, что видео должно быть загружено после загрузки страницы. Это свойство игнорируется, если установлено свойство автозапуска.

Возможные значения общих параметров:

  • auto - загружает все видео при загрузке страницы

  • meta - загружать метаданные только при загрузке страницы

  • none - не загружать видео при загрузке страницы

muted

Когда это свойство установлено, оно будет воспроизводиться без звука

Яма: когда это многоканальная прямая трансляция (то есть когда одновременно воспроизводятся несколько видео), на IOS можно воспроизводить только одно видео, а другие нельзя.

Решение: Система IOS под проигрывателями с отключенным звуком по умолчанию и другим воспроизведением видео, установите без звука

мониторvideoизplayмероприятие

handleOnPlay = e => {
    // ios 需要静音才能 同时 播放多个video ，默认静音播放，在3s 后关闭静音
    if (iphone) {
      setTimeout(() => {
        const videoElement = this.videoRef.current
        videoElement && (videoElement.muted = false)
      }, 3000)
    }
  }

controls="controls"

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

autoplay="autoplay"

Настройки автовоспроизведения видео

Яма: независимо от Android IOS, она не может автоматически воспроизводиться на мобильном телефоне, и ее необходимо контролировать, запуская такие события, как события кликов.

webkit-playsinline playsinline

Когда видео воспроизводится, оно воспроизводится локально, не выходя из потока документа.但是这个属性比较特别， 需要嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。换句话说，如果APP不设置，你页面中加了这标签也无效，这也就是为什么安卓手机WeChat 播放视频总是全屏，因为APP不支持playsinline，而IOS的WeChat却支持。

Его следует добавить сюда.Если вы хотите вести полноэкранную прямую трансляцию или полноэкранный режим H5, IOS необходимо удалить тег webkit-playsinline, поскольку он не поддерживается, если вы установите значение false.Андроиду это не нужно, потому что по умолчанию полноэкранный режим.. Но в это время полноэкранный режим имеет элементы управления воспроизведением, независимо от того, установили ли вы элементы управления или нет. Элементы управления воспроизведением могут понадобиться для прямой трансляции, но полноэкранный H5 не нужен, поэтому для удаления элементов управления для полноэкранного воспроизведения необходимы следующие настройки: воспроизведение на том же слое.

x5-video-player-type="h5-page"

Включите проигрыватель H5 на том же слое, то есть, когда видео полноэкранное, div может отображаться на видеослое, что также является уникальным атрибутом версии WeChat для Android.

Официальная документация:Спецификация доступа к проигрывателю того же уровня H5

Pit: в разных версиях меток формата отображения видео ядра X5 могут быть различия, например (кнопка полноэкранного режима на метке видео)

Решение:Сканируйте код для обновления ядра X5

x5-video-orientation

Объявите ориентацию, поддерживаемую плеером, необязательные значения альбомная альбомная, портретная портретная. Значение по умолчанию — Портал. Будь то прямая трансляция или полноэкранный режим, H5 обычно воспроизводится на вертикальном экране, но этот атрибут требуетx5-video-player-typэонH5модель

другие ямы

  • IOS может поддерживать только поток m3u8, поместите его прямо в src видео.
  • Android может поддерживать поток flv, m3u8, требуется преобразование (flv.js/hls.js) и обращать внимание на адрес потока и должен соответствовать адресу веб-страницы (например, http => http, https => https)

Мобильная отладка

Во многих случаях на мобильном терминале форма отображения на реальном компьютере и инструмент разработчика Chrome несовместимы.Как эффективно отлаживать, можно использовать следующие инструменты

  • Инструмент захвата пакетовCharles,https证书
  • debugger erudaилиvConsole
  • Отладка реальной машины (Подобно реальной отладке машины разработчиков WeChat) Weinreилиspy-debugger

Живые ссылки

Прямая трансляция H5 отправилась в плавание Начало работы с H5 Live Streaming

Категории