Воспроизведение видео – шаг на промежуточный итог ямы

браузер iOS Chrome Safari
Воспроизведение видео – шаг на промежуточный итог ямы

Автор chenjsh36 Технологическая группа Ant Financial Data Experience

С наступлением эры трафика и совершенствованием аппаратных технологий все больше и больше веб-сайтов надеются воспроизводить свои собственные видео на ПК или мобильных устройствах.Постепенное улучшение совместимости

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

Сценарий 1: автоигра

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

Автовоспроизведение видео может автоматически воспроизводить видео, когда страница открыта и ресурсы загружены достаточно, уменьшая взаимодействие клика пользователя, и может применяться к динамическому фону и функции имитации видеовызова H5. Однако по разным причинам автозапуск имеет разную степень ограничений как на ПК, так и на мобильных устройствах.

мобильный

IOS

раноДля воспроизведения должен быть пользовательский жест (жест пользователя); с версии 10Начал изменять правила видео,Apple расслабляет встроенный и автовоспроизведение, политика следующая (только для браузера Safari):

  • <video> elements will be allowed to autoplayбез жеста пользователя, если их исходный медиафайл не содержит звуковых дорожек (видеоэлемент без источника звука разрешает автовоспроизведение).
  • <video muted>элементам также будет разрешено автовоспроизведение без жеста пользователя.
  • If a <video>элемент получает звуковую дорожку или отключается без жеста пользователя, воспроизведение приостанавливается (если видеоэлемент имеет источник звука без жеста пользователя или включается, воспроизведение приостанавливается).
  • <video autoplay>элементы начнут воспроизводиться только тогда, когда они видны на экране, например, когда они прокручиваются в окне просмотра, становятся видимыми с помощью CSS и вставляются в DOM.
  • <video autoplay>элементы приостанавливаются, если становятся невидимыми, например, при прокрутке за пределы окна просмотра (видеоэлементы перестают воспроизводиться, когда становятся невидимыми).

андроид

早期Для игры также требуются пользовательские жесты;Андроидхром после 53Спокойная политика автозапуска, стратегия отличается от IOS Safari, вам нужно установить видео в то же времяautoplayа такжеmuted(независимо от того, отключен ли звук), разрешено только автоматическое воспроизведение;安卓的 FireFox 和 UC 浏览器Поддержка автоигры в любой ситуации; В других браузерах Android ситуация временно неясна;

Сторона ПК

В первые дни автовоспроизведение поддерживалось, но недавно Safari и Chrome последовательно модифицировали стратегию автовоспроизведения...

браузер сафари

Safari 10Видео и аудио со звуком после отключения автоматического воспроизведения по умолчанию, дополнительную информацию можно найти вэта статья;

Автозапуск в Chrome (старые версии):

刷新自动播放.gif | left | 747x388

Safari (после 10) не воспроизводится автоматически:

刷新不自动播放.gif | left | 747x393

Браузер Chrome

Видео с отключенным звуком по-прежнему можно воспроизводить, а видео со звуком будут воспроизводиться в соответствии с媒体参与指数Что такое Индекс взаимодействия со СМИ, чтобы решить, можно ли его воспроизводить автоматически? Чиновник дал пояснения и соответствующие размеры:

MEI - это индекс, который оценивает степень участия средств массовой информации пользователя для текущего сайта, в зависимости от следующих измерений:

  • Пользователь тратит более 7 секунд на медиа
  • Звук должен отображаться, а не отключаться
  • Взаимодействие с видео
  • Размер носителя не менее 200х140.

После прочтения мнение разработчика такое:

vued84316a856ff371e9f33681648a99d2ba.png | center | 590x270

vuedec43e2b4cda0efe595430015154e1fd2.png | center | 592x270

Проверить, возможен ли автозапуск?

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

var promise = document.querySelector('video').play();

if (promise !== undefined) {
    promise.catch(error => {
        // Auto-play was prevented
        // Show a UI element to let the user manually start playback
    }).then(() => {
        // Auto-play started
    });
}

думать

Почему автовоспроизведение видео было запрещено раньше?

