I need a video to play and loop seamlessly a defined number of times, then skip to a next video and loop seamlessly a defined number of times, and so forth until the playlist ends.
In one page, a user defines videos to be played, as well as how many times it will "loop" (or iterate). These are stored using session variables as:
$_SESSION["Exer[" .$x. "]"]
$_SESSION["Reps[" . $x. "]"].
I'm ignoring this aspect (the php stuff) currently
I have code that independently works, one that loops and one that plays playlists, but I can't seem to manage the merger of them together to achieve functionality. The code is as followed:
HTML
<video width="320" height="240" id="myVideo" autoplay="autoplay">
</video>
JavaScript
For looping:
<script>
var iterations = 1;
document.getElementById('iteration').innerText = iterations;
document.getElementById('myVideo').src = "Video/01.mp4";
myVideo.addEventListener('ended', function () {
if (iterations < 3) {
this.currentTime = 0;
this.play();
iterations ++;
document.getElementById('iteration').innerText = iterations;
}
}, true);
</script>
For playlist:
<script>
var videoSource = new Array();
videoSource[0] = "Video/01.mp4";
videoSource[1] = "Video/02.mp4";
videoSource[2] = "Video/03.mp4";
videoSource[3] = "Video/04.mp4";
var i = 0; // define i
var videoCount = videoSource.length;
function videoPlay(videoNum) {
document.getElementById("myVideo").setAttribute("src", videoSource [videoNum]);
document.getElementById("myVideo").load();
document.getElementById("myVideo").play();
}
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
videoPlay(0); // play the video
function myHandler() {
i++;
if (i == (videoCount - 1)) {
i = 0;
videoPlay(i);
} else {
videoPlay(i);
}
}
</script>
Any help is appreciated.
Please check this, this java script code will replay a video for mentioned number of times and then plays next video if exists in playlist:
var eachVdoLoop = 2;
var currentVdoLoop=0;
var videoSource = new Array();
videoSource[0] = "http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_1mb.mp4";
videoSource[1] = "https://www.w3schools.com/html/mov_bbb.mp4";
var videoCount = videoSource.length;
var vdoIndex=0;
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
nextVideo();
function myHandler() {
currentVdoLoop++;
if(currentVdoLoop < eachVdoLoop)
{
document.getElementById("myVideo").play();
}
else
{
vdoIndex++;
currentVdoLoop=0;
nextVideo();
}
}
function nextVideo() {
if(vdoIndex == videoSource.length)
{
alert("Playlist ended!!!")
return;
}
document.getElementById("myVideo").setAttribute("src", videoSource[vdoIndex]);
document.getElementById("myVideo").play();
}
An working jsfiddle (fiddle updated)
Related
I want to have video clips that seamlessly transition from one to another(with idle animations). For starters, I wanted to use the normal browser player and just switch sources when one clip ends like this:
var videos = [
"video/1.webm",
"video/2.webm",
"video/3.webm",
"video/4.webm",
];
let i = 0;
const videoCount = videos.length;
const element = document.getElementById("video");
element.addEventListener('ended', myHandler, false);
function myHandler() {
i++;
if (i == videoCount) {
i = 0;
}
element.setAttribute("src", videos[i]);
element.autoplay = true;
// element.preload = true;
// element.muted = true;
element.load();
}
The problem is that there is a stutter/flicker or delay before a new clip starts playing(in chrome and firefox). The clips I have don't contain any black or empty frames(clips I have loop fine).
As far as I can tell it shows a blank screen for a frame or two.
Is there any way to preload the clips so they switch instantaneously?
The comments from Will and VC.One were leading me onto the right path. I created 2 video elements and instead of pushing and pulling the z-index I pushed it off screen with:
.hidden {
position: absolute;
left: -100vw;
}
I ended up using this:
var videos = [
"video/v1.webm",
"video/v2.webm",
"video/v3.webm",
// ...
];
var i = 0;
const videoCount = videos.length;
const v1 = document.getElementById("video");
const v2 = document.getElementById("video2");
v1.muted = true;
v2.muted = true;
v1.setAttribute("src", videos[i]);
v1.load();
v1.play();
i++;
v2.setAttribute("src", videos[i]);
v2.load();
v1.addEventListener('ended', vHandler, false);
v2.addEventListener('ended', vHandler, false);
function vHandler() {
if((i+1) == videoCount)
i = 0;
if(i % 2 == 0) {
i++;
v2.setAttribute("src", videos[i]);
v2.load();
v1.classList.remove("hidden");
v2.classList.add('hidden');
v1.play();
} else {
i++;
v1.setAttribute("src", videos[i]);
v1.load();
v2.classList.remove("hidden");
v1.classList.add('hidden');
v2.play();
}
}
I want to play a video in a res of 720p (1280x720) with an autoplay and a loop whenever the video ends replace by another video in array.
the first video works fine, but it didn't autoplay, and after it end. it does not continue to play another video.
here's my code :
<div class="content-left">
<video controls id="myVideo" width="1280" height="720" autoplay></video>
<script>
var videoSource = new Array();
videoSource[0]='videos/bluevideo.mp4';
videoSource[1]='videos/redvideo.mp4';
videoSource[2]='videos/yellowvideo.mp4';
var videoCount = videoSource.length;
document.getElementById("myVideo").setAttribute("src",videoSource[0]);
function videoPlay(videoNum)
{
document.getElementById("myVideo").setAttribute("src",videoSource[videoNum]);
document.getElementById("myVideo").load();
document.getElementById("myVideo").play();
}
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler() {
i++;
if(i == (videoCount-1)){
i = 0;
videoPlay(i);
}
else{
videoPlay(i);
}
}
</script>
</div>
where did I do wrong? can anyone help me?thankyou very much.
You have a variable i which you increment in myHandler. However, it isn't declared anywhere. You should declare it outside the code of the event handler, and set the value to the first index:
var videoSource = new Array();
videoSource[0] = 'videos/bluevideo.mp4';
videoSource[1] = 'videos/redvideo.mp4';
videoSource[2] = 'videos/yellowvideo.mp4';
var videoCount = videoSource.length;
var i = 0;
document.getElementById("myVideo").setAttribute("src", videoSource[0]);
function videoPlay(videoNum) {
document.getElementById("myVideo").setAttribute("src", videoSource[videoNum]);
document.getElementById("myVideo").load();
document.getElementById("myVideo").play();
}
document.getElementById('myVideo').addEventListener('ended', myHandler, false);
function myHandler() {
i++;
if (i == videoCount) {
i = 0;
videoPlay(i);
} else {
videoPlay(i);
}
}
When I press the button, I want to play a song, when I press the second song a second time, and when the third one, the cycle repeats again, but the first song is shorter than the second one, and if you click many times, the long song plays simultaneously with its other copy. Is it possible to stop the previous music and move on to another?
Html:
< a id="Play">test< / a>
Script:
window.onload=function(){
let number = 0;
var t;
document.getElementById('Play').addEventListener('click',function(){
let audio = new Audio();
if ( number == 0 ) {
audio.src = '/assets/sound/test.mp3';
number = 1;
}
else
if ( number == 1 ) {
audio.src = '/assets/sound/curious&loony.mp3';
number = 0;
}
audio.autoplay = true;
});
}
sound.pause();
sound.currentTime = 0;
Use this for pause audio
Found a way.
How to:
<script>
var i = 1, player = new Audio();
player.src = "/assets/sound/sound1.mp3";
document.querySelector('#play-button').addEventListener('click', function(e) {
e.preventDefault();
if (i === 1) {
player.src = "/assets/sound/sound1.mp3";
i = 0;
} else if (i === 0) {
player.src = "/assets/sound/sound2.mp3";
i = 1;
}
player.play();
});
</script>
Play me harder
I have a video playlist that plays videos one after a time.
I need the playlist to continue until it reaches a video with the name loop, and loop the video until one of the global variables lvl1_win or lvl2_loose (from a different script) turn 1.
Depending on the result, play a different playlist, playlist_lvl2 or playlist_lvl1_gameover
This is the Playlist I am currently using. It simply loops the videos one after a time:
var activeloop;
var myvid = document.getElementById('intro_lvl1');
myvid.addEventListener('ended', function (e)
{
var activesource = document.querySelector("#intro_lvl1 source.active");
var nextsource = document.querySelector("#intro_lvl1 source.active +
source") ||
document.querySelector("#intro_lvl1 source:first-child");
//for the video with the name "loop" in it.
var loopsource = document.querySelector("#intro_lvl1 source.loop");
activesource.className = "";
nextsource.className = "active";
myvid.src = nextsource.src;
myvid.play();
});
Could anybody give me a few suggestions on how to implement this?
You can use RegExp.prototype.test() to check if the .src contains "loop", set .loop to true
if (/loop/.test(nextsource.src)) {
// perform logic here
if (myvid.loop != true) {
myvid.loop = true
};
if (lvl1_win == 1 || lvl2_loose == 1) {
// do other stuff
}
}
Thank you for your answer!
I got it to work with the following:
var lvl1_win;
var lvl1_loose;
var myvid = document.getElementById('intro_lvl1');
myvid.addEventListener('ended', function (e) {
var activesource = document.querySelector("#intro_lvl1 source.active");
var nextsource = document.querySelector("#intro_lvl1 source.active +
source") || document.querySelector("#intro_lvl1 source:first-child");
if (/loop/.test(nextsource.src)) {
if (myvid.loop != true) {
myvid.loop = true;
};
if (lvl1_win == 1) {
alert("Won level 1");
}
if (lvl1_loose == 1) {
alert("Gameover level 1");
}
} else {
activesource.className = "";
nextsource.className = "active";
myvid.src = nextsource.src;
myvid.play();
}
});
However, I cannot add the specific video for winning or loosing in the same source, otherwise it would mess up the playlist.
Or is it possible to play the next video with the class loose if lost vise versa?
What I mean:
if (lvl1_loose == 1) {
play next video with class gameover
then play pause video on last frame (ending the cycle)
}
i want to play 2 sounds in ios and since it could not be done, i defined 2 audio objects.
i start playing the first sound and when want to play the second, i pause the first and wait till the second end, then i resume playing the first from the point it reached.
you can check the following code, if i remove the alert("test"); the first audio start playing from zero and so current time don't work!
kindly help.
Thanks,
var PlayedTime = 0; ; //in seconds
var AudioObj;
var audioType = '.mp3';
var isResume = false;
$(document).ready(function () {
if (!!AudioSound.canPlayType('audio/ogg') === true) {
audioType = '.ogg' //For firefox and others who do not support .mp3
}
AudioObj = document.getElementById('AudioSound');
document.getElementById('AudioSound').addEventListener('ended', function () {
resume();
});
});
function play1() {
AudioObj.src = "Images/Sound1" + audioType;
AudioObj.load();
}
function play2() {
PlayedTime = AudioObj.currentTime;
AudioObj.pause();
AudioObj.src = "Images/Sound2" + audioType;
AudioObj.load();
AudioObj.play();
}
function resume() {
isResume = true;
AudioObj.pause();
AudioObj.src = "Images/Sound1" + audioType;
AudioObj.load();
}
function JumpAudio() {
AudioObj.currentTime = 36;
}
function DataLoadedtoPlay() {
AudioObj.play();
if (isResume) {
isResume = false;
try {
alert("test");
AudioObj.currentTime = PlayedTime;
}
catch (e) {
alert("catch");
}
}
}
<div id="containerAud">
<audio id="AudioSound" onloadeddata="DataLoadedtoPlay()"></audio>
</div>
<input type = "button" onclick="play1()" value="click1"/>
<input type = "button" onclick="play2()" value="click2" />
<input type = "button" onclick="JumpAudio()" value="JumpAudio" />
</div>