We Keep Coding

Looping through a locally stored video in HTML with JavaScript

So, I am trying to have a video playing and looping the whole time within my HTML page. I added the
<video src="img/Pexels Videos 2169880_Trimmed_Trimmed.mp4" autoplay loop muted playsinline></video>
autoplay loop within the HTML file and it still isn't looping through the video. Does anyone have any idea of how to loop through this video via JavaScript? I've tried various different functions but none of them have been working.

<video id="video" src="img/Pexels Videos 2169880_Trimmed_Trimmed.mp4" autoplay loop muted playsinline></video>
<script>
var video = document.getElementById('video')
// When the 'ended' event fires
video.addEventListener('ended', function(){
// Reset the video to 0
video.currentTime = 0;
// And play again
video.play();
});
</script>

HTML Video set by javascript doesn't play on iOS

I'm having issues with the HTMl5 Video Player. I'm setting the video src with a javascript script but it doesn't play on any iOS Device. It works on macOS and any other device though.
Any help?
Here's a snippet of my HTML:
<video class="img-fluid" id="postvideo" playsinline controls autoplay loop controlsList="nodownload">
</video>
And Javascript:
isSupp = vid.canPlayType("video/mp4");
if (isSupp == "") {
vid.src = video;
} else {
vid.src = video;
}
vid.type =
vid.load();
As you can see I already tried playsinline.

Does the video play on the iOS device without the Javascript?

How to code a HTML5 fullscreen video player with multiple videos in loop?

I want to code an HTML5 video player without any controls. Just autoplay and loop multiple videos from a directory "my website/media" fullscreen.
The tag including "autoplay loop" and some CSS to get the video fullscreen is working fine for me, but I can't play more than one video.
Is it possible to add more videos without using any controls or visible playlists? Just playing all videos from my directory automatically in the loop?
<div class="fullscreen-video-wrap">
<video src="media/firstvideo.mp4" autoplay loop></video>
</div>

There is an "ended" event you can listen for on a element. You can do something like this to replace the src with a new video after the first one ends.
// listener function changes src
function myNewSrc() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = "http://mysite/myMovie2.m4v";
myVideo.load();
myVideo.play();
}
// add a listener function to the ended event
function myAddListener(){
var myVideo = document.getElementsByTagName('video')[0];
myVideo.addEventListener('ended', myNewSrc, false);
}

HTML5 video not restarting

Thanks in advance for any help you're able to give. The issue I'm having is that the following code is in a javascript function when a button is clicked. The desired behavior is that on button click, a video fades in, plays for 10 seconds, and fades back out. Then when the button is clicked again, this behavior repeats.
Issue is, the second time the button is clicked, the video fades in but is already at the end of the video and then fades out after 10 seconds. Any idea why the vid.currentTime is not properly resetting the video?
var webm = document.getElementById('src');
webm.src = "src.webm";
var vid = document.getElementById('video');
vid.currentTime = 0;
vid.play();
vid.fadeToggle(1000);
setTimeout(function() {
vid.fadeToggle(1000);
}, 10000);
and this is where the video file is imported
<video id="video" width="100%" Style="Display:none">
<source id="src" src="src.webm" type="video/webm" />
</video>
Additional info has come to light. This only happens in Chrome, and doesn't happen even in Chrome when it's opened locally, only when the html page is served statically via express.

Try
vid.load(); instead of vid.currentTime = 0;

Maybe you can try to add autplay to the video attribute, but I think the video will start looping.
<video id="video" width="100%" Style="Display:none" autoplay>
OR you can add this function or javascript line to your button function.
vid.load();
source: http://www.w3schools.com/tags/av_met_load.asp

Figured out that this was only an issue in chrome and seems to have to do with this question:
can't seek html5 video or audio in chrome

capturing video source on html5 video play event

My goal is to get the src of the video playing, when the video is played.
I currently have the following code:
<!doctype html>
<html>
<head>
</head>
<body>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<script type='text/javascript'>
var vid = document.getElementsByTagName('video')[0];
vid.addEventListener('play', function() {
console.log('video source:',this.src);
}, false);
</script>
</body>
</html>
So my first problem is that this.src doesn't work; it outputs an empty string. I assume this is because the src isn't actually part of the video tag, but is in the source child tag.
I then tried to add into my function the following:
for (var p in this) {
console.log(p, this[p]);
}
I did this to see if I could find any properties referencing it.. but I don't see anything that directly references it? So is the only way to get the source really to grab the child source nodes? If so... then...
My 2nd question, how would I determine which src attribute is actually being used to play the video? IOW if video.mp4 was actually used to play the video, I want to know that value, but if video.ogg was actually used to play the video, I want to know that value instead.

You can try this way:
var vid = document.getElementsByTagName('video')[0];
vid.addEventListener('play', function() {
console.log('video source:',this.currentSrc);
}, false);

Looks like media elements have a currentSrc property to get the chosen media file.

The HTML5 video element already has events, so there is no need to add a listener. This is how I would do it.
var myVid = document.getElementById('videoId');
if(myVid != null)//if possibility of no video loaded in DOM
{
myVid.onplay = function () {
console.log('video source: ' + myVid.currentSrc);
};
}