html5 video background video on ios

У меня есть следующее видео, которое является частью слайдера.html5 video background video on ios

<div class="slide video-bg"> 
    <video muted webkit-playsinline playsinline poster="/video/3/4_Marching_band-HD_1080p.jpg"> 
     <source src="/video/3/4_Marching_band-HD_1080p.webm" type="video/webm"> 
     <source src="/video/3/4_Marching_band-HD_1080p.mp4" type="video/mp4"> 
     <source src="/video/3/4_Marching_band-HD_1080p.ogv" type="video/ogg"> 
    </video> 
</div>

При загрузке страницы, play() называется на видео. На каждом настольном браузере, который я пробовал, это отлично работает. Но на iOS видео никогда не играет.

Я прочитал https://webkit.org/blog/6784/new-video-policies-for-ios/ и попытался выполнить каждое требование. Я даже добавил атрибут autoplay к видео, хотя я хочу управлять им с помощью js. Видео не имеет звука и отображается при загрузке страницы. Любая идея, почему он не будет играть на iOS?

Страница в вопросе: http://heartland.thinkersites.com/products/

источник

2017-02-14 Craig Harshbarger

он не будет играть, потому что мобильные браузеры требуют взаимодействия с пользователем для того, чтобы играть видео. это означает, что метод воспроизведения должен распространяться из события, которое имеет взаимодействие с пользователем как «onClick». если вы хотите сыграть сразу, вам нужно использовать автовоспроизведение, как вы устали. – MennyMT

@KingpinEX Из ссылки блога webkit.org в моем сообщении «видео-элементы будут разрешены для воспроизведения() без жестов пользователя, если их исходный носитель не содержит звуковых дорожек или если их приглушенное свойство установлено в true». Кроме того, я упомянул, что я попробовал autoplay attr, и это тоже не сработало. –

Добавьте это в CSS, чтобы удалить кнопку неприглядный воспроизведения с устройств IOS:

   *::-webkit-media-controls-panel { 
        display: none!important; 
        -webkit-appearance: none; 
       } 

       *::--webkit-media-controls-play-button { 
        display: none!important; 
        -webkit-appearance: none; 
       } 

       *::-webkit-media-controls-start-playback-button { 
        display: none!important; 
        -webkit-appearance: none; 
       }

источник

2017-02-14 20:47:31

Добавляя атрибут playinline, похоже, сделал это. В настоящее время у меня нет кнопки воспроизведения. Видео не работает автоматически, вот и проблема. –

ответ

Смежные вопросы