because it can be disruptive, data-hungry and many users don't like it.(потому что это разрушительно, требует много трафика и многим пользователям это не нравится)

Зачем снова разрешать автозапуск?

  • Некоторые разработчики используют другие методы, такие как canvas, gif и т. д., для достижения эффекта автоматического воспроизведения видео, но производительность и потребление трафика значительно уступают воспроизведению видео;
  • Сейчас трафик дешевый, а аппаратура мобильных телефонов все лучше и лучше;
  • Пользователи могут отключить автоматическое воспроизведение через настройки (включить режим сохранения данных и т. д.);

Почему WeChat и Dingding могут автоматически воспроизводить видео со звуком под IOS?

Это правда, что вы часто можете увидеть автовоспроизведение H5 в WeChat, но автор написал пример воспроизведения видео с автозапуском и установленными параметрамиplayInline.Он все еще не может воспроизводиться автоматически в WeChat, но может воспроизводиться автоматически на DingTalk.

системный браузер со звуком без звука
IOS DingTalk служба поддержки служба поддержки
IOS Safari запретить Автовоспроизведение
IOS WeChat запретить запретить

Запрашивая данные,IOS WebAPP 开发都是基于 IOS 提供的浏览器内核进行开发的, поэтому производительность автовоспроизведения можно изменить в веб-представлении WebAPP. DingTalk, очевидно, поддерживает автовоспроизведение, в то время как WeChat запрещает автовоспроизведение, но предоставляет встроенные события для поддержки автовоспроизведения:

Через WeChatWeixinJSBridgeReady События для автоигры:

document.addEventListener(
  'WeixinJSBridgeReady',
  function() {
    video.play();
  },
  false
);

Сценарий 2: Полноэкранная обработка

В мобильных браузерах, когда пользователь нажимает для воспроизведения или запускает воспроизведение через API video.play(), видео будет принудительно воспроизводиться в виде полноэкранного прилипания к верхней части. Первоначальный замысел дизайна может быть что полноэкранный режим может обеспечить лучший пользовательский опыт, но некоторые разработчики в то время надеются, что смогут контролировать, являются ли они полноэкранными или нет, для достижения других потребностей.

playinline отменить полноэкранный режим

Если вы хотите добиться воспроизведения не в полноэкранном режиме, просто добавьте тег видео.playsinlineсвойство, это свойство находится в基于webkit内核的移动端浏览器В принципе, нет проблем, если это действительно не работает, добавьте еще одинwebkit-playsinline:

<video
    src={videoUrl}
    webkit-playsinline="true"
    playsinline="true"
  />

Так что насчет браузеров с другими ядрами? На данный момент необходимо понять, какие браузеры в настоящее время существуют на рынке.

игровая совместимость

Прежде всего, вы должны знать, какие четыре браузерных ядра в настоящее время существуют в мире:

  • Microsoft IETrident
  • Первоначально Netscape был разработан и продан Mozilla Foundation, а затем превратился в Firefox.Gecko
  • Ядро KDE с открытым исходным кодомWebkit
  • ОпераPresto

image.png | left | 349x199

в:

  • TridentНа мобильном терминале это в основном встроенный браузер для системы WP7.
  • PrestoИспользуется на всех сетевых устройствах, в основном Opera Mobile, OperaMini, Opera Browser и Opera HD Beta на мобильных терминалах.
  • WebkitСфера применения ядра более обширна: нативные браузеры Android, Apple Safari и Google Chrome (используемый в Android 4.0) разработаны на основе ядра Webkit с открытым исходным кодом.

Обычные отечественные браузеры для ПК, такие какUC浏览器、QQ浏览器、百度手机浏览器、360安全浏览器、谷歌浏览器、搜狗手机浏览器、猎豹浏览器так же как移动端的UC、QQ、百度等手机浏览器Все они представляют собой модифицированные ядра, основанные на Webkit.По сути, мы можем думать, что мобильные пользователи на рынке в основном используют ядра webkit или браузеры, модифицированные на основе ядер webkit, поэтому совместимость playsinline очень хорошая!

