Как переключаться между кнопкой воспроизведения и паузы?

По сути, я хотел бы знать лучший способ переключения между двумя img или div при щелчке пользователя. Итак, сначала воспроизводится изображение воспроизведения, и когда пользователь щелкает, изображение воспроизводится скрыто и отображается пауза изображения. Когда пользователь нажимает на паузу, приостановка изображения скрыта и отображается изображение воспроизведения.Как переключаться между кнопкой воспроизведения и паузы?

Я пробовал использовать ng-show, но я мог только выяснить, как показывать оба изображения, не скрывая другого. Таким образом, изображение воспроизведения будет рядом с изображением паузы, что не является идеальным.

Заранее спасибо :)

Code Я пробовал не работает:

HTML

<button ng-click="changeStatus" ng-show="checkStatus">Play</button> 
<button ng-click="changeStatusAgain" ng-hide="checkStatus">Pause</button>

Контроллер:

$scope.changeStatus=function(){ 
    $scope.checkStatus = false; 
} 

$scope.changeStatusAgain=function(){ 
    $scope.checkStatus = true; 
}

https://jsfiddle.net/n8nnwtte/

источник

2016-02-08 MehdiN

Похоже, вам нужно проверить http://stackoverflow.com/help/how-to-ask. Вы должны опубликовать MVCE вашей попытки, что она делает неправильное/нежелательное поведение и что вы хотите сделать. Кроме того, вопросы, которые следуют за «наилучшим способом для X», не соответствуют темам, поэтому вы можете рассмотреть и сужение этого, когда вы переписываете. – CollinD

Получил! Я сделаю быстрый переписывание со всем кодом, который я пробовал. Спасибо :) – MehdiN

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

HTML

<button class="play" ng-show="!song.playing" ng-click="song.togglePlay()"> 
<button class="pause" ng-show="song.playing" ng-click="song.togglePlay()">

var $scope.song = { 
    playing: false, // Set the initial state 

    togglePlay: function() { 
     $scope.song.playing = !$scope.song.playing; // This would alternate the state each time 

     // Do something with the song 
     if ($scope.song.playing) { /*..*/ } else { /*..*/ } 
    } 
};

Это предполагает, что вы есть song объект, определенный в Вашей области и что он имеет логическое свойство playing. Поэтому, если song.playing является ложным, мы показываем кнопку воспроизведения, и если это правда, мы показываем кнопку паузы.

Определенный метод togglePlay() может быть использован для чередования состояния song.playing в дополнение к его роли, фактически контролирующей воспроизведение.

источник

2016-02-08 05:35:28 Boaz

Ваше решение отлично, но немного сложно для моей проблемы. Я включил логическое свойство, основанное на ng-click, но по какой-либо причине оно не переключается при нажатии. Я добавил код выше, чтобы показать вам, что я написал. :) – MehdiN

@MehdiN Ваш обновленный код кажется действительным, хотя и запутанным. Возможно, что в исходном коде чего-то не хватает, что приводит к сбою. Я обновил свой пример, используя ту же логику, что и раньше. – Boaz

JavaScript Переключение (Воспроизведение/Пауза) Звук на Click Событие DOM Element

свой пост показывает, как можно переключать (воспроизведение/пауза) звук, манипуляции JavaScript в OnClick случае DOM элемента. В этом примере поддержка браузера HTML5 аудиотеки является обязательной.

https://siongui.github.io/code/javascript-sound/toggle.html

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JavaScript Toggle (Play/Pause) Sound on Click Event of DOM Element</title> 
</head> 
<body> 

<button id="player" type="button" 
    onclick="javascript:toggleSound();"> 
    Click to Toggle Sound 
</button> 
<audio id="audio"> 
    <source src="Wat_Metta_Buddha_Qualities.mp3" type="audio/mpeg"> 
Your browser does not support this audio format. 
</audio> 

<script type="text/javascript"> 
function toggleSound() { 
    var audioElem = document.getElementById('audio'); 
    if (audioElem.paused) 
    audioElem.play(); 
    else 
    audioElem.pause(); 
} 
</script> 

</body> 
</html>

источник

2016-02-08 05:40:13

Как переключаться между кнопкой воспроизведения и паузы?

ответ

Смежные вопросы