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

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

Related

Html Video ended event not working with start and end time declaration in element

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");
};

javascript not executed with setTimeout but does with button click event

I am trying to view a video stream from an IP camera in a web page, when the stream can be played I want it to start automatically. Trying to do that with a timer, try to play and if that fails, try again.
The timer (timeout) doesn't seem to do that, however if I execute the script using a button, it does. What am I missing?
see the code below.
thanks,
Ron
PS: I commented out the setTimeout functions, to make the button work.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function playVid() {
var videoElem = document.getElementById("IPcamerastream");
var playPromise = videoElem.play();
// In browsers that don’t yet support this functionality playPromise won’t be defined.
if (playPromise !== undefined) {
playPromise.then(function() {
// Automatic playback started!
videoElem.controls = true;
}).catch(function(error) {
// Automatic playback failed.
// setTimeout(playVid, 1000);
});
}
}
//setTimeout(playVid, 1000);
</script>
<button onclick="playVid()" type="button">Play Video</button><BR>
<video id="IPcamerastream" src="http://192.168.2.8:8080" width="960" height="540"></video>
</body>
</html>
Look into the features of the video html5 tag:(https://www.w3schools.com/tags/tag_video.asp)
one of the optional attributes is autoplay (Specifies that the video will start playing as soon as it is ready) so there is no need to set timeout.
<video id="IPcamerastream" src="http://192.168.2.8:8080" width="960" height="540" autoplay></video>
Move your script below the video element, and you should not need the timeout at all, because the element will already be initialized when the script is executed. So document.getElementById should resolve the element right away.
Using timers will introduce race conditions. If anything, you should add a listener to the DOMContentLoaded event.
Welcome Ron,
This is a well formatted question, but target browser info could also assist in helping you resolve your issue. Please consider adding it in future!
As for your problem, you tell us that you wish the video to autoplay, I'm assuming on page load?
I've also removed the duplicate source paste.
In this case, you only call playVid() from within the promise erroring out. The initial call is bound to the button click event.
In short, only clicking the button will initiate the playVid() function.
You need to add an event listener for DOM readiness and call playVid() within that. Otherwise, it's only being called when you click your button!
document.addEventListener('DOMContentLoaded', (event) => {
//the event occurred
playVid();
});
You can also use the autoplay HTML option in the video tag.
lang-html
<video {...} autoplay />
I had an almost similar problem ، when I received the video stream in a webrtc project, the video would not be displayed without clicking a button.
if you want to play automatically received stream video, you should add "muted" in the video tag.

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);
}
});

html 5 video tag is not playing first time clicked in android using JavaScript on browser

I am using an html 5 page
with a video tag and a dynamic source .
any time the user click on the page I assign the source to the video
and play it
<video ></video>
$(div).click(function()
{
$('video').src('filename.mp4');
$('video').get(0).load();
$('video').get(0).play();
});
At the first click nothing happens and at the 2 time the video is playing
What am I missing ??
It seems that you use improperly the jQuery selector for clicking on the div element. The code should be (mark the quotes):
$("div").click(function() {
$('video').src('filename.mp4');
$('video').get(0).load();
$('video').get(0).play();
});
However, it is always better not to use general selector (this will be applied to all div elements), but give your div, which you use for action triggering a CSS class or ID, for example like this:
<div id="my-div-id">Click to play</div>
<video id="my-video-id"> </video>
<script>
$("div#my-div-id").click(function() {
$('video#my-video-id').src('filename.mp4');
$('video#my-video-id').get(0).load();
$('video').get(0).play();
});
</script>

Multiple dynamically added HTML Videos not muting

I have a bunch of html videos being added to the dom via jquery append (HTML string)
I want them to be inserted MUTED.
The problem is, right now they're not getting muted, even when I inject them with the muted prop.
When I remove the muted attrib on the video tag, and try something like $('video').prop("muted",true); it WILL mute them, but only AFTER they have all loaded.
Do I try adding the videos another way, or find an onLoad method for the html videos and trigger a mute function when they're ready.
jsfiddle of what they look like after append: http://jsfiddle.net/mvsMG/
Try onloadeddata HTML5 event handler:
$(document).ready(function(e) { //do NOT use $(window).load; it will not mute all videos
// mute all the videos when data is loaded for each
$('video').on('loadeddata', function(e) {
//console.log('onloadeddata', e.target);
$(this).prop('muted', true);
});
});
Here is the demo fiddle.
Note: I don't know which browser you are testing with but you should check out this browser-support list for HTML5 muted (loop and autoplay) attributes.

Categories

Resources