Показать сообщение отдельно
  #2 (permalink)  
Старый 22.08.2018, 23:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

video and poster
rognarek,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .fullscreen-bg img{
        width: 100%;
    }
  </style>
</head>

<body>
<div class="fullscreen-bg">
	<img  id="im_but" class="fullscreen-bg__video"  src="http://vcinema.pro/images/bg_glavnaya.png" style="position:absolute; z-index:1000; left:0; top:0;"/>
		<video id="video_main" class="fullscreen-bg__video video-js vjs-default-skin" preload="none" width="100%" poster="http://vcinema.pro/images/FON_GLAV.jpg" data-setup="{}">
			<source src="http://vcinema.pro/wp-content/uploads/2018/08/SOS_GLAVNAYA.mp4" type='video/mp4' />
			<source src="http://vcinema.pro/wp-content/uploads/2018/08/SOS_GLAVNAYA.webm" type='video/webm' />
		</video>

</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
    var btn = document.getElementById("im_but");
    var myVideo = document.getElementById("video_main");
    btn.addEventListener("click", function() {
        btn.style.display = "none";
        myVideo.play()
    });
    myVideo.addEventListener("ended", function() {
        //this.load();
        myVideo.src = myVideo.currentSrc;
        myVideo.pause();
        btn.style.display = "block"
    })
});
</script>


</body>

</html>

Последний раз редактировалось рони, 23.08.2018 в 18:05.
Ответить с цитированием