HTML5 видео на iPad/iphone

Ответ 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-холст-видеоплеер script от 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 используется следующим образом

<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;
}

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

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 5

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

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

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

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

Ответ 6

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

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

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

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

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

Ответ 7

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