повторное срабатывание 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? |
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> |
Подскажите, здесь на сайте все хорошо срабатывает, а когда я себе на сайт поставила, то после проигрывания постер появляется и пропадает (((...
|
rognarek,
сравните код этот и тот что у вас. |
да, тексты одинаковые. Скрипт я скопировала, а из исходного кода убрала onclick.
Ничего другого не нашла. Получается, что постер появляется, а потом пропадает и загружается первый кадр видео. http://vcinema.pro/test-2/ |
rognarek,
замените this.load(); строка 33 на myVideo.src = myVideo.currentSrc; myVideo.pause(); |
спасибо!!!!
|
Цитата:
|
rognarek,
не знаю, при load хрому не нравится ссылка на постер. Цитата:
если кто-то знает ответ, подскажите, почему здесь работает load и poster находится, а на другом сайте нет poster после load. |
Часовой пояс GMT +3, время: 02:16. |