Как зациклить видео фон на iphone?

205
05 февраля 2020, 22:00

Поставил видео фон на страничку, все хорошо, работает на андроиде, пк, ноуте... но на айфоне видео воспроизводится только один раз, а потом просто останавливается.

Подскажите пожалуйста, как можно сделать так чтобы видео крутилось по циклу постоянно, как на андроиде?

loop="loop" не работает.

Как написать к примеру правило "если видео = pause то видео = play" не нашел, не понял.

Вот сам код:

<?php
  $browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    if ($browser == true){
    $browser = 'iphone';
  }
?>
 <!-- ВИДЕО ФОН ДЛЯ АНДРОИДА -->
<?php if($browser !== 'iphone'){ ?>
 <div id="video_background">
  <video class="video" muted="muted" loop="loop" autoplay="autoplay">
    <source src="videos/test.webm" type="video/webm">
    <source src="videos/test.mp4" type="video/mp4">
  </video>
  <canvas class="canvas"></canvas>
</div>
<script src="/js/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>
<?php } ?>
<!-- ВИДЕО ФОН ДЛЯ АНДРОИДА -->
<!-- ВИДЕО ФОН ДЛЯ АЙФОНА -->
<?php if($browser == 'iphone'){ ?>
 <div id="video_background2">
    <video id="myVideo" class="video2" muted="muted" loop="loop" autoplay="autoplay">
        <source src="videos/test.webm" type="video/webm">
        <source src="videos/test.mp4" type="video/mp4">
    </video>
    <canvas class="canvas"></canvas>
</div>
<script src="/js/canvas-video-player.js"></script>
<script>
var isIOS = /iPad|iPhone|iPod/.test(navigator.platform);
    var canvasVideo = new CanvasVideoPlayer({
        videoSelector: '.video2',
        canvasSelector: '.canvas',
        play: true,
        timelineSelector: false,
        autoplay: true,
        makeLoop: true,
        pauseOnClick: false,
        audio: false,
        setInterval: 1,
    });
var a=0;
a=a+1;
while (a!=3)
{
    CanvasVideoPlayer = new CanvasVideoPlayer2({
    autoplay: true,
});
};
</script>
<?php } ?>
<!-- ВИДЕО ФОН ДЛЯ АЙФОНА -->
/*ДЛЯ ВИДЕО ФОНА*/
#video_background {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
    /*background: url(images/marathon.jpg) no-repeat #000000;*/
    background-size: cover;
}
#video_background > video {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto;
    height: auto; 
 }
 @supports (object-fit: cover) {
     #video_background > video {
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
     }
 }
 .canvas,
.video {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
background: #000;
z-index: 5;
}
/*ВИДЕО ФОН АЙФОН*/
 .canvas,
.video2 {
height: 100%;
left: -40%;
position: fixed;
top: 0;
width: 190%;
background: #000;
z-index: -100;
}

Ссылка на canvas

http://www.develooping.com/wp-content/uploads/2016/04/html-canvas-video-player.zip

(все можно сказать здесь на костылях, среди всего что встречал смог только таким способом поставить видео фон так, чтобы он работал на айфоне)

READ ALSO
Отступы между блоками в bootstrap

Отступы между блоками в bootstrap

Всем приветКак сделать между блоками отступ?

262
Не работает clip-path в IE 11.0.120

Не работает clip-path в IE 11.0.120

Всем привет! Много гуглил, пробовалНе работает clip-path, не могу разобраться почему

236
Мета-тег &ldquo;Viewport&rdquo;

Мета-тег “Viewport”

Скажите пожалуйста, возможно ли без мета-тега "Viewport" сделать сайт адаптивным(задавая медиа-запросы)? Спасибо

285
Ошибка в работе с библиотекой gumbo

Ошибка в работе с библиотекой gumbo

Полностью скопировал код с официальной странички с гитхаба - https://githubcom/google/gumbo-parser#basic-usage Единственное что поменял это #include "gumbo

215