Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.08.2018, 19:40
Интересующийся
Отправить личное сообщение для rognarek Посмотреть профиль Найти все сообщения от rognarek
 
Регистрация: 12.08.2010
Сообщений: 14

повторное срабатывание play()
При нажатии на картинку воспроизводиться видео.
После окончания видео я опять загружаю постер.
Но когда повторно на картинку нажимаю, то видео не играет (((
<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,980

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.
Ответить с цитированием
  #3 (permalink)  
Старый 23.08.2018, 11:54
Интересующийся
Отправить личное сообщение для rognarek Посмотреть профиль Найти все сообщения от rognarek
 
Регистрация: 12.08.2010
Сообщений: 14

Подскажите, здесь на сайте все хорошо срабатывает, а когда я себе на сайт поставила, то после проигрывания постер появляется и пропадает (((...
Ответить с цитированием
  #4 (permalink)  
Старый 23.08.2018, 12:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,980

rognarek,
сравните код этот и тот что у вас.
Ответить с цитированием
  #5 (permalink)  
Старый 23.08.2018, 16:39
Интересующийся
Отправить личное сообщение для rognarek Посмотреть профиль Найти все сообщения от rognarek
 
Регистрация: 12.08.2010
Сообщений: 14

да, тексты одинаковые. Скрипт я скопировала, а из исходного кода убрала onclick.
Ничего другого не нашла.
Получается, что постер появляется, а потом пропадает и загружается первый кадр видео.
http://vcinema.pro/test-2/
Ответить с цитированием
  #6 (permalink)  
Старый 23.08.2018, 18:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,980

rognarek,
замените this.load(); строка 33
на
myVideo.src = myVideo.currentSrc;
        myVideo.pause();
Ответить с цитированием
  #7 (permalink)  
Старый 23.08.2018, 18:58
Интересующийся
Отправить личное сообщение для rognarek Посмотреть профиль Найти все сообщения от rognarek
 
Регистрация: 12.08.2010
Сообщений: 14

спасибо!!!!
Ответить с цитированием
  #8 (permalink)  
Старый 23.08.2018, 21:10
Интересующийся
Отправить личное сообщение для rognarek Посмотреть профиль Найти все сообщения от rognarek
 
Регистрация: 12.08.2010
Сообщений: 14

Сообщение от рони Посмотреть сообщение
rognarek,
замените this.load(); строка 33
на
myVideo.src = myVideo.currentSrc;
        myVideo.pause();
Поясните, пожалуйста, почему так? не пойму никак. почему на сайте здесь работало, а на родном нет. myVideo.pause понятно, первая из этих двух строчек непонятна. Почему пришлось так заменить.
Ответить с цитированием
  #9 (permalink)  
Старый 23.08.2018, 21:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,980

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Кнопка Play при нажатии меняется на Pause и наоборот andrey3681 Элементы интерфейса 3 08.08.2016 22:34
События - focusout и click отменить повторное срабатывание функции egorychmaster Элементы интерфейса 1 25.06.2015 13:35
Повторное срабатывание .load() у iframe при смене его src vita1ii Events/DOM/Window 5 09.10.2013 12:49
Повторное нажатие vladimircape jQuery 6 17.12.2012 16:03
Повторное срабатывание события Vhornets Events/DOM/Window 3 15.12.2012 20:15