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
Passing Mouse Clicks Through an Overlaying Element <Div>
How to Disable JavaScript Function Calls from the Browser Console
How to Automatically Close Alerts Using Twitter Bootstrap
Make the on Scroll Growing <Path> to Dashed Line
Ie Thumbnail Pixelation When High Resolution Image Is Set to Small Size
Styling Jquery UI Autocomplete
How to Open Bootstrap Modal in Ajax Success
Jquery + Animate.CSS Animation Only Working Once, Animation Not Resetting
JavaScript Hide/Show Div on Checkbox: Checked/Unchecked
How to Detect Internet Explorer (Ie) and Microsoft Edge Using JavaScript
Jquery Click Event Not Firing on the Element Created Dynamically Using Jquery
Bootstrap 3: How to Make Head of Dropdown Link Clickable in Navbar
Export SASS/Scss Variables to JavaScript Without Exporting Them to CSS
Detecting Click Event on Padding Only
Dynamically Resize Columns in CSS Grid Layout with Mouse
How to Get Screen Position of CSS3-3D Transformed Elements
How to Get the Grid Coordinates of an Element Using JavaScript