I have a button that plays and stops a video. How can I toggle between the .play() and .pause() efficiently?
<button id="thebutton" onclick="BV.getPlayer().play();"></button>
-
1C Sharper answered below, however you could have looked at the code on the BigVideo homepage because they toggle between pause and play with a checkbox. Always try first, and then ask: dfcb.github.io/BigVideo.jsdegenerate– degenerate2014-02-20 19:58:56 +00:00Commented Feb 20, 2014 at 19:58
-
1Yes, thats what I am doing now. The issues is I need to pause the video when a modal opens. There ends up being some conflict between the default player button and using .pause(), so I am trying to make everything work together.user1547761– user15477612014-02-20 20:40:58 +00:00Commented Feb 20, 2014 at 20:40
Add a comment
|
4 Answers
First off, I would suggest not using inline event handlers. If you're using jQuery, then I suggest you use that.
After each click, set a variable to tell whether it's playing or not, then trigger the correct action.
$(function(){
$('#thebutton').click(function(){
var isPlaying = $(this).data('isplaying');
if(isPlaying){
BV.getPlayer().pause();
}
else{
BV.getPlayer().play();
}
$(this).data('isplaying', !isPlaying);
});
});
jQuery used to have a .toggle() "event", but it was removed.
Comments
Add a class that acts as check for the player status. And then use this code.
$("#theButton").click(function() {
if($(this).hasClass('playing')) {
BV.getPlayer().pause();
} else {
BV.getPlayer().play();
}
$(this).toggleClass('playing')
})
Comments
$('#thebutton').click(function() {
if ($(this).val() == "play") {
$(this).val("pause");
play_int();
}
else {
$(this).val("play");
play_pause();
}
});
or
$(function(){
$('#play').click(function() {
// if the play button value is 'play', call the play function
// otherwise call the pause function
$(this).val() == "play" ? play_int() : play_pause();
});
});
function play_int() {
$('#play').val("pause");
// do play
}
function play_pause() {
$('#play').val("play");
// do pause
}
Comments
var isPlaying = false;
var player = BV.getPlayer();
$("#thebutton").click(function() {
if (isPlaying) {
player.pause();
isPlaying = false;
} else {
player.play();
isPlaying = true;
}
});
