I'm trying to hide a video when it is paused but the paused event is being triggered when you move the timeline on the video player as well. Is it possible to be able to adjust the video timeline without triggering the pause event?
var singleVideo = document.getElementById('single-video');
$(singleVideo).get(0).addEventListener('pause', function(){
$('#singleVideo').hide();
});
After clicking the timeline, the video pauses for a few seconds and continues to play.
HTML
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<p>Play and pause the video</p>
<video id="single-video" height="200" controls="controls" preload="none" onpause="myFunction()">
<source type="video/webm" src="https://upload.wikimedia.org/wikipedia/commons/3/38/Under_forvandlingens_lov_%281911%29.webm">
</video>
</body>
A tricky thing is just to add the async function and wait for a second to get the video pause status.
JS
async function getStatus(singleVideo) {
return new Promise(resolve => {
setTimeout(() => {
resolve(singleVideo);
}, 1000);
});
}
function myFunction() {
var singleVideo = document.getElementById('single-video');
//Get status
getStatus(singleVideo).then(video => {
if(video.paused){
console.log("Stream pause");
$(singleVideo).hide();
}else{
console.log("Stream not pause, Just drag/click timeline");
}
});
}
"Is it possible to be able to adjust the video timeline without triggering the pause event?"
No. This is the standard procedure of how a browser works.
"I'm trying to hide a video when it is paused but the paused event is being triggered when you move the timeline on the video player as well."
You need to create your own custom controls. This way your own pause button's function would hide the video, whilst scrubbing the timeline itself would only just control seeking.
If you choose to use the browser's built-in controls then you'll have to think creatively.
For example: When using the timeline, the pause event is followed by a seeking event, so just have a temporary listener for a seeking event during the pause event. Such "seeking" would let you know the video is not just paused and that it should remain visible. Without any extra "seeking" event, you can assume the video is truly paused...
An example of the concept:
<!DOCTYPE html>
<html>
<body>
<video id="single-video" width="640" height="400" controls>
<source src="movie.mp4" type="video/mp4">
</video>
<script>
var singleVideo = document.getElementById('single-video');
singleVideo.addEventListener("seeking", mySeek);
singleVideo.addEventListener("playing", myPlaying);
singleVideo.addEventListener("pause", myPause);
//# Your main Seek handler function (if needed)
function mySeek()
{
/* if you have custom code for during Seek events */
//alert("you did seeking..."); singleVideo.play();
}
//# During playback keep video visible
function myPlaying() { singleVideo.style.opacity="1"; }
//# Pause function also checks if a Seek event happens during Pause event
//# eg: Hide video but IF a Seek also happens during, then keep video visible
function myPause()
{
singleVideo.style.opacity="0.1"; //# hide here...
//# add temporary new Seek handler function (has alternate instructions)
singleVideo.addEventListener("seeking", mySeekInPaused);
//# force video visiblity & re-add main Seek handler function
function mySeekInPaused()
{
singleVideo.style.opacity="1"; //# keep visible
singleVideo.removeEventListener("seeking", mySeekInPaused); //# not needed now
}
}
</script>
</body>
</html>
Related
I add the start and end time in the html video tag and write code in video ended event. But the issue is when I use start and end time in the html video tag the ended event not working but its working fine without using start and end time.
Html Video Tag
<video style="object-fit: fill;" class="videocls" width="780" height="363" id="vid">
<source src="/newhope/upload/1562979764.mp4#t=55,72" type="video/mp4">
</video>
Video Stop Event
$("#vid").bind("ended", function() {
alert('hit me');
});
I want to fire this ended event when ever particular duration mention in html video tag completed.
I find the solution for this problem. Ended event fire when the video finish completely. For this I use onpause event. When we are using the start and end interval in it pause the video not end the video so onpause event is working with this. Here is the code I am using now and its work for me
document.getElementById("vid").onpause = function() {
alert("The video has been paused");
};
I have made a website which we use on a TV to welcome guests/customers to our business. There's a SQL database which we write their names to be presented on the screen, and there is also a video which is playing in a different frame on the same website.
This all works very well on desktop PC Chrome. But we use the built in browser in the TV (which is a business model used for stuff like this). The browser is Opera and it supports HTML5.
Problem is that after a while, can be 2 hours, can be a day, it will stop playing the video, and just show a black frame.
This is the code:
<source src="video/video1.mp4" type='video/mp4'/>
</video>
<script type='text/javascript'>
video_count =1;
videoPlayer = document.getElementById("video");
function run(){
video_count++;
if (video_count == 3) video_count = 1;
var nextVideo = "video/video"+video_count+".mp4";
videoPlayer.src = nextVideo;
videoPlayer.play();
videoPlayer.loop();
};
</script>
This will play the files named video1.mp4 and video2.mp4... etc. Right now there is only one file in this folder called video1.mp4, and it will autoplay and it will loop. But it will fail to autoplay after a while and just show a black frame.
Any ideas?
Thanks!
I'd recommend looking into video events with javascript in this case if you're starting to see bugs.
For example (from Detect when an HTML5 video finishes post) you could start playing your next video like this:
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
// What you want to do after the event
}
</script>
You could simply move on to the next video, or seek back to 0 on its timeline and play it again. The other option if you're wanting to loop 1 video, you'd be better using the loop option in your <video> tag:
<video loop>
<source src="video/video1.mp4" type="video/mp4">
</video>
I want to create an audio playlist that can only play and pause. However, when the user is done listening to the entire song, I want to be able for that user to re-play the song.
Currently, the Javascript playlist only plays and stops the music. My pause button is not really working like a pause button. Not sure where I went wrong. And how exactly can I get the song to automatically re-set to the beginning once the user finishes listening to the song? I would very much appreciate the help on this! I wrote the HTML audio code already and just listed the Java Script below.
<script> // play/pause button
$(function() {
$('#play').click(function(){
$('#pause').attr('src',"media/pause.png");
});
});
$(".playBtn").on('click', function() {
var target = $(this).attr("target");
$("#audio").attr("src",target);
$("#audio").trigger("play");
});
$(".pauseBtn").on('click', function() {
$("#audio").trigger("pause");
});
});
</script>
Audio tags have several events to which you can add listeners. Here is a link to a list of them: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
The "ended" event triggers when the audio is finished playing, so it could help with resetting the song to the beginning when the audio reaches the end.
$("#audio").on("ended", function () {
this.currentTime = 0;
});
You can use loop attribute at <audio> element to continuously loop single audio source. Substitute caching <audio> DOM element for jQuery object to call .play(), .pause() at click events.
javascript
$(function() {
var audio = $("#audio")[0];
$(".playBtn").on("click", function() {
audio.play()
});
$(".pauseBtn").on("click", function() {
audio.pause()
});
})
html
<audio id="audio" src="/path/to/audio/source" loop autoplay controls></audio>
<button class="playBtn">Play</button>
<button class="pauseBtn">Pause</button>
jsfiddle https://jsfiddle.net/kkf33dpr/
I am making a page that has an HTML5 video hidden when the page first loads, and then either plays when someone clicks a play button or autoplays after 5 seconds, whichever comes first. When it ends, I want the play button to show up again and the video to hide.
I tried adding a data-hasPlayed attribute that is set to either true or false, but when it finished playing and went back to the logo, the video would start autoplaying again (even though it was hidden).
Here is the code-- I took out the data-attribute stuff for now just to make it all simplified again. Let me know if you want to see that code still and I can update it. Thanks in advance!
HTML:
<video id="trailer" controls preload="auto">
<source src="video/trailer.mp4" type="video/mp4">
Your browser cannot play this now.
</video>
JQuery:
// AUTOPLAY VIDEO AFTER 5 SECONDS
var video = document.getElementById("trailer");
video.addEventListener("canplay", function() {
setTimeout(function(){
$('a.videoPlay').hide();
$('#videoContainer').show('');
$('#trailer').show();
video.play();
}, 5000);
});
// PLAY VIDEO ON CLICK
$('a.videoPlay').click(function(){
$('a.videoPlay').hide();
$('#videoContainer').show();
$('#trailer').show();
video.play();
});
// AFTER VIDEO ENDS, SHOW PLAY BUTTON
video.addEventListener('ended',videoEnded,false);
function videoEnded(e) {
setTimeout(function(){
$('#videoContainer').hide();
$('#trailer').hide();
$('a.videoPlay').show();
}, 1000);
};
How are you hiding the video?
I made a Jsfiddle here and it seems to stop playing when its done...
I am using display none to hide it.
#trailer {
display: none;
}
https://jsfiddle.net/sarin/8my2ms4w/
Pause the video before hiding
video.pause();
Also instead of playing video directly you can just use click event of the button after setTimeout like following
video.addEventListener("canplay", function() {
setTimeout(function(){
$('a.videoPlay').click();
}, 5000);
});
This should solve for both situations
I have two videos, and I want to loop the first video until the user clicks the mouse, at which point I want to switch to playing the second video. Does anyone know what the best way to do this would be?
Edit: Sorry, to clarify, I would prefer to use HTML 5 (assuming this is possible). I am trying to have the two videos swapped out seamlessly, one on top of another. I want it to look like clicking the mouse made the video finish or progress. So I need to pause/hide the first one and show/play the second one.
Update: With Galen's help and some Google searches, I figured it out:
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript">
function swapVideos() {
var video1 = document.getElementsByTagName('video')[0];
video1.pause();
video1.style.display = 'none';
var video2 = document.getElementsByTagName('video')[1];
video2.play();
}
</script>
<body>
<video src="video1.ogg" controls="controls" loop="loop" autoplay="autoplay" onclick="swapVideos();">
your browser does not support the video tag
</video>
<video src="video2.ogg" controls="controls" preload="preload">
your browser does not support the video tag
</video>
</body>
</html>
Add this code to the click event of whatever you want
// pause first video
var video1 = document.getElementsByTagName('video')[0];
video1.pause();
// play second video
var video2 = document.getElementsByTagName('video')[1];
video2.play();
Add this to make the first video loop
var video1 = document.getElementsByTagName('video')[0];
video1.addEventListener('ended', function () {
video1.play();
});
it's tough to be specific with the information you have given, but you could use javascript or jquery to do this. Bind a click event to a DOM element, and on click change the source of the video. I am assuming that the video is determined by a source parameter in an swf.