Как сделать правильно измение изображения в js?

Question

[gooket]

Уважаемые пользователи, помогите пожалуйста, я не совсем понимаю js, и сам обучаюсь им. Проблема в том что нужно добавить кнопку на видео с функцией Старт, Стоп, и при этом что-бы изменялось изображение. Функция работает, но только при двойном клике.

<button class="buttonplay" id="play" onclick="vidplay()" ></button><br>
		 <SCRIPT language="JavaScript"> // Скрипт выключения видео. 
    function vidplay() {
       var video = document.getElementById("myVideo");
       var button = document.getElementById("play");
	   $(function(){
            $('.buttonplay').click(function(){
                $('.buttonplay').toggleClass('buttonpause');
            });
        });
       if (video.paused) {
          video.play();

       } else {
          video.pause();
       }

    }  
	
</SCRIPT>
<style type="text/css">
.buttonplay{
    margin-left: 50%;
    margin-top: -349px;
    float: left;
    border: 1px;
    border-radius: 0px;
    background: url(/play-active.png) no-repeat;
    padding: 25px;
    background-size: 100%;
	outline: none;
	    cursor: pointer;
}
.buttonpause {
	margin-left: 50%;
    margin-top: -349px;
    float: left;
    border: 1px;
    border-radius: 0px;
    background: url(/media-pause.png) no-repeat;
    padding: 25px;
    background-size: 100%;
	outline: none;
	    cursor: pointer;
}		
</style>

В чем может быть проблема?

Answer 1

[twobomb]

С button Убери onlick="..."
<SCRIPT language="JavaScript">

$(function(){
$("#play").bind("click", function() {
   var video = document.getElementById("myVideo");
  $('#play').toggleClass('buttonpause');
  if (video.paused)
    video.play();
  else
    video.pause();
});
});

</SCRIPT>

Comments

[gooket]

Все равно с 2 кликов, можете сами проверить : Где видео сначала

[twobomb]

gooket: Удалите полностью ваш скрипт и добавьте этот

<SCRIPT language="JavaScript">
$(function(){
$("#play").bind("click", function() {
   var video = document.getElementById("myVideo");
  $('#play').toggleClass('buttonpause');
  if (video.paused)
    video.play();
  else
    video.pause();
});
});
</SCRIPT>

И уберите С button onclick="vidplay()"

[gooket]

twobomb: Сделал, теперь он не хочет работать.

[Stalker_RED]

twobomb: Но почему не .on(), а .bind()? Он же устарел лет шесть назад.

gooket: Откройте консоль, у вас там ошибки. JQuery вы подключаете в конце страницы, а вызывать пытаетесь во вставках в середине.

[twobomb]

Stalker_RED: Какая разница, главное работает. Когда уберут его из Jquery будут использовать on

[Stalker_RED]

twobomb: Не стыдно такое писать?

[twobomb]

Stalker_RED: Какая разница, я обычно использую старые версии библиотеки Jquery, а этот метод deprecated только с 3.0, ну думаю для совместимости его никуда не уберут.