0

Доброго времени суток. Ситуация такая: на сайте есть видео, вставил его с помощью тега video, так сделал кнопку плэй и пауза, по умолчанию видео проигрывается сразу как только загрузилась страница, и картинка у кнопки стоит Пауза. Я сделал что бы по клику на кнопку у видео срабатывает пауза, но мне нужно что бы еще и менялась картинка с Паузы на Плэй.

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

1 ответ 1

1

Вы должны при клике второй раз удалять этот класс, который вы добовляли:

$(".play-pause").click(function() {
  $(this).toggleClass("pause");
});
.play-pause {
  width: 70px;
  height: 70px;
  background-image: url(data:image/png;base64,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);
  background-size: cover;
}

.pause {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAFYUlEQVR4Xu2dTWhcVRTHz7kzMUFJQlWsIm6Crlxo5r1JBAumoKA7oVBx0YofyUtRpH6A2+C+VQQTX0SKxEVBF+JKQW1ABTvzXiq6tIioC7EtxdSPTJO8KzNpobowN+258z7Ov9ued+49v/PjD3lMJkz4p5oAq54ewxMEUC4BBIAAygkoHx8JAAGUE1A+PhIAAignoHx8JAAEUE5A+fhIAAignIDy8ZEAEEA5AeXjIwEggHICysdHAkAA5QSUj48EgADKCSgfHwkAAZQTUD4+EgACKCegfHwkAARQTkD5+EgACKCcgPLxkQAQQDkB5eMjASCAcgLKx0cCQIBqEAgX2/s2LceUZdYYM51G4YeSkwVxcj2TPWCZa0O1taWvnt5zQbJ/Xr0qkwDjcXLWEN3UA5llZ9JDE7dIQm3E6QdMdl+3p83405VDwUOS/fPqVRkBgjixV0JMo1B0tmC+9QfVzA2Xzxjb9UP9/f37N/NanNS5opCkLnU1fXwLEMbt45b4se7dmOzHSdR85GruWbRnIIDjRqaOnRhavThykNnW14cG3v324D1/Oj5a6DIIUOj1+L8cBPDPuNAnQIBCr8f/5SCAI+PJt7/evbFZf7n7HmDArB89OX3fL46PFroMAjiup7GQLrOxD/TKLX2Tzobjjo8WugwCOK6nsZCssqHhrfIsG9v143V4D+AIrx9lfXgP8JolPnzpPcCxJGo+1Y+5fJ+BBHAlbC0Hi+kUW1tPfg0/oznOXB8tch0EKPJ2+nA3CNAHyEU+AgIUeTt9uBsEcITs+/MGjtcQL4MAjkh9f97A8RriZRDAEanvHzMdryFeBgEckUIAR1B5lflekO/+eXFDAjiShwCOoPIq870g3/3z4oYEcCQPARxB5VXme0G+++fFDQngSB4COILKq8z3gnz3z4sbEsCRPARwBJVXme8F+e6fFzckgCN5COAIKq8y3wvy3T8vbkgAR/IQwBFUXmW+F+S7f17cKpMA4wutM8aYm7dAZr+l0cRuSagQQJKmh15BnDxKWbZIhiwzTyczzY8kj4EAkjRL2AsClHBpkleGAJI0S9gLApRwaZJXhgCSND31as63x8ja9fazEz9LHwEBpIkK9wsWkyNk6cVeW0svpbPhUckjIIAkTeFed77x/eDo4Pm/iIzBe4Cdwa3Gi6A5a4Lb0p+I6PbeayCm1qmZcHJnKP6/GgkgSdNDryBOGtbaVw1TJ6uZV1aeCU5LHgMBJGmWsBcEKOHSJK8MASRplrAXBCj40qbmTtRXbx15kNl20plgmZj/9eXR13p9CHCtBD0/f+XXuTPZ15Oo+YLkkRBAkqZwr+4XOV+4OPz35bYZ0blTUXjpswEyh0EAGY5+unS/wStOvyOmu7feBGafpLMTD0seBgEkaXro1XyzdUc2YA5TRp3axuaR1nOT5ySPgQCSNEvYCwKUcGmSV4YAkjRL2AsCFHxpQZyMdv+sW8amMzKwurT85N41yStDAEmaHnrdO3/yi1qttqf3QwDx8ZUoeFzyGAggSVO413/fAxDZ82nUvFHyGAggSdNDr8Zb7c+ZeW+3NZN9L4maBySP8f2LJ5J33UmvanwghIjuf+fL4c7G4BOWeO33zujS6efv6uwExHa1vn/xZLvzff1/ZQTwBajqfSFA1Te8zXwQAAIoJ6B8fCQABFBOQPn4SAAIoJyA8vGRABBAOQHl4yMBIIByAsrHRwJAAOUElI+PBIAAygkoHx8JAAGUE1A+PhIAAignoHx8JAAEUE5A+fhIAAignIDy8ZEAEEA5AeXjIwEggHICysdHAkAA5QSUj48EgADKCSgfHwkAAZQTUD7+P0FaIZ9uHW85AAAAAElFTkSuQmCC);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="play-pause"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.