HTML5 Video Autoplaying when hidden - javascript

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

Related

Adjusting timeline in html5 video triggers pause event

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>

Show a button after video reaches certain time of a video

I have a video page with a button to link to another page. I need to hide the button initially but only shows the button when it's reaches 5 seconds before the completion of the video.
It's in standard HTML code like below.
<video controls preload=metadata width=1280 height=720>
<source src='media/video.mp4' type=‘video/mp4'>
<p>Please use a modern browser to view this video.</p>
</video>
How can I achieve that using Javascript? All the examples I can find are about youtube videos and using the function provided by Youtube. Mine is video deployed on intranet.
Thanks for the help,
You can listen for timeupdate event of <video> element. The documentation for it can be found here.
Code will basically look like this:
const TIME_TO_SHOW_BUTTON = 60; // 60 seconds;
const video = document.getElementById('video');
video.addEventListener('timeupdate', function showButton() {
if (video.currentTime > TIME_TO_SHOW_BUTTON) {
// your logic to show the button
video.removeEventListener('timeupdate', showButton);
}
});

Seamlessly swapping videos

I was curious what the best way to seamlessly swap from one video to another would be. The overall goal would be to play an intro video, and when that video ends, play a 2nd video of a looping animation.
Which method would work best for this?
Creating an event listener that starts the 2nd video and hides the first video as soon as the first video ends
OR having it all in one video, where the event listener waits until the end of the video and resets the time to where the loop begins
For the 2nd option, let's say the video is 10s long, the intro part is 4s, and the loop part is 6s. We would wait until the 10s mark and restart at 4s once the video plays through once.
Is there a better way to do this or is one of these options the right way?
I would use method 1. Adding a listener and code to play the second video would be easy:
<video src="video.ogv" id="intro">
video not supported
</video>
<video src="video.ogv" id="loop">
video not supported
</video>
<script type='text/javascript'>
var vid = document.getElementById("loop");
vid.loop = true;
vid.pause()
document.getElementById('into').addEventListener('ended',myHandler,false);
function myHandler(e) {
vid.play()
}
</script>
You can then also add Jquery hide and show to make it more seamless.

Creating a Javascript audio playlist with only play and pause

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/

HTML5 <Video> "Loop" with a gap or delay of few seconds

I am using the HTML 5 "Video" tag to show the video on my page with the "Loop" feature or attribute.
Is there any way we can add a delay or gap between video using the "Loop" attribute??
<video id="myVideo" autoplay loop src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4">
Please refer the link to see the Video tag code > "http://jsfiddle.net/nrf5fbh8/1/"
Please suggest!
Updated my code, my video tag DO NOT have controls.
Thanks!
Expanding on my comment above, basically instead of using the loop attribute you can set up a listener and place a function within the listener to replay the video after a specified amount of time(in milliseconds) once the video has ended. The JS would look like this:
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
console.log('ended');
setTimeout(function(){
document.getElementById('myVideo').play();
}, 5000);
}
Updated Fiddle

Categories

Resources