HTML5 видео фона на iPad/iphone

Question

Я использовал this solution, чтобы использовать html5-видео в качестве фона моего сайта.

Однако, похоже, что это не работает на iPad/iphone, все, что я получаю, это черный экран, и видео не изменяется.

Кроме того, видео не изменяет размер правильно, если соотношение сторон окна не совпадает с соотношением сторон видео. Вы увидите, что фоновое изображение начинает становиться видимым.

Спасибо!

Answer 1

К сожалению, iPad не поддерживает автоматическое воспроизведение видео, поэтому вам понадобится кнопка воспроизведения/остановки/паузы. Вот пример того, что работает на iPad: http://html5-fullscreen-video.ceseros.de/html_5_fullscreen/movie/1

Answer 2

SquareSpace использует интересный подход к «имитации» видео на своем сайте с помощью умной петли .png и наложений. См http://www.squarespace.com/

Если вы просеять через HTML вы найдете последовательность рук здесь: http://cf.squarespace.com/details/musician-hand-sequence-hires.png

Он работает на телефонах .. Просто что-то думать.

Answer 3

Единственный способ автовоспроизведения видео на мобильных устройствах - это вырезать тег видео html.

Я вижу три варианта, если вам не нужно аудио:

• Используйте GIF вместо видео. В зависимости от анимации размер файла будет увеличиваться, но
• Используйте очень длинный jpg или png, который содержит каждый кадр видео, а затем сдвигайте их с помощью javascript
• Декодируйте видео с помощью javascript. Например, use this h.264 decoder and play videos with good compression. Единственный недостаток, который я вижу, заключается в том, что для декодирования требуется довольно некоторый процессор.

Я пошел на последнее решение, и оно отлично работает.

Answer 4

я наткнулся на то, что может помочь вам с этой задачей ..

http://vagnervjs.github.io/frame-player/

Сво игрок JS, который получает список JSON изображений, представляющих кадры из видео.

Это также обеспечит гибкость в отношении вариантов укладки самого видео и отзывчивость ..

• Вы можете загрузить другой набор изображений (ниже по качеству) для suuport IPADS vs. поддержки рабочего стола, например, ,

Answer 5

Самый простой способ, я думаю, просто использовать gif для фона. Например, вы можете конвертировать его онлайн, как в http://ezgif.com/video-to-gif

Answer 6

В http://www.develooping.com/canvas-video-player/ вы можете увидеть отзывчивый mp4-фон, работающий в iPad/iPhone. Загрузите код от http://www.develooping.com/wp-content/uploads/2016/04/html-canvas-video-player.zip.Он использует адаптированную версию HTML canvas video player script by Stanko;

<div class="video-responsive"> 
    <video class="video" muted="muted" loop="loop" autoplay="autoplay"> 
    <source src="mY_movie.mp4" type="video/mp4"> 
    Your browser does not support HTML5 video. 
    </video> 

<canvas class="canvas"></canvas>   

<div id="over_video">Look at me</div> 
</div> 

Скрипт используется следующим образом

<script src="canvas-video-player.js"></script> 
<script> 

var isIOS = /iPad|iPhone|iPod/.test(navigator.platform); 

if (isIOS) { 

    var canvasVideo = new CanvasVideoPlayer({ 
     videoSelector: '.video', 
     canvasSelector: '.canvas', 
     timelineSelector: false, 
     autoplay: true, 
     makeLoop: true, 
     pauseOnClick: false, 
     audio: false 
    }); 

}else { 

    // Use HTML5 video 
    document.querySelectorAll('.canvas')[0].style.display = 'none'; 

} 

</script> 

CSS-это

body { 
background: #000; 
padding:0; 
margin:0; 
} 
.video-responsive { 
padding-bottom: 56.25%; 
position: relative; 
width: 100%; 
} 

.canvas, 
.video { 
height: 100%; 
left: 0; 
position: absolute; 
top: 0; 
width: 100%; 
background: #000; 
z-index: 5; 
} 
#over_video{ 
position: absolute; 
width: 100%; 
height: 100%; 
text-align: center; 
top: 0; 
z-index: 10; 
font-size: 12vw; 
color: #FFF; 
font-family: Verdana, Arial, Helvetica, sans-serif; 
margin-top: 20%; 
text-shadow: 4px 4px 4px #5C433B; 
} 

Надеется, что это может помочь.

Answer 7

Просто отметьте как запись. В настоящее время поддерживается возможность поддержки фонового видео (iOS 10 +) из-за новых политик WebKit.

Чтобы уточнить, пожалуйста, ознакомьтесь с официальным документом ниже. https://webkit.org/blog/6784/new-video-policies-for-ios/

Answer 8

С iOS10 есть решение, смотрите здесь: https://webkit.org/blog/6784/new-video-policies-for-ios/

На iPhone, <video playsinline> элементы теперь будут разрешено играть рядным, а не автоматически перейдут в полноэкранном режим, когда начинается воспроизведение. <video> Элементы без атрибутов playinline будут по-прежнему нуждаться в полноэкранном режиме для воспроизведения на iPhone. При выходе из полноэкранного режима с жестким пинчем, элементы без playinline будут продолжать играть в линию.