How can I disable a JQuery function by clicking on a button, but keep it on by default?

user_16611722 0
Viewed 77

I'm creation a video player which redirects to another video page when the video is over.

I want to add a 'Turn Auto Play Off Button' to disable the redirection script.

How can I do that?

My code:

<video src="http://www.w3schools.com/html/movie.mp4" id="myVideo" controls>
  video not supported
</video>
<button id="turnOfAutoPlay">Turn Of Auto Play</button>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#myVideo").bind('ended', function() {
        setTimeout(function() {
            location.href = "http://www.localhost.com";
        }, 3000)
    });
});
</script>
html5-video redirect html jquery javascript
3 Answers

You could remove the listener that fires at the end using unbind()

For jQuery < 1.7 use bind()/unbind()

$('#turnOfAutoPlay').click(function() {
  $('#myVideo').unbind('ended');
})

Note: With jQuery 3.0 and up .bind()/.unbind() is deprecated. Use on()/off()

function videoEndedHandler () {
  setTimeout(function() {
    location.href = "http://www.localhost.com";
  }, 3000)
}

$(document).ready(function() {
  document.getElementId("#myVideo").addEventListener('ended', videoEndedHandler);
});

$('#turnOfAutoPlay').on('click', function() {
  document.getElementId('#myVideo').removeEventListener('ended', videoEndedHandler);
})
user_141485860

Use global variable for setTimeout function and on click of your "Turn Auto Play Off Button" call clearTimeout

Sample code:

var myVar;
function myFunction() {
  myVar = setTimeout(function(){ alert("Hello"); }, 3000);
}
function myStopFunction() {
  clearTimeout(myVar);
}

Edit: here you go

<video src="http://www.w3schools.com/html/movie.mp4" id="myVideo" controls>
  video not supported
</video>
<button id="turnOfAutoPlay" onclick="myStopFunction()">Turn Of Auto Play</button>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var myVar;
$(document).ready(function() {
    $("#myVideo").bind('ended', function() {
       myVar = setTimeout(function() {
            location.href = "http://www.localhost.com";
        }, 3000)
    });
});
function myStopFunction() {
  clearTimeout(myVar);
}
</script>
user_59121170

I modified my code a bit with the help of above discussions, but I think it's lil bulky , But it works...

My Code:

const autoplayCheckbox = document.getElementById('autoplayCheckbox');
const video = document.getElementById('myVideo');

var myVar;

function videoEndedHandler () {
myVar = setTimeout(function() {
    location.href = "http://www.localhost.com";
  }, 10000)
}

//By default autoplay is on.
$(document).ready(function() {
  video.addEventListener('ended', videoEndedHandler);
});

autoplayCheckbox.addEventListener('change', function() {
  if (this.checked) {
  //if autoplay is on
  document.getElementById("demo").innerHTML = "Autoplay: On";
    $(document).ready(function() {
      video.addEventListener('ended', videoEndedHandler);
    });

  } else {
    //if autoplay is off
    document.getElementById("demo").innerHTML = "Autoplay: Off";
    video.removeEventListener('ended', videoEndedHandler);
  }
});

function myStopFunction() {
  clearTimeout(myVar);
  document.getElementById("autoplayCheckbox").checked = false;
  document.getElementById("demo").innerHTML = "Autoplay: Off";
}
* {
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    transition: background 0.4s linear;
    background-color: #8ecae6;
    font-family: 'oswald';
}

.checkbox {
    opacity: 0;
    position: absolute;
}

.checkbox:checked + .label .ball {
    transform: translateX(23px);
}

.label {
    background-color: #111;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 50px;
    position: relative;
    padding: 5px;
    height: 26px;
    width: 50px;
    transform-scale(2.2);
}

.ball {
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    height: 22px;
    width: 22px;
    transition: transform 0.3s linear;
}
  <br/><br/><video src="http://www.w3schools.com/html/movie.mp4" id="myVideo" controls>
    video not supported
  </video>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- partial:index.partial.html -->
<div>
<input type="checkbox" class="checkbox" id="autoplayCheckbox" checked="checked">
<label for="autoplayCheckbox" class="label">
   <div class="ball"></div>
</label>
</div>

<p id="demo">Autoplay: On</p>
<button id="turnOfAutoPlay" onclick="myStopFunction()">Turn Of Auto Play</button><br/><br/>

The Turn Of Autoplay button only works when 10sec Timeout function is going on.. I added that button because in the main project it also works as a button to dismiss the modal Have a look

Can i minify it??

user_166117220
Related