Play Pause HTML5 Video JavaScript

play pause html5 video javascript

$('#play-pause-button').click(function () {
var mediaVideo = $("#media-video").get(0);
if (mediaVideo.paused) {
mediaVideo.play();
} else {
mediaVideo.pause();
}
});

I have done this in jQuery, which is simple and fast. To try it, you just need to use the ID of the video tag and your play/pause button.

EDIT:
In vanilla JavaScript:
a video is not a function, but part of DOM hence use

 video.play(); 

Instead of

video().play() **wrong**

Pause html video that's on autoplay?

It is not working because `className is not a valid property. Use Element.classList.toggle:

var video = document.getElementById('videoContent');
videoAutoPlay = video.play();

document.getElementById("playVideo").addEventListener("click", function(){
this.classList.toggle('is-playing');
if(this.classList.contains('is-playing')) {
this.innerHTML = "Play"
video.pause();
} else {
this.innerHTML = "Pause";
video.play();
}
});

Auto play/pause HTML5 video with jQuery and in-view.js

You have two issues here. Firstly, due to the location of your jQuery logic, you need to wrap it in a document.ready handler. Currently you're executing the JS before the DOM has been loaded, and no elements exist.

Secondly, when the event fires you select all video elements. From the context of the event handler I would assume you instead want to start the video which is now visible/invisible, so using $(this) would seem more applicable. Try this:

$(function() {
$('.video-autoplay').on('inview', function(event, isInView) {
$(this).trigger(isInView ? 'play' : 'pause');
});
});

Javascript - Play/ Pause button for video

Check your console for errors. I noticed one -

Javascript Error: 'missing ) after argument list"

To get around that, replace window.addEventListener()

with:

document.addEventListener("DOMContentLoaded", function(event) {
handleWindowLoad();
});

How to implement play() and pause() on HTML5 Video in jQuery?

Here is the way that I implemented the play and pause functionality in jQuery:

    $('.FVP-btn-play').on('click', function() {
$('video').trigger('play');

$('.FVP-btn-play').toggleClass('hidden');
$('.FVP-btn-pause').toggleClass('hidden');
});

$('.FVP-btn-pause').on('click', function() {
$('video').trigger('pause');

$('.FVP-btn-play').toggleClass('hidden');
$('.FVP-btn-pause').toggleClass('hidden');
});

In the HTML, I moved the hidden class from Play to Pause as this is the state of the application to start with.

I did not change the CSS, apart from adding a hidden class, which was not included.

I used jQuery toggleClass() to add and remove the hidden class on the Play and Pause buttons.

Here is a working solution based on your code (best viewed in full screen mode):

$('.FVP-btn-play').on('click', function() {
$('video').trigger('play');

$('.FVP-btn-play').toggleClass('hidden');
$('.FVP-btn-pause').toggleClass('hidden');
});

$('.FVP-btn-pause').on('click', function() {
$('video').trigger('pause');

$('.FVP-btn-play').toggleClass('hidden');
$('.FVP-btn-pause').toggleClass('hidden');
});
.hidden {
visibility: hidden;
}

.funnel-block .funnel-video video {
display: block;
margin: 0 auto;
}

.funnel-block .funnel-video .funnel-video-poster {
background-repeat: no-repeat;
position: relative;
z-index: 2;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}

.funnel-block .funnel-video .funnel-video-poster.see-thru {
background: transparent !important;
}

.funnel-block .funnel-video .funnel-video-poster .FVP-btn-play {
width: 3rem;
height: 3rem;
line-height: 3rem;
background: #3c3c3c;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
border-radius: 50%;
}

.funnel-block .funnel-video .funnel-video-poster .FVP-btn-pause {
width: 3rem;
height: 3rem;
line-height: 3rem;
background: #3c3c3c;
color: #fff;
text-align: center;
border-radius: 50%;
position: absolute;
bottom: .25rem;
left: 50%;
transform: translate(-50%, 0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="funnel-block">
<div class="py-5 funnel-video">
<video poster="https://www.tomasbradle.eu/webroot/stored_data/funnel_videos/funnel_block_50_ea8dec6d.png" id="funnel_video_50" equalizer-state="attached" width="640" height="360">
<source src="https://www.tomasbradle.eu/webroot/stored_data/funnel_videos/funnel_block_50_ea8dec6d.mp4">
Your browser does not support HTML 5 video
</video>
<div class="funnel-video-poster see-thru" data-video-id="funnel_video_50" style="width:640px;height:360px;margin-top:-360px">
<div class="FVP-btn-play">Play</div>
<div class="FVP-btn-pause hidden">Pause</div>
</div>
</div>
</div>

Pause HTML5 video player on click

Since .pause() is a native VideoElement's method and not jQuery's method, you need a reference to it. But using: $("#video").get(0) to reference the video object inside handler function isn't necesarry, instead of that you can use just this which reference the same object.

You can check it:

$("#video").click(function() {
console.log($("#video").get(0)==this); //true
}

I've checked your code in 2 different browsers and it does work. But perhaps you tried to call $("#video"), before it's actually loaded.
to fix that - add it after loading, for example like this:

$(function(){
//inside here -> means after loading. So video element already exist
$("#video").click(function() {
if(!this.paused) { //if this video element is NOT paused
console.log("playing");
showPlayBtn(); //some function of yours
this.pause(); //pause this video element
} else {
console.log("paused");
}
});
});

how to play/pause, if there is multiple videos on a page

The jQuery method .trigger() deals with standard Events. It does not recognize Events that are exclusive to Web APIs like MediaElement interface to which the <video> tag belongs to. So events "pause" and "play" cannot be triggered with any jQuery method. Moreover, "pause"/"play" events are triggered by .pause() and .play() methods. To use them, they'll need to suffixed to a plain JavaScript object of a <video> tag. jQuery $(objects) cannot use plain JavaScript methods and vice versa.

$('video').on('click', function(e) {
let vids = $.makeArray($(this).siblings('video'));

vids.forEach(vid => {
vid.pause();
vid.classList.remove('active');
});

$(this).toggleClass('active');
if ($(this).is('.active')) {
this.play();
} else {
this.pause();
}
});
video {
height: 30vh;
cursor: pointer;
}

.active {
outline: 2px solid blue
}
<video src='https://glpjt.s3.amazonaws.com/so/av/vs34s3.mp4'></video>
<video src='https://glpjt.s3.amazonaws.com/so/av/vs34s3.mp4'></video>
<video src='https://glpjt.s3.amazonaws.com/so/av/vs34s3.mp4'></video>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


Related Topics



Leave a reply



Submit