We Keep Coding

video list autoplay then loop again from begin

I get code to create Html Video playlist,
code =>
<video id="myVideo" controls autoplay>
<source src="upload/video/1.mp4" id="mp4Source" type="video/mp4">
<source src="upload/video/2.mp4" id="mp4Source" type="video/mp4">
</video>
<script type='text/javascript'>
var count=1;
var player=document.getElementById('myVideo');
var mp4Vid = document.getElementById('mp4Source');
player.addEventListener('ended',myHandler,false);
function myHandler(e)
{
// How to Looping video play list -----
if(!e)
{
e = window.event;
}
count++;
$(mp4Vid).attr('src', "video/video"+count+".mp4");
player.load();
player.play();
}
</script>
This code can load and autoplay video list very well ( play video 1, then play video 2, then return loop playing video 2). But can't looping video from start again ( video 1 ).
Question => " How to create video list autoplay (video1, video2, ... ,last video) and then looping from start again"
Thank's for help...

There are a couple of things you can update/improve.
<video id="myVideo" controls autoplay>
<source src="upload/video/1.mp4" id="mp4Source" type="video/mp4">
</video>
<script type='text/javascript'>
var index=1;
var count=%COUNT%; // replace it with whatever number last video has.
var player=document.getElementById('myVideo');
var mp4Vid = document.getElementById('mp4Source');
player.addEventListener('ended',myHandler,false);
function myHandler(e)
{
// How to Looping video play list -----
index++;
if (index > count) index = 1;
$(mp4Vid).attr('src', "video/video"+index+".mp4");
player.load();
player.play();
}
</script>

Cycle through audio using js

I'm trying to use a button to change the audio track to 1 of 2 being played in the browser, however, the method I found switches to the second track but doesn't change the audio played afterwards, it only restarts the second track. Here's my code:
function loadSong(){
var player=document.getElementById('player');
var source1=document.getElementById('player');
var source2=document.getElementById('player');
source1.src='/audio/mac+.mp3';
source2.src='/audio/mac-slowed.mp3';
player.load(); //just start buffering (preload)
player.play(); //start playing
}
HTML
<audio id="player" autoplay="autoplay" preload="auto" loop="loop">
<source id="source1" src="/audio/mac+.mp3" type="audio/mpeg">
<source id="source2" src="" type="audio/mpeg">
</audio>
<button onclick='loadSong()'>Switch the Music!</button>

