Как включить автовоспроизведение видео в ios 5s+ (safari)?

Question

[Леонид Горшков]

Добрый день,
Не могу воспроизвести видео в iphone 5s, 10. По крайней мере без элементов управления (навигации в видео).
Код выглядит так:

<video id="video1" autoplay="autoplay" loop="true" muted="muted" width="100%" height="auto" poster="http://dellakeramika.ru/assets/template/della/video/della/rise5.jpg">
    <source src="http://dellakeramika.ru/assets/template/della/video/della/rise5.mp4" type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;">
</video>

Тестирую на странице: Link

Я уже очень много прочитал про это и испробовал все способы что советуют на разных сайтах. Не помогло.
Очень надеюсь что у вас есть решение или же вы поможете его выдумать. Спасибо.

PS: На android, и прочих десктопных браузерах работает (на Mac не пробовал, нет возможности).

Answer 1

[Sergey]

Добавь атрибут playsinline тегу video
И еще, по-хорошему, добавить бы видео в форматах .webm и .ogv

Comments

[Дмитрий]

playsinline заставляет видео проигрываться в блоке, где оно размещено - без разворота на весь экран. А вопрос был про автовоспроизведение, котороое запрещено на iOS

[Вася Борисевич]

Дмитрий, Ну если оно запрещено, значит оно запрещено. Логично же?

[Sergey]

Так, вроде бы, видео там в блоке и размещено

[Дмитрий]

Вася Борисевич, конечно логично. Но вопрос то был, как это дело обойти?) И кстати, вопрос не мой, просто я отреагировал на комментарий.

[Вася Борисевич]

Дмитрий, Да я понимаю)

Answer 2

[Леонид Горшков]

Вот в этом куске кода оно не воспроизводится на iphone (хотя там имеются все необходимые атрибуты)

spoiler

<section>
        <div class="bg-vide" data-vide-bg="assets/template/della/video/della/rise5" data-vide-options="posterType: jpg">
            <div style="position: absolute; z-index: -1; top: 0px; left: 0px; bottom: 0px; right: 0px; overflow: hidden; background-size: cover; background-color: transparent; background-repeat: no-repeat; background-position: 50% 50%; background-image: none;">
                <video autoplay="" muted="" loop="" playsinline="" preload="metadata" poster="assets/template/della/video/della/rise5.jpg" controls="controls" style="margin: auto; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: visible; opacity: 1; width: auto; height: 906px;">
                    <source src="assets/template/della/video/della/rise5.webm" type="video/webm; codecs=vp8, vorbis" muted="">
                    <source src="assets/template/della/video/della/rise5.mp4" type="video/mp4 codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" muted="">
                    <source src="assets/template/della/video/della/rise5.ogv" type="video/ogg; codecs=theora, vorbis" muted="">
                </video>
            </div>
            <section class="context-dark bg-overlay-gray-darkest">
                <div class="shell">
                    <div class="range">
                        <div class="section-110 section-cover range range-md-center range-md-middle">
                            <div class="cell-md-12">
                                <h1 class="text-uppercase text-ubold text-spacing-60"><span class="circe-light big">H1</span></h1>
                                <h4 class="circe-extraLight offset-top-14 offset-sm-top-20 text-light">Текст</h4>
                                <div class="group offset-top-14 offset-sm-top-30"><a class="btn btn-primary" href="#" target="_blank">youtube</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </section>

Сам тег video:

spoiler

<video autoplay="" muted="" loop="" playsinline="" preload="metadata" poster="assets/template/della/video/della/rise5.jpg" controls="controls" style="margin: auto; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: visible; opacity: 1; width: auto; height: 906px;">
    <source src="assets/template/della/video/della/rise5.webm" type="video/webm; codecs=vp8, vorbis" muted="">
    <source src="assets/template/della/video/della/rise5.mp4" type="video/mp4 codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" muted="">
    <source src="assets/template/della/video/della/rise5.ogv" type="video/ogg; codecs=theora, vorbis" muted="">
</video>

Исходник - dellakeramika.ru (на главной странице)
В чем может быть проблема?