We Keep Coding

How to make a video minimized automatically when it ends

I use a button that calls the function "play()" that make the video play on fullscreen
<div style="text-align:center">
<form>
<input type="button" name="something" value="start_experiment" onclick="play(this,vid)">
</form>
</div>
<video id="vid" width="320" height="240" class="rounded-circle" >
<source src="assets/vid/video.mp4" type="video/mp4" >
</video>
<script>
function play(button,vidid) {
button.style.visibility = "hidden";
var myVideo = vidid;
if (myVideo.requestFullscreen) {
myVideo.requestFullscreen();
}
else if (myVideo.msRequestFullscreen) {
myVideo.msRequestFullscreen();
}
else if (myVideo.mozRequestFullScreen) {
myVideo.mozRequestFullScreen();
}
else if (myVideo.webkitRequestFullScreen) {
myVideo.webkitRequestFullScreen();
}
myVideo.play();
}
</script>
How could I make the video auto-minimized when it stops playing?

.onended() this function use in end video.
The ended event occurs when the audio/video has reached the end.
This event is useful for messages like "thanks for listening", "thanks for watching", etc.
example:-
var vid = document.getElementById("vid");
vid.onended = function() {
alert("The video has ended");
this.exitFullscreen();
/*any this you add this function*/
};

You can add an event listener to your video which fires when it ends.
myvideo.addEventListener('ended', () => {
document.exitFullscreen();
});

run 2 html video side by side at the same time JS

I would like to play 2 html video exactly at the same time (side-by-side).
I made a button which has a click EventListener on it. This listener trigger the 2 <video> tag to play it, but I think there is 150 ms a delay at the second play trigger.
index.html
<section>
<video src="source1" id="video1"></video>
<video src="source2" id="video2"></video>
<button id="play">Play</button>
</section>
and here is the basic script.js file.
const $video1 = document.getElementById('video1');
const $video2 = document.getElementById('video2');
const $play = document.getElementById('play');
const playVideo = () => {
$video1.play();
$video2.play();
};
$play.addEventListener('click', playVideo);
These 2 videos are almost the same, except the first video size is about 12MB and the other one is around 20MB
What I tried:
Tried to add a console.time('video') that could logs the delay between each play function call, but that can be different in each environment.

The only way I'm aware of about playing video in sync is to emit a custom event to sync the video in requestAnimationFrame:
var videos = {
a: Popcorn("#a"),
b: Popcorn("#b"),
},
scrub = $("#scrub"),
loadCount = 0,
events = "play pause timeupdate seeking".split(/\s+/g);
// iterate both media sources
Popcorn.forEach(videos, function(media, type) {
// when each is ready...
media.on("canplayall", function() {
// trigger a custom "sync" event
this.emit("sync");
// set the max value of the "scrubber"
scrub.attr("max", this.duration());
// Listen for the custom sync event...
}).on("sync", function() {
// Once both items are loaded, sync events
if (++loadCount == 2) {
// Iterate all events and trigger them on the video B
// whenever they occur on the video A
events.forEach(function(event) {
videos.a.on(event, function() {
// Avoid overkill events, trigger timeupdate manually
if (event === "timeupdate") {
if (!this.media.paused) {
return;
}
videos.b.emit("timeupdate");
// update scrubber
scrub.val(this.currentTime());
return;
}
if (event === "seeking") {
videos.b.currentTime(this.currentTime());
}
if (event === "play" || event === "pause") {
videos.b[event]();
}
});
});
}
});
});
scrub.bind("change", function() {
var val = this.value;
videos.a.currentTime(val);
videos.b.currentTime(val);
});
// With requestAnimationFrame, we can ensure that as
// frequently as the browser would allow,
// the video is resync'ed.
function sync() {
if (videos.b.media.readyState === 4) {
videos.b.currentTime(
videos.a.currentTime()
);
}
requestAnimationFrame(sync);
}
sync();
html{font-family:arial;}
<script src="https://static.bocoup.com/js/popcorn.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video height="180" width="300" id="a" controls>
<source src="https://videos.mozilla.org/serv/webmademovies/popcorntest.mp4"></source>
<source src="https://videos.mozilla.org/serv/webmademovies/popcorntest.ogv"></source>
<source src="https://videos.mozilla.org/serv/webmademovies/popcorntest.webm"></source>
</video>
<video height="180" width="300" id="b">
<source src="https://videos.mozilla.org/serv/webmademovies/popcorntest.mp4"></source>
<source src="https://videos.mozilla.org/serv/webmademovies/popcorntest.ogv"></source>
<source src="https://videos.mozilla.org/serv/webmademovies/popcorntest.webm"></source>
</video>
<input type="range" value="0" id="scrub" />
Ref: https://bocoup.com/blog/html5-video-synchronizing-playback-of-two-videos

UPDATE
Both of the answers was correct.
What I didn't know, that one of the video file has sound, and the other don't. That caused the 150ms delay.
Solved it with ffmpeg. Create an .mp3 file with the sound (and play it with <audio>), and 2 .mp4 files without sound.
They are playing exactly at the same time now.

