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>
Related
I have this <video> tag with 3 sources and would like to randomize them and select one when my website loads:
<video autoplay muted loop id="video_mainhub" style="width: 100%;height: auto;position:absolute;z-index: -1">
<source src="./video/vid95.mp4" type="video/mp4">
<source src="./video/vid70.mp4" type="video/mp4">
<source src="./video/vid65.mp4" type="video/mp4">
</video>
Thanks.
For someone with the same problem, here's the solution:
<video src="./video/vid95.mp4" autoplay muted loop id="video_mainhub"></video>
and javascript:
var vidElement = document.getElementById('video_mainhub');
var vidSources = [
"./video/vid95.mp4",
"./video/vid70.mp4",
];
var activeVideo = Math.floor((Math.random() * vidSources.length));
vidElement.src = vidSources[activeVideo];
vidElement.addEventListener('ended', function(e) {
// update the active video index
activeVideo = (++activeVideo) % vidSources.length;
if(activeVideo === vidSources.length){
activeVideo = 0;
}
// update the video source and play
vidElement.src = vidSources[activeVideo];
vidElement.play();
});
Hey everyone so what I am trying to accomplish is producing this fake A.I.. I was playing around with my code and I changed something over the past while and now it's not working.
What I am trying to do is to have multiple alerts,
the first alert being- 'hello'
the second alert 'is something there'
and so on and so on.
I'm trying to attach these alerts using a particular voice in an mp3. file.
So an alert pops-up and the audio goes off.
How can I connect them?
I'm just learning code, so please forgive my lack of knowledge.
<body onload="delayedAlert();">
<script>
var timeoutID;
function delayedAlert() {
timeoutID = window.setTimeout(slowAlert, 50);
}
function slowAlert() {
var audio= document.getElementsByTagName('audio')[0];
const audio2 = document.getElementsByTagName('audio')[1];
var audio3 = document.getElementsByTagName('audio')[2];
var audio4 = document.getElementsByTagName('audio')[3];
audio.play();
var myvar1;alert('Hello?');
audio2.play();
var myvar1;alert('Is something here?');
audio3.play();
var myvar2;alert('Something is here.');
audio4.play();
const name = prompt('What is your name?')
const sentence = 'Hello,' + name +'I am Eve'+name+name+name+name+'What does a' +name +' look like?';
responsiveVoice.speak(sentence, "US English Female", {
rate: 0.4,
onend: function() {
// Redirect after sentence has been spoke
location.replace('https://www.eves.website/eve_2.html');
}
});
};
</script>
<audio>
<source src="audio/hello.wav" type="audio/wav" preload=true>
</audio>
<audio>
<source src="audio/is_something_here.wav" type="audio/wav" preload=true>
</audio>
<audio>
<source src="audio/oh_something_is_here.wav" type="audio/wav" preload=true>
</audio>
<audio>
<source src="audio/what_is_your_name.wav" type="audio/wav" preload=true>
</audio>
<video autoplay="autoplay" preload="auto" id="video" src="images/evetwo.mp4" width="1300px" height="auto" style="position:absolute; z-index:-1;" >
Video not supported.
</video>
</body>
</html>
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
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
I am trying to play 3 audio files (with the possibility of more later) that run in the background. At this point I am simply trying to play them sequentially and have it loop back to the first audio file when the last is played. I believe I have tried almost every solution or combination of functions and I just can't get it to work. I run into one of two problems:
If I try using repetition with each audio stored in the array, the page will successfully play the first then tries to play the next two simultaneously, rather than sequentially. And it certainly does not go back to the first. Furthermore, if you notice in my html, I have a seperate ID for each player. Would it be better to put them all in the sample player ID?
jQuery(document).ready(function (){
var audioArray = document.getElementsByClassName('playsong');
var i = 0;
var nowPlaying = audioArray[i];
nowPlaying.load();
nowPlaying.play();
while(true){
$('#player').on('ended', function(){
if(i>=2){
i=0;
}
else{
i++;
}
nowPlaying = audioArray[i];
nowPlaying.load();
nowPlaying.play();
});
}
});
On the other hand, I can play each sequentially but each play needs to be hardcoded for and I cannot loop back to the first
jQuery(document).ready(function (){
var audioArray = document.getElementsByClassName('playsong');
var i = 0;
var nowPlaying = audioArray[i];
nowPlaying.load();
nowPlaying.play();
$('#player').on('ended', function(){
// done playing
//alert("Player stopped");
nowPlaying = audioArray[1];
nowPlaying.load();
nowPlaying.play();
$('#player2').on('ended', function(){
nowPlaying = audioArray[2];
nowPlaying.load();
nowPlaying.play();
});
});
});
Here is my html
<audio id="player" class = "playsong">
<source src="1.mp3" />
</audio>
<audio id="player2" class = "playsong">
<source src="2.mp3" />
</audio>
<audio id="player3" class = "playsong">
<source src="3.mp3" />
</audio>
I am not terribly familiar with javascript, I am wondering if there is another event trigger function built into JS that I am not using? Some help is greatly appreciated.
HTML
<audio id="song-1" preload class="songs">
<source src="1.mp3" type="audio/mpeg" />
</audio>
<audio id="song-2" preload class="songs">
<source src="2.mp3" type="audio/mpeg" />
</audio>
<audio id="song-3" preload class="songs">
<source src="3.mp3" type="audio/mpeg" />
</audio>
<audio id="song-4" preload class="songs">
<source src="4.mp3" type="audio/mpeg" />
</audio>
JS
jQuery(document).ready(function (){
var audioArray = document.getElementsByClassName('songs');
var i = 0;
audioArray[i].play();
for (i = 0; i < audioArray.length - 1; ++i) {
audioArray[i].addEventListener('ended', function(e){
var currentSong = e.target;
var next = $(currentSong).nextAll('audio');
if (next.length) $(next[0]).trigger('play');
});
}
});