Форум

rognarek · #1 (**permalink**) 22.08.2018, 19:40

При нажатии на картинку воспроизводиться видео.
После окончания видео я опять загружаю постер.
Но когда повторно на картинку нажимаю, то видео не играет (((

<div class="fullscreen-bg">
	<img onclick="playClip(myVideo);" id="im_but" class="fullscreen-bg__video"  src="../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="../images/FON_GLAV.jpg" data-setup="{}">
			<source src="../08/SOS_GLAVNAYA.mp4" type='video/mp4' />
			<source src="../08/SOS_GLAVNAYA.webm" type='video/webm' />
		</video>
	
</div>

вот js

var myVideo = document.getElementById("video_main");
function playClip(media) {
  media.play();
  document.getElementById('im_but').style.display = "none";
}
var myVideo_ = document.getElementById("video_main");
myVideo.onended = function() {
	document.getElementById('im_but').style.display = "block";
	myVideo.poster = "http://vcinema.pro/images/FON_GLAV.jpg";
};
var myVideo = document.getElementById('video_main');
myVideo.addEventListener("ended", function (){
    this.src = this.src;
});

не бейте тапками за грязный код, не могу понять, как один раз переменную задать, чтобы она глобальной была. Пришлось несколько раз, знаю, что не правильно. Но я еще почитаю об этом.
Помогите, пожалуйста, с тем, чтобы когда второй раз нажимаешь на картинку, то видео проигрывалось. Причем стиль применяется (display=none). Наверно надо что-то прописать к событию addEventListener?

рони · #2 (**permalink**) 22.08.2018, 23:43

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>

rognarek · #3 (**permalink**) 23.08.2018, 11:54

Подскажите, здесь на сайте все хорошо срабатывает, а когда я себе на сайт поставила, то после проигрывания постер появляется и пропадает (((...

рони · #4 (**permalink**) 23.08.2018, 12:13

rognarek,
сравните код этот и тот что у вас.

rognarek · #5 (**permalink**) 23.08.2018, 16:39

да, тексты одинаковые. Скрипт я скопировала, а из исходного кода убрала onclick.
Ничего другого не нашла.
Получается, что постер появляется, а потом пропадает и загружается первый кадр видео.
http://vcinema.pro/test-2/

рони · #6 (**permalink**) 23.08.2018, 18:05

rognarek,
замените this.load(); строка 33
на

myVideo.src = myVideo.currentSrc;
        myVideo.pause();

rognarek · #7 (**permalink**) 23.08.2018, 18:58

спасибо!!!!

rognarek · #8 (**permalink**) 23.08.2018, 21:10

Сообщение от рони

rognarek,
замените this.load(); строка 33
на

myVideo.src = myVideo.currentSrc;
        myVideo.pause();

Поясните, пожалуйста, почему так? не пойму никак. почему на сайте здесь работало, а на родном нет. myVideo.pause понятно, первая из этих двух строчек непонятна. Почему пришлось так заменить.

рони · #9 (**permalink**) 23.08.2018, 21:25

rognarek,
не знаю, при load хрому не нравится ссылка на постер.

Цитата:

Если атрибут poster не указан, браузер постарается отобразить первый кадр видео

myVideo.src = myVideo.currentSrc; тотже load но немного иначе.
если кто-то знает ответ, подскажите,
почему здесь работает load и poster находится, а на другом сайте нет poster после load.

Форум

Справочник

Discord чат

Курсы javascript