Премиальное программное обеспечение и практические уроки
iOSНет никаких проблем с реализацией автовоспроизведения на мобильных телефонах, добавьте приглушенный После атрибутаАвтовоспроизведение, только что включил беззвучный режим.АндроидНа некоторых телефонах есть кнопка начала воспроизведения, которую можно нажать для начала воспроизведения, но на некоторых телефонах кнопка отсутствует, и видео не воспроизводится. Одним из решений является добавление приглушенный Свойство (mute), но результат таков: звук есть, но процесса воспроизведения нет.
Устройства на ПК и Android используют hls.js для реализации автоматического воспроизведения потоков hls, а также полноэкранного и неполноэкранного воспроизведения.
Первое использованиеhls.jsплагины, может реализовать автоматическое воспроизведение и полноэкранный и не-Полноэкранное воспроизведение.
Однако воспроизведение на телефонах Apple не поддерживается. На официальном сайте HLS указано, что библиотека использует MSE. HTML5-видео и Расширения MediaSource Для воспроизведения. После проверки MSE не поддерживает iOS. Скриншот mdn выглядит следующим образом:
Резюме: И ПК, и Android поддерживают hls.js, но iPhone — нет. К счастью, я обнаружил, что тег video поддерживает воспроизведение hls.js.
Исследование: мобильный телефон Apple использует видео для автоматического воспроизведения потока HLS.
После тестирования необходимо нажать кнопку воспроизведения для воспроизведения, автоматическое воспроизведение невозможно, причина в следующем (Новый):
Перевод + тест выглядит следующим образом:
Для автоматического воспроизведения должны быть выполнены следующие условия:
1.
2.
3.
4. Разрешить элементам воспроизводиться в строке и не переходить автоматически в полноэкранный режим при запуске воспроизведения, также известное как playinginline webkit-playsinline.
Если воспроизведение уже идет автоматически, то любая из следующих ситуаций приостановит автоматическое воспроизведение:
1. Элемент становится невидимым, например, при прокрутке за пределы области просмотра.
2.
После тестирования видео имеет следующие свойства и может воспроизводиться автоматически:
Краткое описание: Используйте атрибут autoplay muted playinginline="true" webkit-playsinline="true" для включения автоматического воспроизведения. Более серьёзная проблема заключается в том, что автоматическое воспроизведение происходит без звука.
Компромисс: телефоны Apple не нуждаются в автоматическом удержании и требуют воспроизведения в полноэкранном и неполноэкранном режимах.
Измените код для автоматического воспроизведения элементов управления playinginline="true" webkit-playsinline="true". Нажмите, чтобы воспроизвести (автоматически откроется полноэкранный режим). В iOS 13 сведите пальцы, чтобы воспроизвести встроенное воспроизведение. В iOS 13 и более ранних версиях сведите пальцы, чтобы воспроизвести видео, и оно снова откроется на весь экран.
После поиска код был изменён на следующий:
x-webkit-airplay="allow" обязателен. Этот атрибут должен включить поддержку AirPlay для этого видео в iOS. Однако добавление этого кода позволит воспроизводить видео в режиме реального времени на устройствах iOS ниже 13, но его удаление не сработает. x5-playsinline запрещает полноэкранное воспроизведение в WeChat.
Подведем итоги:
1. ПК и Android поддерживают hls.js, но iPhone — нет.
2. Телефоны Apple могут использовать видео для воспроизведения потоков HLS. Использование атрибута autoplay muted playinginline="true" webkit-playsinline="true" позволяет включить автоматическое воспроизведение. Более серьёзная проблема заключается в отсутствии звука во время автоматического воспроизведения.
3. Для встроенного воспроизведения на iOS 13 и ниже необходимо добавить x-webkit-airplay="allow" .
