Поставил видео фон на страничку, все хорошо, работает на андроиде, пк, ноуте... но на айфоне видео воспроизводится только один раз, а потом просто останавливается.
Подскажите пожалуйста, как можно сделать так чтобы видео крутилось по циклу постоянно, как на андроиде?
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
(все можно сказать здесь на костылях, среди всего что встречал смог только таким способом поставить видео фон так, чтобы он работал на айфоне)
Сборка персонального компьютера от Artline: умный выбор для современных пользователей