I will also add this link here, as evident someone had a very similar problem, albeit with audio
Run function after audio is loaded
It appears you are looking for this event listener "canplaythrough", check more in the link.
function checkAudio() {
audioElem.setAttribute("src", audioFile);
audioElem.addEventListener('canplaythrough', (event) => {
resultScreen.innerHTML = "loaded audio";
});
}

Clicking play on HTML5 video controls doesn't get rid of my Play button overlay

My HTML5 video player has a bug. I thought I could fix it easily but it is not looking to be that easy. When you click the overlay the video plays and the overlay disappears. But I noticed at the start of the video clicking play (not my overlay) on HTML5 video controls doesn't get rid of my play button overlay
HTML
<div class="video-wrapper">
<video class="video" id="bVideo" loop controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>
<div id="playButton" class="playButton" onclick="playPause()"></div>
</div>
Script
var bunnyVideo = document.getElementById("bVideo");
function playPause() {
var el = document.getElementById("playButton");
if (bunnyVideo.paused) {
bunnyVideo.play();
el.className ="";
} else {
bunnyVideo.pause();
el.className = "playButton";
}
}
bunnyVideo.addEventListener("click", playPause, false);
Here is my fiddle: https://jsfiddle.net/wm3ot3ko/

you need to also track the play/pause events on the video itself to change the state of your overlay
not the most elegant, but this sets the overlay to just trigger play/pause and handles hiding/showing the button on a separate event that gets triggered based on the video behavior
var el = document.getElementById("playButton");
function playPause() {
if (bunnyVideo.paused) {
bunnyVideo.play();
} else {
bunnyVideo.pause();
}
}
function playPause2() {
if (!bunnyVideo.paused) {
el.className ="";
} else {
el.className = "playButton";
}
}
bunnyVideo.addEventListener("click", playPause, false);
bunnyVideo.addEventListener("play", playPause2, false);
bunnyVideo.addEventListener("pause", playPause2, false);

add this to your css file
#playButton {display: none; }
#playButton.playButton {display: inline; }

Not sure if this is the most elegant/professional solution but it does the job. I just attached an event listener to the video itself on the play/pause events and toggled the 'playButton' class on/off, which is the class that determines whether that overlay is visible. I also removed those lines from your playPause function since the .onplay event listener will take care of it.
var bunnyVideo = document.getElementById("bVideo");
var el = document.getElementById("playButton");
function playPause() {
if (bunnyVideo.paused) {
bunnyVideo.play();
} else {
bunnyVideo.pause();
}
}
bunnyVideo.addEventListener("click", playPause, false);
bunnyVideo.onplay = function() {
el.className ="";
};
bunnyVideo.onpause = function() {
el.className ="playButton";
};

unable to pause video via jquery in mobile

Below is code i am using to play and pause video, it works fine in my desktop
when we click vidoe it opens and plays in fullscreen when press again vidoe should get paused with alert messaged pause .
when i play it in my andorid browser unable to get alert message
link :http://liveweave.com/miaQVr
Js code:
/* Write JavaScript here */
$(document).ready(function() {
var v = document.getElementById("myVideo");
$('#myVideo').on('click', v, function (e) {
if (v.paused === false) {
v.pause();
alert("pause");
} else {
v.webkitEnterFullscreen();
v.play();
}
return false;
});
});
html code:
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<video width="80%" height="auto" controls="controls" id="myVideo">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>

Isn't it a problem with touch even handling? Maybe you should consider adding touch support to your script? Like that:
$('#myVideo').on('touchstart click', ...
You should then remember to stop propagation (remove ghost clicking) with:
e.stopPropagation();
In future you can also check if you're in mobile or not with:
if(e.type == "touchstart") {
// Handle touchstart event.
} else if(e.type == "click") {
// Handle click event.
}
http://jsfiddle.net/Lhzyggqn/
You can also check if you're in mobile in this way:
var clickHandler = ('ontouchstart' in document.documentElement ? "touchstart" : "click");
http://jsfiddle.net/hcwwLrhq/

Detect if HTML5 Video element is playing [duplicate]

This question already has answers here:
How to tell if a <video> element is currently playing?
(7 answers)
Closed 1 year ago.
I've looked through a couple of questions to find out if an HTML5 element is playing, but can't find the answer. I've looked at the W3 documentation and it has an event named "playing" but I can't seem to get it to work.
This is my current code:
var stream = document.getElementsByTagName('video');
function pauseStream() {
if (stream.playing) {
for (var i = 0; i < stream.length; i++) {
stream[i].pause();
$("body > header").addClass("paused_note");
$(".paused_note").text("Stream Paused");
$('.paused_note').css("opacity", "1");
}
}
}

It seems to me like you could just check for !stream.paused.

Check my answer at How to tell if a <video> element is currently playing?: MediaElement does not have a property that tells if it is playing or not. But you could define a custom property for it.
Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function(){
return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}
})
Now you can use it on video or audio elements like this:
if(document.querySelector('video').playing){
// Do anything you want to
}

