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

Question

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

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

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

Спасибо!

Answer 1

В 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 от 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 2

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

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

Answer 3

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

Answer 4

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

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

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

Answer 5

Поскольку у iOS10 есть решение, см. Здесь: https://webkit.org/blog/6784/new-video-policies-for-ios/

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

Answer 6

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

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

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

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

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

Answer 7

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

Я вижу три варианта, при условии, что вам не нужен звук:

• ИспользованиеGIF вместо видео.В зависимости от анимации, размер файла будет стремительно расти, хотя
• Используйте очень длинный jpg или png, содержащий каждый кадр видео, а затем перемещайтесь по ним с помощью javascript
• Декодируйте видео с помощью javascript.Например, используйте этот декодер h.264 и воспроизводите видео с хорошим сжатием .Единственным недостатком, который я вижу, является то, что для декодирования требуется довольно много ЦП.

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

Answer 8

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