Вопрос о видео фоне

152

25 января 2019, 10:10

Как сделать для мобильный устройст видеофон ?
http://wingy.host/item/0004/0001 Вот на первом экране есть видео при нажатии. Сайт только для мобилок. Нужно сделать так что серый участок был фоном это первый кадр с видео которое воспроизводится. Для того что имеем сейчас использовался jplayer.

Answer 1

var vid = document.getElementById("myVideo");  
 
function playVid() {  
    vid.play();  
}  
 
function pauseVid() {  
    vid.pause();  
}

/* Style the video: 100% width and height to cover the entire window */ 
#myVideo { 
    position: fixed; 
    right: 0; 
    bottom: 0; 
    min-width: 100%;  
    min-height: 100%; 
} 
 
/* Add some content at the bottom of the video/page */ 
.content { 
    position: fixed; 
    bottom: 0; 
    left:0; 
    right:0; 
    background: rgba(0, 0, 0, 0.5); 
    color: #f1f1f1; 
    width: 100%; 
    padding: 20px; 
} 
 
/* Style the button used to pause/play the video */ 
#myBtn { 
    width: 200px; 
    font-size: 18px; 
    padding: 10px; 
    border: none; 
    background: #000; 
    color: #fff; 
    cursor: pointer; 
} 
 
#myBtn:hover { 
    background: #ddd; 
    color: black; 
}

<!DOCTYPE html>  
<html>  
<body>  
  
 <video autoplay muted playsinline webkit-playsinline loop id="myVideo">  
  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">  
  Your browser does not support HTML5 video. 
</video> 
 
<!-- Optional: some overlay text to describe the video --> 
<div class="content"> 
<button onclick="playVid()" type="button">Play Video</button> 
<button onclick="pauseVid()" type="button">Pause Video</button><br>  
 
</div>   
 
</body>  
</html>