Сценарий 3: Управление воспроизведением

Элемент video предоставляет разработчикам несколько поведенческих событий для управления воспроизведением видео. Совместимость относительно хорошая.onended,ontimeupdate、onplay、onplayingд., производительность некоторых событий в разных браузерах и на разных устройствах неодинакова.

Например: прослушивание 'canplay' под ios (достаточно ли буферизовано данных для плавного воспроизведения), оно не сработает при загрузке, даже еслиpreload="auto"Это бесполезно, но под отладчиком Chrome на ПК он сработает на этапе загрузки. IOS сработает только после воспроизведения.

Эмулятор Chrome

загрузка завершена:

image.png | left | 345x230

Нажмите, чтобы играть:

image.png | left | 385x350

MacOS Safari

загрузка завершена:

image.png | left | 328x186

нажмите, чтобы играть

image.png | left | 348x500

IOS Safari

загрузка завершена:

image.png | left | 284x158

Нажмите, чтобы играть:

image.png | left | 292x411

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

Сценарий 4. Скрытие элементов управления воспроизведением

контролирует Благодаря этому свойству Gecko предоставляет пользовательские элементы управления, которые позволяют пользователю управлять воспроизведением видео, включая громкость, охват кадров и приостановку/возобновление воспроизведения.

Атрибут Controls указывает, что браузер должен предоставлять элементы управления воспроизведением для видео и в противном случае скрывать элементы управления воспроизведением, чтобы разработчики могли настраивать свои собственные элементы управления воспроизведением. Скрыть элементы управления воспроизведением вХорошая совместимость между ПК и мобильным устройством IOS安卓移动端并不支持隐藏控件, но есть еще несколько способов сделать это.

Черная наука

Более сложный метод заключается в увеличении масштаба видео и перемещении панели управления из поля зрения для достижения скрытого эффекта! На самом деле это делается для того, чтобы сделать элемент видео больше, чем родительский контейнер, чтобы нижняя панель управления была за пределами родительского контейнера, а затем для родительского контейнера установлено значение:overflow:hiddenРеализуйте метод, чтобы скрыть элементы управления воспроизведением! Недостаток в том, что видео будет увеличено, и нужно заранее оставить пустое место для увеличения.

image.png | left | 432x358

Браузер WeChat

Команда разработчиков ядра x5 команды Android от Tencent сняла ограничения на воспроизведение видео, и видео не обязательно вызывают их сильно критикуемый видеоплеер.x5-video-player-type="h5"атрибут скрывает элемент управления, а视频不再置顶，允许其他元素浮动在顶层.

Суммировать

После понимания общих сцен и общих ям воспроизведения видео нам нужно только针对不同的场景提供对应的兜底方案может улучшить пользовательский опыт. Например, на странице H5, которая автоматически воспроизводится на мобильном терминале, это самый консервативный способ косвенно запустить воспроизведение видео, направляя пользователя на щелчок или скольжение, без ошибок! Лучшим решением является автоматическое воспроизведение по умолчанию и захват ситуации, когда воспроизведение запрещено, а затем указание пользователю взаимодействовать с видео для воспроизведения.

В первые дни использования видео для воспроизведения видео оно было строго ограничено на мобильной стороне из-за высокого потребления производительности, большого потребления трафика и соображений взаимодействия с пользователем. Спрос постепенно ослаблял ограничения, в то время как сторона ПК постепенно перешла от « «расслабленное поколение» на «ужесточающее поколение». Оба имеют свои собственные стратегии, позволяющие пользователям получать лучший опыт, и могут стать унифицированными в будущем. Разработчик может быть освобожден от низкоуровневой совместимой адаптации, и таким образом, у вас будет больше энергии для выполнения работы более высокого уровня.

Ссылаться на

Если вам интересна наша команда, вы можете подписаться на рубрику и подписатьсяgithubИли отправьте свое резюме до 'Tao.qit ####alibaba-inc.com'.replace('####', '@'), приглашаем присоединиться людей с высокими идеалами~

Оригинальный адрес:GitHub.com/proto team/no…

Категории