[jquery] Play/pause HTML 5 video using JQuery

I am trying to control HTML5 videos using JQuery. I have two clips in a tabbed interface, there are six tabs in total, the others just have images. I am trying to make the video clips play when their tab is clicked and then stop when any of the others are clicked.

This must be a simple thing to do but I cant seem to get it to work, the code I am using to play the video is:

$('#playMovie1').click(function(){
  $('#movie1').play();
      });

I have read that the video element needs to be exposed in a function to be able to control it but can't find an example. I am able to make it work using JS:

document.getElementById('movie1').play();

Any advice would be great. Thanks

For pausing multiple videos I have found that this works nicely:

$("video").each(function(){
    $(this).get(0).pause();
});

This can be put into a click function which is quite handy.

use this.. $('#video1').attr({'autoplay':'true'});

<video style="min-width: 100%; min-height: 100%; " id="vid" width="auto" height="auto" controls autoplay="true" loop="loop" preload="auto" muted="muted">
<source src="video/sample.mp4" type="video/mp4">
<source src="video/sample.ogg" type="video/ogg">
</video>
<script> 
$(document).ready(function(){
document.getElementById('vid').play(); });
</script> 

This is how I managed to make it work:

jQuery( document ).ready(function($) {
    $('.myHTMLvideo').click(function() {
        this.paused ? this.play() : this.pause();
    });
});

All my HTML5 tags have the class 'myHTMLvideo'

    enter code here
<form class="md-form" action="#">
  <div class="file-field">
    <div class="btn btn-primary btn-sm float-left">
      <span>Choose files</span>
      <input type="file" multiple>
    </div>
    <div class="file-path-wrapper">
      <input class="file-path validate" type="text" placeholder="Upload one or more files">
    </div>
  </div>
</form>

<video  width="320" height="240" id="keerthan"></video>

<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button> 
<script>
    (function localFileVideoPlayer() {

  var playSelectedFile = function (event) {
    var file = this.files[0]
    var type = file.type
    var videoNode = document.querySelector('video')




    var fileURL = URL.createObjectURL(file)
    videoNode.src = fileURL
  }
  var inputNode = document.querySelector('input')
  inputNode.addEventListener('change', playSelectedFile, false)
})()
function playVid() { 
  keerthan.play(); 
} 

function pauseVid() { 
  keerthan.pause(); 
} 

</script>

You can do

$('video').trigger('play');
$('video').trigger('pause');

Just as a note, make sure you check if the browser supports the video function, before you try to invoke it:

if($('#movie1')[0].play)
    $('#movie1')[0].play();

That will prevent JavaScript errors on browsers that don't support the video tag.

As an extension of lonesomeday's answer, you can also use

$('#playMovie1').click(function(){
    $('#movie1')[0].play();
});

Notice that there is no get() or eq() jQuery function called. DOM's array used to call play() function. It's a shortcut to keep in mind.

Why do you need to use jQuery? Your proposed solution works, and it's probably faster than constructing a jQuery object.

document.getElementById('videoId').play();

I use FancyBox and jQuery to embedd a video. Give it an ID.

Perhaps not the BEST solution could toggle play/pause differently - but easy for me and IT WORKS! :)

In the

`

<input type="hidden" id="current_video_playing">

<input type="hidden" id="current_video_status" value="playing">

<video id="video-1523" autobuffer="false" src="movie.mp4"></video>

<script>

// Play Pause with spacebar

$(document).keypress(function(e) { 

    theVideo = document.getElementById('current_video_playing').value

    if (e.which == 32) {

        if (document.getElementById('current_video_status').value == 'playing') {

            document.getElementById(theVideo).pause();

            document.getElementById('current_video_status').value = 'paused'

        } else {

            document.getElementById('current_video_status').value = 'playing'

            document.getElementById(theVideo).play();

        }

    }

});

</script>`

This is the easy methods we can use

on jquery button click function

$("#button").click(function(event){
    $('video').trigger('play');
    $('video').trigger('pause');
}

Thanks

Found the answer here @ToolmakerSteve, but had to fine tune this way: To pause all

$('video').each(function(index){
    $(this).get(0).pause();
});

or to play all

$('video').each(function(index){
    $(this).get(0).play();
});

I also made it work like this:

$(window).scroll(function() {
    if($(window).scrollTop() > 0)
        document.querySelector('#video').pause();
    else
        document.querySelector('#video').play();
});

I like this one:

$('video').click(function(){
    this[this.paused ? 'play' : 'pause']();
});

Hope it helps.

Sorry for my other answer. No-one liked it, but I have found another way that you can do it.

You can use Video.js! You can find the documentation and how-to's here.

@loneSomeday explained it beautifully , here one solution which might also give you good idea how to achieve play/pause functionality

play/pause of video on click

By JQuery using selectors

$("video_selector").trigger('play');  
$("video_selector").trigger('pause');
$("div.video:first").trigger('play');$("div.video:first").trigger('pause');
$("#video_ID").trigger('play');$("#video_ID").trigger('pause');

By Javascript using ID

video_ID.play();  video_ID.pause();

OR

document.getElementById('video_ID').play();  document.getElementById('video_ID').pause();

You could use the basic HTML player or you can make your own custom one. Just saying. If you want you can refer to ... https://codepen.io/search/pens?q=video+player and have a scroll through or not. It is to to you.