Поставил видео фон на страничку, все хорошо, работает на андроиде, пк, ноуте... но на айфоне видео воспроизводится только один раз, а потом просто останавливается.
Подскажите пожалуйста, как можно сделать так чтобы видео крутилось по циклу постоянно, как на андроиде?
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
(все можно сказать здесь на костылях, среди всего что встречал смог только таким способом поставить видео фон так, чтобы он работал на айфоне)
Виртуальный выделенный сервер (VDS) становится отличным выбором
Всем привет! Много гуглил, пробовалНе работает clip-path, не могу разобраться почему
Скажите пожалуйста, возможно ли без мета-тега "Viewport" сделать сайт адаптивным(задавая медиа-запросы)? Спасибо
Полностью скопировал код с официальной странички с гитхаба - https://githubcom/google/gumbo-parser#basic-usage Единственное что поменял это #include "gumbo