I have a some videos, that need to be play continuously. But there is a condition, first video should be play upto 24 hours.it means, loop the first video for 24 hours. after that next video. Now the videos are playing continuously. But I Don't know how to set the time for playing videos. Please help me to solve this problem. Thank you.
Here is My code.
var videoSources = ["video/kid.mp4", "video/hands.mp4", "video/video5.mp4", "video/action.mp4"];
var currentIndex = 0;
// listener function changes src
function myNewSrc() {
var myVideo = document.getElementsByClassName('episodeVideo')[0];
myVideo.src = videoSources[currentIndex];
myVideo.load();
}
// add a listener function to the ended event
function myAddListener() {
var myVideo = document.getElementsByClassName('episodeVideo')[0];
currentIndex = (currentIndex + 1) % videoSources.length;
myVideo.src = videoSources[currentIndex];
myVideo.addEventListener('ended', myNewSrc, false);
}
<div class="video-wrapper-main">
<video onended="myAddListener()" class="episodeVideo" preload="auto" autoplay controls>
<source src="" type="video/mp4">
</video>
</div>
var videoSources = ["video/kid.mp4", "video/hands.mp4", "video/video5.mp4", "video/action.mp4"];
var startTime = Date.now();
var currentIndex = 0;
// listener function changes src
function myNewSrc() {
var myVideo = document.getElementsByClassName('episodeVideo')[0];
var newTime = Date.now();
var msIn24Hours = 1000 * 60 * 60 * 24;
var isAfter24Hours = newTime - startTime >= msIn24Hours;
if(isAfter24Hours) {
myVideo.src = videoSources[currentIndex];
startTime = newTime;
}
myVideo.load();
}
// add a listener function to the ended event
function myAddListener() {
var myVideo = document.getElementsByClassName('episodeVideo')[0];
currentIndex = (currentIndex + 1) % videoSources.length;
myVideo.src = videoSources[currentIndex];
myVideo.addEventListener('ended', myNewSrc, false);
}
You could then store the start into localStorage and use that value.
Related
I have 2 function which play the same video but with different timing.
I can't play make the function to work properly.
Looks like the function doesn't reset the other function
I tried to change variables names but still change the timing on click.
var video = document.getElementById('videoElm');
function playShortVideo() {
var starttime = 0; // start at 0 seconds
var endtime = 2; // stop at 2 seconds
video.addEventListener("timeupdate", function() {
if (this.currentTime >= endtime) {
this.currentTime = 0; // change time index here
}
}, false);
video.load();
video.play();
}
function playFullVideo() {
var starttime = 0; // start at 0 seconds
var endtime = 24; // stop at 2 seconds
video.addEventListener("timeupdate", function() {
if (this.currentTime >= endtime) {
this.currentTime = 0; // change time index here
}
}, false);
video.load();
video.play();
}
//play short video by default
playShortVideo();
//CLICK events
var btnshort = $('.shortvideo');
var btnfull = $('.fullvideo');
btnshort.click(function() {
playShortVideo();
});
btnfull.click(function() {
playFullVideo();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<video id="videoElm" autoplay muted controls loop>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/webm">
</video>
</div>
<button class="shortvideo">play 2 secs only</a><br>
<button class="fullvideo">loop full video</button>
That's because the listener is still there, you need to remove it.
Remember, in order to remove it, you can't use anonymous function as callback so I turned it into defined function.
var video = document.getElementById('videoElm');
const playShort = function() {
if (this.currentTime >= 2) {
this.currentTime = 0; // change time index here
}
};
const playFull = function() {
if (this.currentTime >= 24) {
this.currentTime = 0; // change time index here
}
};
function playShortVideo() {
video.removeEventListener("timeupdate", playFull, false)
video.addEventListener("timeupdate", playShort, false);
video.load();
video.play();
}
function playFullVideo() {
video.removeEventListener("timeupdate", playShort, false)
video.addEventListener("timeupdate", playFull, false);
video.load();
video.play();
}
//play short video by default
playShortVideo();
//CLICK events
var btnshort = $('.shortvideo');
var btnfull = $('.fullvideo');
btnshort.click(function() {
playShortVideo();
});
btnfull.click(function() {
playFullVideo();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<video id="videoElm" autoplay muted controls loop>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/webm">
</video>
</div>
<button class="shortvideo">play 2 secs only</a><br>
<button class="fullvideo">loop full video</button>
And here is the approach for starting the video at 49 sec (60 > 49 + 10)
const shortStartTime = 49;
const shortDuration = 10;
var video = document.getElementById('videoElm');
const playShort = function() {
if (this.currentTime > (shortStartTime + shortDuration)) {
this.currentTime = shortStartTime; // change time index here
}
};
const playFull = function() {
if (this.currentTime >= 24) {
this.currentTime = 0; // change time index here
}
};
function playShortVideo() {
video.removeEventListener("timeupdate", playFull, false)
video.addEventListener("timeupdate", playShort, false);
video.load();
video.currentTime = shortStartTime;
video.play();
}
function playFullVideo() {
video.removeEventListener("timeupdate", playShort, false)
video.addEventListener("timeupdate", playFull, false);
video.load();
video.play();
}
//play short video by default
playShortVideo();
//CLICK events
var btnshort = $('.shortvideo');
var btnfull = $('.fullvideo');
btnshort.click(function() {
playShortVideo();
});
btnfull.click(function() {
playFullVideo();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<video id="videoElm" autoplay muted controls loop>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/webm">
</video>
</div>
<button class="shortvideo">play 2 secs only</a><br>
<button class="fullvideo">loop full video</button>
That happens because you're attaching a timeUpdate event listener multiple times.
You either need to use one-only or delete it before attaching a new one.
var video = document.getElementById('videoElm');
var listener;
var starttime = 0;
var endtime = 2;
function updateVideo(e) {
if (e.target.currentTime >= endtime) {
e.target.currentTime = 0; // change time index here
}
}
function playShortVideo() {
starttime = 0; // start at 0 seconds
endtime = 2; // stop at 2 seconds
if (!listener) {
listener = video.addEventListener("timeupdate", updateVideo, false);
}
video.load();
video.play();
}
function playFullVideo() {
starttime = 0; // start at 0 seconds
endtime = 24; // stop at 2 seconds
if (!listener) {
listener = video.addEventListener("timeupdate", updateVideo, false);
}
video.load();
video.play();
}
//play short video by default
playShortVideo();
//CLICK events
var btnshort = $('.shortvideo');
var btnfull = $('.fullvideo');
btnshort.click(function() {
playShortVideo();
});
btnfull.click(function() {
playFullVideo();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<video id="videoElm" autoplay muted controls loop>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/webm">
</video>
</div>
<button class="shortvideo">play 2 secs only</a><br>
<button class="fullvideo">loop full video</button>
I have array of multiple videos. Right now, the code below works in that it plays multiple videos one after the other. However, they are time agnostic, and I specifically want to play these videos for exactly one hour. How can I achieve this using Javascript?
<body onload="myNewSrc()">
<div id="section-title">
<video onended="myAddListener()" autoplay controls width="100%" height="auto">
<source src="" type="video/mp4">
</video>
</div>
<script>
var videoSources = ["http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4",
"http://www.html5videoplayer.net/videos/toystory.mp4",
"http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4",
"http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4",
"http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"
];
var currentIndex = 0;
//listener function changes src
function myNewSrc() {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = videoSources[currentIndex];
myVideo.load();
}
function myAddListener() {
var myVideo = document.getElementsByTagName('video')[0];
currentIndex = (currentIndex + 1) % videoSources.length;
myVideo.src = videoSources[currentIndex];
myVideo.addEventListener('ended', myNewSrc, false);
}
</script>
</body>
Add a DOMContentLoaded event listener to body, then inside that get the current time using Date.now() and store it in some variable.
Then compare the stored time to the current time every time a video finishes playing. If more than one hour has elapsed, then end the playback.
You can do something like this
var startTime;
var videoSources =
["http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", "http://www.html5videoplayer.net/videos/toystory.mp4", "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"];
var currentIndex =0;
//listener function changes src
function myNewSrc(){
startTime = new Date;
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src=videoSources[currentIndex];
myVideo.load();
}
function myAddListener(){
if ((new Date) - startTime > (60 * 60 * 1000)) {
return;
}
var myVideo=document.getElementsByTagName('video')[0];
currentIndex=(currentIndex+1)%videoSources.length;
myVideo.src=videoSources[currentIndex];
myVideo.addEventListener('ended',myNewSrc,false);
}
I have a number of <audio> tags in my code and I would like to know if there is a way that I can set each one to have a custom start and end position as they all load the same file.
This should happen without user interaction. effectively I need to deploy and <audio> tag and have something like data-start="04.22" data-end="09.45"
There is a timerange parameter available in MediaElement's src attribute which does exactly this.
://url/to/media.ext#t=[starttime][,endtime]
Note that if you enable the controls on these elements, then the user will be able to seek to different positions.
Example :
var url = 'https://upload.wikimedia.org/wikipedia/commons/4/4b/011229beowulf_grendel.ogg';
var slice_length = 12;
var audio, start, end;
for (var i = 0; i < 10; i++) {
start = slice_length * i; // set the start
end = slice_length * (i + 1); // set the end
// simply append our timerange param
audio = new Audio(url + '#t=' + start + ',' + end);
audio.controls = true; // beware this allows the user to change the range
document.body.appendChild(document.createTextNode(start + 's ~ ' + end + 's'));
document.body.appendChild(document.createElement('br'));
document.body.appendChild(audio);
document.body.appendChild(document.createElement('br'));
}
The following is what your looking for. I have four options from which you can choose from each with a bit less difficulty than the one before. I recommend the last one based on what you needed.
The start time is in seconds and in this example it is 12 seconds. Instead of a end time you have a play time and this is in milliseconds.
myAudio=document.getElementById('audio2');
myAudio.addEventListener('canplaythrough', function() {
if(this.currentTime < 72){this.currentTime = 72;}
this.play();
setTimeout(function(){
document.getElementById('audio2').pause();
}, 3000);
});
<audio id="audio2"
preload="auto"
src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Drum.ogg" >
<p>Your browser does not support the audio element</p>
</audio>
If you really want to have an end time you can write a function that will take your input and subtract it from start time and convert it into millisecond.
An example of that is seen below:
var startTime = 72;
var endTime = 75;
var delaySec = endTime - startTime;
var delayMillis = delaySec * 1000;
myAudio=document.getElementById('audio2');
myAudio.addEventListener('canplaythrough', function() {
if(this.currentTime < startTime){this.currentTime = startTime;}
this.play();
setTimeout(function(){
document.getElementById('audio2').pause();
}, delayMillis);
});
<audio id="audio2"
preload="auto"
src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Drum.ogg" >
<p>Your browser does not support the audio element</p>
</audio>
In this one you can set both the start time and end time in seconds.
Or you could do this with the start time in minutes and seconds.
var startMinute = 1;
var startSecond = 12;
var endMinute = 1;
var endSecond = 15;
var startinsec = startMinute * 60;
var startTime = startinsec + startSecond;
var endinsec = endMinute * 60;
var endTime = endinsec + endSecond;;
var delaySec = endTime - startTime;
var delayMillis = delaySec * 1000;
myAudio=document.getElementById('audio2');
myAudio.addEventListener('canplaythrough', function() {
if(this.currentTime < startTime){this.currentTime = startTime;}
this.play();
setTimeout(function(){
document.getElementById('audio2').pause();
}, delayMillis);
});
<audio id="audio2"
preload="auto"
src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Drum.ogg" >
<p>Your browser does not support the audio element</p>
</audio>
Here is another one which should actually be easier for you to do since you have multiple files:
audioControl('audio2', 1, 12, 1, 15);
function audioControl(elemID,sM, sS, eM, eS) {
var startinsec = sM * 60;
var startTime = startinsec + sS;
var endinsec = eM * 60;
var endTime = endinsec + eS;;
var delaySec = endTime - startTime;
var delayMillis = delaySec * 1000;
myAudio=document.getElementById(elemID);
myAudio.addEventListener('canplaythrough', function() {
if(this.currentTime < startTime){this.currentTime = startTime;}
this.play();
setTimeout(function(){
document.getElementById(elemID).pause();
}, delayMillis);
});
}
<audio id="audio2"
preload="auto"
src="https://upload.wikimedia.org/wikipedia/commons/f/f0/Drum.ogg" >
<p>Your browser does not support the audio element</p>
</audio>
Anytime you want to do it you just run the following:
audioControl(ElementID, StartMinute, StartSecond, EndMinute, EndSecond);
See this answer for how to play an audio file at a certain time:
HTML 5 <audio> - Play file at certain time point
I'm looking for a simple way to temporarily disable a mouseover event, for literally 1000 miliseconds. All my attempts to do so, have so-far failed. I am trying to stop my images from flickering when the mouse enters several times as it hovers over the edge of the div. Here is my code:
var ranNum, result_10, resultFloor, piccy, audio;
function myFunction() {
ranNum = Math.random();
result_10 = (ranNum * 5) + 1;
resultFloor = Math.floor(result_10);
piccy = "<img src=\"random_images/" + resultFloor + ".gif\" />";
document.getElementById("demo").innerHTML = piccy;
audio = document.getElementById("audio");
audio.play();
}
<div id="container">
<div id="demo" onmouseenter="myFunction()">This</div>
<audio id="audio" src="pop.wav" ></audio>
</div>
This will stop the flicker:
var ranNum, result_10, resultFloor, piccy, audio;
var isPlaying = false;
var audio = document.getElementById("audio");
function myFunction() {
if (!isPlaying) {
isPlaying = true;
ranNum = Math.random();
result_10 = (ranNum * 5) + 1;
resultFloor = Math.floor(result_10);
piccy = "<img src=\"http://d2.alternativeto.net/dist/icons/cloudapp_2094.png?width=64&height=64&mode=crop&upscale=false\" />";
document.getElementById("demo").innerHTML = piccy;
// check every 1/2 second to see if the audio has ended
var t = setInterval(function() {
console.log(audio.ended);
if (audio.ended) {
isPlaying = false;
clearInterval(t);
}
}, 500);
audio.play();
}
}
<div id="container">
<div id="demo" onmouseenter="myFunction()">This</div>
<audio id="audio" src="http://freewavesamples.com/files/Casio-MT-45-Pops.wav" ></audio>
</div>
var myFunctionDisabled = null;
function disableMyFunction() {
clearTimeout(myFunctionDisabled);
myFunctionDisabled = setTimeout(function() { myFunctionDisabled = false; }, 1000);
}
function myFunction() {
if (myFunctionDisabled) return;
...
}
Here's a quick and dirty approach. Simply uses a variable referencing a function, and changes the reference to point to a function that does nothing, then back to the original function.
I agree with Kosch's suggestion of using the underscore/lodash debounce function if you're already using those libraries or if you see them helping you in more than just this one case.
var ranNum, result_10, resultFloor, piccy, audio;
function myFunction() {
disableMouseOverHandler();
ranNum = Math.random();
result_10 = (ranNum * 5) + 1;
resultFloor = Math.floor(result_10);
piccy = "<img src=\"random_images/" + resultFloor + ".gif\" />";
document.getElementById("demo").innerHTML = piccy;
audio = document.getElementById("audio");
audio.play();
}
function doNothing() {
}
var mouseOverHandler = myFunction;
function disableMouseOverHandler() {
mouseOverHandler = doNothing;
setTimeout(function(){ mouseOverHandler = myFunction; }, 3000);
//I used 3000ms (3 seconds) to make it more pronounced.
}
<div id="container">
<div id="demo" onmouseenter="mouseOverHandler()">This</div>
<audio id="audio" src="pop.wav" ></audio>
</div>
right now I have an array of videos. How do I make it so when i click next and prev the next or previous video in the array loads.
<video id="video" controls autoplay width="1000">
<source src="videos/test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="videos/test.ogv" />
</video>
next
<script>
var vidURL=["videos/test.ogv","videos/test2.ogv","videos/test3.ogv","videos/test4.ogv","videos/test5.ogv" ]; // literal array
function vidSwap(vidURL) {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = vidURL;
myVideo.load();
myVideo.play();
}
Using yout code, it'll be something like this.
What you need to do is have the video that you loaded on a javascript variable.
Then, when you click prev or next you can call a function that will put the correct video number and call it.
<script>
var vidURL=["videos/test.ogv","videos/test2.ogv","videos/test3.ogv","videos"]
var video = 0;
function vidSwap() {
var myVideo = document.getElementsByTagName('video')[video];
myVideo.src = vidURL[video];
myVideo.load();
myVideo.play();
}
function prevVideo() {
if(video == 0) {
video = vidUrl.length;
}
else {
video -= 1;
}
vidSwap();
}
function nextVideo() {
if(video == length) {
video = 0;
}
else {
video += 1;
}
vidSwap();
}
</script>
<video id="video" controls autoplay width="1000">
<source src="videos/test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="videos/test.ogv" />
</video>
prev
next
Introduce variable which will save current video index, then increment it or decrement it each time you press next/prev
</script>
var i = 0;
<script>
javascript:vidSwap(vidURL[i++])
It looks like you're missing another plus sign in your increment operator.
Try changing
next
To this
next
Wrapped up alternative with wrap-around;
next
prev
...
var Vids = (function() {
var _currentId = -1;
var _urls = ["videos/test.ogv","videos/test2.ogv","videos/test3.ogv","videos/test4.ogv","videos/test5.ogv" ]; // literal array
return {
next: function() {
if (++_currentId >= _urls.length)
_currentId = 0;
return this.play(_currentId);
},
prev: function() {
if (--_currentId < 0)
_currentId = _urls.length - 1;
return this.play(_currentId);
},
play: function(id) {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = _urls[id];
myVideo.load();
myVideo.play();
return false;
}
}
})();