Использование «Gifs» в Safari и IOS: видео не воспроизводится автоматически - PullRequest
0 голосов
/ 22 октября 2019

Вместо использования настоящих gif-файлов мы используем mp4-видео, которые зацикливаются (чтобы сэкономить время загрузки)

Однако Safari отказывается от автоматического воспроизведения видео, даже с autoplay loop muted playsinline.

Есть ли способ создания зацикленных видео / гифок, которые не требуют больших размеров файлов и могут автоматически воспроизводиться на мобильных устройствах

Мои теги видео выглядят так:

<video preload autoplay="autoplay" muted="true" playsinline="true" loop>
            <source src= 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4'>
                Your browser does not support video tag
</video>

Также пробовали:

 <video preload autoplay muted playsinline loop>
                <source src= 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4'>
                    Your browser does not support video tag
    </video>

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

if (/* user scrolls to div */){
   document.getElementById('my-video').play();
}

Есть ли способ автоматического воспроизведения видео в Safari или какие-нибудь лучшие альтернативы?

1 Ответ

0 голосов
/ 23 октября 2019

Ваш HTML5 действительно отлично работает с другим исходным видео - в Safari 12.1.1 на Mac OSX 10.14.5 выполняется следующее:

<video preload autoplay="autoplay" muted="true" playsinline="true" loop>
            <source src= 'http://ftp.nluug.nl/pub/graphics/blender/demo/movies/ToS/tears_of_steel_720p.mov'>
                Your browser does not support video tag
</video>

Возможно, возникла проблема с источником видео, который вы использовали, или с сетью или сервером, к которому он подключен - например, он очень медленно загружается и выигралне играть в Chrome или Safari, когда я тестирую его напрямую.

Если вы видите ту же проблему с другим видео, это может быть связано с проблемой формата или с индикацией сервера или сафари, котораябыли замечены ранее, хотя основная причина в настоящее время не ясна: Safari 9.0 не может воспроизводить видео mp4 на сервере хранения

В любом случае, в исходном коде нет ничего очевидногоHTML5 выше.

Для iOS существуют особые правила автоматического воспроизведения - на момент написания статьи это самые последние AFAIK (https://webkit.org/blog/6784/new-video-policies-for-ios/):

По умолчанию WebKit будет иметьследующие политики:

enter image description here

...