wechatVideoExample
1.0.0
Тестовый исходный код для воспроизведения видео в WeChat: поскольку WeChat использует браузер X5, при использовании тега видео для воспроизведения видео возникают различные странные проблемы. Этот исходный код является предварительным исходным кодом, созданным в процессе решения этой проблемы. Он включает в себя различные тестовые примеры: использование холста для воспроизведения видео, использование изображений для воспроизведения видео, использование тегов x5 и т. д. Эту доступную библиотеку исходного кода можно сохранить, а заинтересованные студенты могут загрузить ее самостоятельно.
###После загрузки введения создайте новый каталог на хосте и скопируйте в него весь исходный код. Используйте браузер WeChat для доступа к внутренней HTML-странице для тестирования.
Автор chenjsh36 Технологическая группа Ant Financial Data Experience
С наступлением эры трафика и совершенствованием аппаратных технологий все больше и больше веб-сайтов надеются воспроизводить свои собственные видео на ПК или мобильных терминалах. Постепенное улучшение совместимости <video> заставляет разработчиков более охотно использовать его. сценарии воспроизведения.
В этой статье в основном перечислены распространенные сценарии воспроизведения видео и ошибки, возникающие в каждом сценарии. Надеемся, что она поможет разработчикам быстрее выбрать подходящие технические решения и уменьшить количество ошибок при возникновении спроса.
Логический атрибут autoPlay ; если он указан, видео автоматически начнет воспроизводиться немедленно и не будет останавливаться в ожидании загрузки данных.
Автовоспроизведение видео может автоматически воспроизводить видео, когда страница открыта и ресурсы загружены достаточно, сокращая взаимодействие с одним щелчком мыши. Его также можно применять к динамическим фонам и функциям имитации видеовызова H5. Однако по разным причинам автоматическое воспроизведение имеет разную степень ограничений как на ПК, так и на мобильных терминалах.
Вначале для воспроизведения требовался видеотег жестов пользователя , правила видео были изменены, и Apple смягчила встроенное и автоматическое воспроизведение . Стратегия следующая (применимо только к браузеру Safari):
<video> будет разрешено autoplay без жестов пользователя, если их исходный носитель не содержит звуковых дорожек (видеоэлементы без источников звука допускают автозапуск).<video muted> также будет разрешено автоматическое воспроизведение без жестов пользователя.<video> получает звуковую дорожку или включает звук без жеста пользователя, воспроизведение приостанавливается.<video autoplay> начнут воспроизводиться только тогда, когда они видны на экране, например, когда они прокручены в область просмотра, сделаны видимыми с помощью CSS и вставлены в DOM (элементы видео начнут воспроизводиться только тогда, когда они видны на экране).<video autoplay> приостанавливаются, если они становятся невидимыми, например, при прокрутке за пределы области просмотра. __Early__ также требовало жестов пользователя для воспроизведения; позже в Android 53 политика автозапуска была смягчена. Эта политика отличается от iOS Safari. Чтобы разрешить автоматическое воспроизведение, необходимо одновременно установить автовоспроизведение и отключение звука (независимо от того, отключен ли звук). воспроизведение __Android FireFox и UC Browser__ поддерживают автоматическое воспроизведение при любых обстоятельствах, ситуация с другими браузерами Android на данный момент неясна;
Вначале поддерживался автозапуск, но недавно Safari и Chrome последовательно изменили свои стратегии автозапуска...
__Safari 10 и более поздние версии__Видео и звук со звуком по умолчанию отключены при автоматическом воспроизведении . Для получения дополнительной информации обратитесь к этой статье;
Автозапуск в Chrome (старая версия):
Safari (пост 10) не воспроизводится автоматически:
Видео с отключенным звуком по-прежнему можно воспроизводить. Видео со звуком будут воспроизводиться автоматически на основе __Индекса участия СМИ__. Что такое Индекс участия СМИ? Официальное объяснение и соответствующие размеры приведены:
MEI — это индекс, который оценивает участие пользователя в СМИ на текущем сайте. Он зависит от следующих параметров:
- Пользователь оставался на медиа более 7 секунд
- Звук должен отображаться и не отключаться
- Взаимодействовал с видео
- Размер носителя должен быть не меньше 200x140.
После прочтения мысли разработчика следующие:
К счастью, и 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
});
}
потому что это может быть разрушительным, требующим больших объемов данных , и многим пользователям это не нравится (потому что это может быть разрушительным, требующим больших объемов данных, и многим пользователям это не нравится) .
Я обнаружил, что H5, который воспроизводится автоматически, часто можно увидеть в WeChat. Однако пример воспроизведения видео, написанный автором с автозапуском и playInline, по-прежнему не может автоматически воспроизводиться в WeChat, но может автоматически воспроизводиться в DingTalk.
| Системный браузер | со звуком | без звука |
|---|---|---|
| IOS | поддерживать | поддерживать |
| IOS Сафари | запретить | Автозапуск |
| IOS WeChat | запретить | запретить |
Посредством запроса информации разработка IOS WebAPP основана на ядре браузера, предоставляемом IOS , поэтому производительность автоматического воспроизведения можно изменить в веб-просмотре WebAPP. DingTalk, очевидно, поддерживает автоматическое воспроизведение, в то время как WeChat запрещает автоматическое воспроизведение, но обеспечивает встроенную функцию. события для поддержки автозапуска:
Автоматическое воспроизведение через событие WeixinJSBridgeReady в WeChat:
document . addEventListener (
'WeixinJSBridgeReady' ,
function ( ) {
video . play ( ) ;
} ,
false
) ; В мобильных браузерах, когда пользователь нажимает кнопку воспроизведения или запускает воспроизведение через API video.play(), видео будет принудительно воспроизводиться в полноэкранном режиме сверху. Первоначальная цель дизайна может заключаться в том, чтобы полноэкранный режим мог обеспечить воспроизведение. лучший пользовательский опыт, но есть Иногда разработчики хотят иметь возможность контролировать, следует ли переходить в полноэкранный режим для удовлетворения других потребностей.
Если вы хотите добиться не полноэкранного воспроизведения, просто добавьте атрибут playsinline в тег видео. Этот атрибут в принципе не представляет проблемы в мобильных браузерах на основе ядра webkit. Если это не работает, просто добавьте webkit-playsinline :
< video
src = {videoUrl}
webkit-playsinline =" true "
playsinline =" true "
/>Так как быть с браузерами с другими ядрами? На данный момент вам необходимо понять, какие браузеры сейчас существуют на рынке.
Прежде всего, вам необходимо знать текущие четыре ядра браузеров в мире:
в:
Распространенные отечественные браузеры для ПК, такие как UC Browser, QQ Browser, Baidu Mobile Browser, 360 Secure Browser, Google Chrome, Sogou Mobile Browser, Cheetah Browser, а также мобильные UC, QQ, Baidu и другие мобильные браузеры, по сути, имеют ядра, модифицированные на основе Webkit. , мы можем предположить, что мобильные пользователи на рынке в основном используют ядра WebKit или браузеры, модифицированные на основе ядра WebKit, поэтому совместимость playsinline очень хорошая!
Элемент video предоставляет разработчикам несколько поведенческих событий для управления воспроизведением видео. К числу хорошо совместимых относятся onended , __ontimeupdate, onplay, onplaying и т. д. __Некоторые события ведут себя по-разному в разных браузерах и на разных устройствах.
Например: мониторинг ' canplay ' под ios (достаточно ли буферизовано данных для плавного воспроизведения) не будет срабатывать при загрузке, даже если __preload="auto"__ бесполезен, но в отладчике Chrome на ПК Далее будет срабатывает на этапе загрузки. ios необходимо сыграть, прежде чем он запустится.
Загрузка завершена:
Нажмите, чтобы играть:
Загрузка завершена:
Нажмите, чтобы играть
Загрузка завершена:
Нажмите, чтобы играть:
Некоторые события имеют разные характеристики отображения в разных системах, устройствах и браузерах, поэтому будьте осторожны при их использовании.
Добавив элементы управления к этому атрибуту, Gecko предоставит пользователю элементы управления, позволяющие пользователям управлять воспроизведением видео, включая громкость, пересечение кадров и паузу/возобновление воспроизведения.
Атрибут elements указывает, что браузер должен предоставить элементы управления воспроизведением видео, в противном случае элементы управления воспроизведением будут скрыты, и разработчики смогут настраивать свои собственные элементы управления воспроизведением. Скрытие элементов управления воспроизведением хорошо совместимо с ПК и мобильными терминалами IOS. Однако скрытие элементов управления не поддерживается на мобильных терминалах Android, но его все же можно достичь с помощью некоторых методов.
Более хитрый метод — увеличить видео и вынести панель управления из поля зрения, чтобы добиться скрытого эффекта! Фактически, элемент видео становится больше родительского контейнера, так что нижняя панель управления будет находиться за пределами родительского контейнера, а затем для родительского контейнера устанавливается значение: overflow: скрытый, метод скрытия элементов управления воспроизведением! Недостаток в том, что видео будет увеличено, и для увеличения нужно заранее оставить пустое место.
Команда ядра x5 команды Tencent по Android ослабила ограничения на воспроизведение видео. Видео не обязательно вызывают широко критикуемый видеоплеер. Они используют атрибут __x5-video-player-type="h5" для скрытия элементов управления. в то же время __Видео больше не находится сверху, позволяя другим элементам плавать сверху .
Поняв общие сценарии и типичные ошибки воспроизведения видео, мы можем улучшить взаимодействие с пользователем, предоставив соответствующие решения для различных сценариев. Например, страница H5, которая автоматически воспроизводится на мобильном терминале, может косвенно инициировать воспроизведение видео, предлагая пользователям щелкнуть или переместить страницу. Это самый консервативный подход, никаких ошибок! Лучшим решением будет автоматическое воспроизведение по умолчанию и фиксация ситуации, когда воспроизведение запрещено, а затем указание пользователю взаимодействовать для воспроизведения видео.
использовать видео Вначале воспроизведение видео на мобильном терминале было строго ограничено, поскольку оно требовало высокого потребления производительности, высокого потребления трафика и соображений удобства пользователя. Однако с улучшением производительности мобильных телефонов, наступлением эпохи трафика и более сильной сцены. требования, ограничения постепенно ослаблялись, а со стороны ПК постепенно Постепенно от «свободного поколения» к «плотному поколению» оба они постоянно обновляют свои стратегии с целью предоставить пользователям лучший опыт. В будущем они могут стать унифицированными, и разработчики смогут начать с базовой адаптации совместимости. Отпустите его, чтобы у вас было больше энергии для выполнения работы более высокого уровня.
Если вы заинтересованы в нашей команде, вы можете следить за этой колонкой, подписаться на github или отправить свое резюме по адресу «tao.qit####alibaba-inc.com».replace('####', '@'). Присоединиться может каждый, у кого высокие идеалы ~
Исходный адрес: https://github.com/ProtoTeam/blog/blob/master/201806/1.md
