На страничку html поставил видео фон, все работает на андроиде, пк ноутбуке.. но проблема появилась в айфоне - видео фон работает, все как нужно кроме одного, он сужается по ширине (а не обрезается как в андроиде). Помогите пожалуйста это исправить
Вот сам код:
<div id="video_background">
<video class="video" muted="muted" loop="loop" autoplay="autoplay">
<source src="videos/video.webm" type="video/webm">
<source src="videos/video.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>
#video_background {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
background: url(images/photo.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: 50%;
left: 0;
position: absolute;
top: 0;
width: 100%;
background: #000;
z-index: 5;
}
Ссылка на canvas
http://www.develooping.com/wp-content/uploads/2016/04/html-canvas-video-player.zip
Пока что с первой проблемой костылями справился в стилях так: Создал отдельно версию видеофона под айфон
//смотрю, зашли с айфона или нет (ставлю в самом верху странички перед DOCTYPE)
<?php
$browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
if ($browser == true){
$browser = 'iphone';
}
?>
Потом в теле страницы ниже указываю код видеофона. Для андроида и айфона - все почти одинаково только меняю для айфона <video class="video"
на <video class="video2"
<?php if($browser == 'iphone'){ ?>
id="video_background2"
<video class="video2" muted="muted" loop="loop" autoplay="autoplay">
<source src="videos/Scene_1_Logo.webm" type="video/webm">
<source src="videos/Scene_1_Logo.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: '.video2',
canvasSelector: '.canvas',
timelineSelector: false,
autoplay: true,
makeLoop: true,
pauseOnClick: false,
loop: true,
audio: false,
setInterval: 30,
});
}else {
// Use HTML5 video
document.querySelectorAll('.canvas')[0].style.display = 'none';
}
</script>
<?php } ?>
В стилях прописываю только .canvas,.video2
все остальное к нему не применяю
.canvas,
.video2 {
height: 100%;
left: -40%;
position: fixed;
top: 0;
width: 190%;
background: #000;
z-index: -100;
}
Здесь ширина в 190% это примерно и есть полная ширина видео, а left: -40%;
устанавливает видео по центру.
В этом варианте видео обрезается по краям, нет лишних промоток и находится по центру.
Единственная сейчас проблема это цикл видео, чтобы оно постоянно воспроизводилось, а не дошло до конца и остановилось.
loop="loop"
не работает, пробовал написать что то типа "если видео на паузе - видео плей", но это не сработало, наверное я не так что то пишу, можете подсказать как с этим справится?
if (canvasVideo.pause()) {
canvasVideo.play();
}