Based on the information you provided in your original inquiry, this is most likely the best fit for you. Attached is a working JSFiddle for you review. You will need to update the src files with your own locally stored files.
HTML:
<audio id="source1" autoplay="autoplay" loop="loop" src='http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3'></audio>
<audio id="source2" loop="loop" src='http://www.stephaniequinn.com/Music/Pachelbel%20-%20Canon%20in%20D%20Major.mp3'></audio>
<button id="player">Switch the music to track # 2</button>
Javascript:
var player = document.getElementById('player');
var source1 = document.getElementById('source1');
var source2 = document.getElementById('source2');
player.onclick = function() {
curTrack = this.innerHTML.replace(/Switch the music to track # /, "");
if (curTrack == "1") {
nextTrack = "2";
source1.play();
source2.pause();
source2.currentTime = 0;
} else {
nextTrack = "1";
source2.play();
source1.pause();
source1.currentTime = 0;
}
this.innerHTML = "Switch the music to track # " + nextTrack;
}

You are overwriting the #player element look at your code you are saving the same selector to source1 and source 2 so change the selector of source one to source1 and source2

link 4 video element to one source [duplicate]

I currently have 2 video elements on my html-page.
Both embed exactly the same .mp4 video from the same URL.
Is there any way to tell the browser to duplicate the rendered video from the first video element instead of letting the browser download both videos?
You can cleary see that the two videos are loaded seperated as they have a different buffering time before playback sometimes and the videos dont play synchronized everytime.
My Code:
<video autoplay id="previewVideo" data-videoid="JYpUXXD4xgc">
<source src="video.php?videoid=JYpUXXD4xgc" type="video/mp4"/>
</video>
<video autoplay id="bigVideo" data-videoid="JYpUXXD4xgc">
<source src="video.php?videoid=JYpUXXD4xgc" type="video/mp4"/>
</video>

This can be done in some very easy steps via Javascript and the Canvas Element:
HTML:
<video autoplay id="previewVideo" data-videoid="JYpUXXD4xgc">
<source src="video.php?videoid=JYpUXXD4xgc" type="video/mp4"/>
</video>
<canvas id="bigVideo"></canvas>
JavaScript:
document.addEventListener('DOMContentLoaded', function() {
var v = document.getElementById('previewVideo');
var canvas = document.getElementById('bigVideo');
var context = canvas.getContext('2d');
var cw = Math.floor(canvas.clientWidth);
var ch = Math.floor(canvas.clientHeight);
canvas.width = cw;
canvas.height = ch;
v.addEventListener('play', function() {
updateBigVideo(this, context, cw, ch);
}, false);
}, false);
function updateBigVideo(v, c, w, h) {
if (v.paused || v.ended) return false;
c.drawImage(v, 0, 0, w, h);
setTimeout(updateBigVideo, 20, v, c, w, h);
}
The canvas fetches the image of the video and displays it again on the BigVideo.
The updateBigVideo() function is called every 20ms, resulting in a framerate of about 50 FPS.
Read more

First, make the <video> element using JavaScript and then put it in the places you want.
var video1 = document.createElement("video");
video1["data-videoid"] = "JYpUXXD4xgc";
var sourceElem = document.createElement("source");
sourceElem.src = "video.php?videoid=JYpUXXD4xgc";
sourceElem.type = "video/mp4";
video1.appendChild(sourceElem);
var video2 = video1.cloneNode(true); //This makes a copy of the element, but makes sure it's not treated as the same element. This means you can add video1 AND this _different_ element to the document. However, unfortunately, everything still needs to get loaded again. I think this is the easiest way to copy an element over, though.
video2.id = "bigVideo";
video1.id = "previewVideo";
document.addEventListener("DOMContentLoaded", function() {
//Now put video1 and video2 where you want.
});

Experimental feature of interest:
<video id="vid" src="test.mp4" autoplay loop muted></video>
<div style="background:-moz-element(#vid); background-size: cover; width: 1280px; height: 720px; "></div>
(firefox only and with -moz- prefix as of 2023)
https://developer.mozilla.org/en-US/docs/Web/CSS/element
https://w3c.github.io/csswg-drafts/css-images-4/#element-notation

A simple solution can be to add a value to the end of the url with #anything
Since you are loading the video in one video element and want to load it again in a different video element, you can arrange it like below with a unique url:
<video autoplay id="mainVideo">
<source src="video.php?videoid=JYpUXXD4xgc&item=1" type="video/mp4"/>
</video>
<video autoplay id="previewVideo">
<source src="video.php?videoid=JYpUXXD4xgc&item=2" type="video/mp4"/>
</video>

Most Optimal solution
let videoPlayCount = 1;
let video = document.getElementById('amplify-mould-video');
video.addEventListener('ended',videoHandler,false);
function videoHandler() {
if(videoPlayCount < 2){
videoPlayCount++;
video.play();
}else{
video.pause();
video.removeEventListener('ended',videoHandler)
}
}
<video id="video" muted="" autoplay="" controls>
<source src="#" type="video/mp4">
</video>

Changing video src via javascript

I have multiple videos on my website that has multiple codecs for multiple browsers.
<video id="video2" width="480" height="270">
<source src="movies/vid2.ogv" type="video/ogg">
<source src="movies/vid2.webm" type="video/webm">
<source src="movies/vid2.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
I only need to show one video at a time. so i have
onClick="changevid(A)
the onClick is working fine, changing the vids. but how do i change all 3 of them?
vid1.ogv
vid1.webm
vid1.mp4
i can only change 1 by doing
var A = 'movies/vid1.mp4';
function changevid(q){
document.getElementById('video2').setAttribute('src', q);
}
Thanks

Maybe this helps:
var doc = document, bod = doc.body;
function E(e){
return doc.getElementById(e);
}
function changevid(q){
E('video2').src = q;
}

Control one video when start playing another video in javascript

I have a page with two videos where the both videos are playing together. What I am doing is I am playing one video and I am playing another video without pausing previous one. Now, what I want is, the previous video should be paused when we are start playing another video. Please help in this regards. This should be taggle...

HTML
<video class="video" autobuffer controls>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
</video>
<video class="video" autobuffer controls>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
</video>
jQuery
$('.video').on('play', function () {
$('.video').not($(this).get(0)).each(function () {
$(this).get(0).pause(); //Stops all videos except the current
});
});
DEMO jQuery
without jQuery
//add Event listener for all videos
var videos = document.getElementsByClassName('video');
for(var i = 0; i < videos.length; i++){
videos[i].addEventListener('playing', function(){ //on "play"...
controlVideos(this); //..call controlVideos
});
};
function controlVideos(current){
for(var i = 0; i < videos.length; i++){
if( videos[i] != current) videos[i].pause(); //stop video if it's not the current
}
}
DEMO without jQuery