Note : This answer was given in 2011. Please check the updated documentation on HTML5 video before proceeding.
If you just want to know whether the video is paused, use the flag stream.paused.
There is no property for a video element in getting its playing status. But there is one event "playing" which will be triggered when it starts to play. An Event called "ended" is also triggered when it stops playing.
So the solution is:
Declare one variable videoStatus.
Add event handlers for different events of video.
Update videoStatus using the event handlers.
Use videoStatus to identify the status of the video.
This page will give you a better idea about video events. Play the video on this page and see how the events are triggered.
http://www.w3.org/2010/05/video/mediaevents.html

jQuery(document).on('click', 'video', function(){
if (this.paused) {
this.play();
} else {
this.pause();
}
});

Add eventlisteners to your media element. Possible events that can be triggered are: Audio and video media events
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Html5 media events</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body >
<div id="output"></div>
<video id="myVideo" width="320" height="176" controls autoplay>
<source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">
</video>
<script>
var media = document.getElementById('myVideo');
// Playing event
media.addEventListener("playing", function() {
$("#output").html("Playing event triggered");
});
// Pause event
media.addEventListener("pause", function() {
$("#output").html("Pause event triggered");
});
// Seeking event
media.addEventListener("seeking", function() {
$("#output").html("Seeking event triggered");
});
// Volume changed event
media.addEventListener("volumechange", function(e) {
$("#output").html("Volumechange event triggered");
});
</script>
</body>
</html>

Best approach:
function playPauseThisVideo(this_video_id) {
var this_video = document.getElementById(this_video_id);
if (this_video.paused) {
console.log("VIDEO IS PAUSED");
} else {
console.log("VIDEO IS PLAYING");
}
}

I encountered a similar problem where I was not able to add event listeners to the player until after it had already started playing, so #Diode's method unfortunately would not work. My solution was check if the player's "paused" property was set to true or not. This works because "paused" is set to true even before the video ever starts playing and after it ends, not just when a user has clicked "pause".

You can use 'playing' event listener =>
const video = document.querySelector('#myVideo');
video.addEventListener("playing", function () {
// Write Your Code
});

Here is what we are using at http://www.develop.com/webcasts to keep people from accidentally leaving the page while a video is playing or paused.
$(document).ready(function() {
var video = $("video#webcast_video");
if (video.length <= 0) {
return;
}
window.onbeforeunload = function () {
var htmlVideo = video[0];
if (htmlVideo.currentTime < 0.01 || htmlVideo.ended) {
return null;
}
return "Leaving this page will stop your video.";
};
}

a bit example
var audio = new Audio('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3')
if (audio.paused) {
audio.play()
} else {
audio.pause()
}

I just looked at the link #tracevipin added (http://www.w3.org/2010/05/video/mediaevents.html), and I saw a property named "paused".
I have ust tested it and it works just fine.

This is my code - by calling the function play() the video plays or pauses and the button image is changed.
By calling the function volume() the volume is turned on/off and the button image also changes.
function play() {
var video = document.getElementById('slidevideo');
if (video.paused) {
video.play()
play_img.src = 'img/pause.png';
}
else {
video.pause()
play_img.src = 'img/play.png';
}
}
function volume() {
var video = document.getElementById('slidevideo');
var img = document.getElementById('volume_img');
if (video.volume > 0) {
video.volume = 0
volume_img.src = 'img/volume_off.png';
}
else {
video.volume = 1
volume_img.src = 'img/volume_on.png';
}
}

I just did it very simply using onpause and onplay properties of the html video tag. Create some javascript function to toggle a global variable so that the page knows the status of the video for other functions.
Javascript below:
// onPause function
function videoPause() {
videoPlaying = 0;
}
// onPause function
function videoPlay() {
videoPlaying = 1;
}
Html video tag:
<video id="mainVideo" width="660" controls onplay="videoPlay();" onpause="videoPause();" >
<source src="video/myvideo.mp4" type="video/mp4">
</video>
than you can use onclick javascript to do something depending on the status variable in this case videoPlaying.
hope this helps...

My requirement was to click on the video and pause if it was playing or play if it was paused. This worked for me.
<video id="myVideo" #elem width="320" height="176" autoplay (click)="playIfPaused(elem)">
<source src="your source" type="video/mp4">
</video>
inside app.component.ts
playIfPaused(file){
file.paused ? file.play(): file.pause();
}

var video_switch = 0;
function play() {
var media = document.getElementById('video');
if (video_switch == 0)
{
media.play();
video_switch = 1;
}
else if (video_switch == 1)
{
media.pause();
video_switch = 0;
}
}

I just added that to the media object manually
let media = document.querySelector('.my-video');
media.isplaying = false;
...
if(media.isplaying) //do something
Then just toggle it when i hit play or pause.

a bit example when playing video
let v = document.getElementById('video-plan');
v.onplay = function() {
console.log('Start video')
};