We Keep Coding

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);
}

How is a partial audio file played?

How would I play an audio file in javascript that has been spliced into two byte arrays and loaded separately from a server at different times? I want to load the first half of an mp3 file, then, while the mp3 is playing, load the second half and seamlessly continue playing through the whole file.

You can use the canplaythrough and ended events to, play the first audio while loading the second, then play the second after loading. Something like this:
var canPlayAudio2 = false;
var audio1Ended = false;
var audio = document.createElement('audio');
audio.src = "your_audio_source";
audio.addEventListener('canplaythrough', function() {
//after first audio loads, start loading second audio
var audio2 = document.createElement('audio');
audio2.src = "your_audio2_source";
audio2.addEventListener('canplaythrough', function() {
canPlayAudio2 = true;
if (audio1Ended) {
audio2.play();
}
});
//play the first audio, play second audio if availible once finished
audio.play();
audio.addEventListener('ended', function() {
audio1Ended = true;
if (canPlayAudio2) {
audio2.play();
}
});
});

While the first part is playing, create another audio tag to pre-load the second half, but do not play it.
<audio src="the second half.mp3” preload="auto"></audio>
When the first audio trigger the ended event, change its URL to the second half.
The browser will get the file from cache and starts to play it immediately.
Sorry for my poor English, hoping this helps.

Play Youtube video in Basic HTML player with user control

I have a bunch of youtube urls which i would like to play. I want like to play only the audio content in a basic HTML player with user controls like Play, pause, next. I am unable to add user control functionality(Nor able to play the videos in a HTML player, i am embedding the youtube video), thus the user has to click on the play button of the next video every time a video is completed. Any help will be appreciated.

..continuing from the comments:
That's right you need to use js. I'll help you start: you can create an array with all your youtube urls:
var youtube_urls = ['https://www.youtube.com/watch?v=vpoi_l4jkyU', 'https://www.youtube.com/watch?v=Lml2SkB68ag', 'https://www.youtube.com/watch?v=awMiY-Ve1As'];
And then, using the api you listen for when a video is done playing and then start the next one:
Detect end video: How to detect when a youtube video finishes playing?
OR
Just create a playlist on youtube and embed the playlist. It'll loop through all the videos.

this should get you started:
// change this list to whatever you want
var urls = ['http://upload.wikimedia.org/wikipedia/en/f/f9/Beatles_eleanor_rigby.ogg',
'http://upload.wikimedia.org/wikipedia/commons/5/5b/Ludwig_van_Beethoven_-_Symphonie_5_c-moll_-_1._Allegro_con_brio.ogg'];
var idx=0;
var aud= document.getElementById('aud');
aud.src=urls[idx];
aud.addEventListener('ended', next); // for automatically starting the next.
function play(){
aud.play();
}
function pause(){
aud.pause();
}
function next(){
idx++;
if(idx === urls.length) idx=0;
aud.src = urls[idx];
aud.play();
}
<audio id = 'aud'></audio>
<button onclick="play();">play</button>
<button onclick="pause();">pause</button>
<button onclick="next();">next</button>

How to keep synchronized video element especially after pause/play event in (html5/javascript)

I try to have in a html5 webpage project three elements fully synchronized. To ensure no shift due to video download, I put the attribute preload="auto" to the video elements.
My script is as follows:
var run = document.getElementById("run"); //run is a button element
var vid = document.getElementById("video1"); // the first video element
function PlayVideo() {
if (vid.paused) {
vid.play();
run.textContent = "||";
} else {
vid.pause();
run.textContent = ">";
}
} // The PlayVideo() function is called onclick on the run button
$('#video1').on('play', ambiance = function(){
document.getElementById("video2").play();
document.getElementById("video3").play();
});
$('#video1').on('pause', ambiance = function(){
document.getElementById("video2").pause();
document.getElementById("video3").pause();
});
When using this piece of script after waiting few seconds to a complete load of the video files, the run button plays correctly the first video and the two others start synchronized. But when I pause the run button pushing a second time on it, only the first video stops and the two others continue to be played during 2 or 3 seconds (both of them synchronized but not with the first one).
Could you help me?
Is there an other way (more elegant) to play synchronized video?
One last element: the source of the three video is the same. (Same video played in each elements).
Thank you

Try something like this:
var videos = document.querySelectorAll('video');
function playAll() {
[].forEach.call(videos, function(video) {
video.play()
});
}
function pauseAll() {
[].forEach.call(videos, function(video) {
video.pause()
});
}
// this keeps everything synchronized
[].forEach.call(videos, function(video) {
video.addEventListener('play', playAll, false);
video.addEventListener('pause', pauseAll, false);
});
Keep in mind there will probably still be a slight offset (if you have sound it'll sound distorted)

How to stop an audio from playing in JavaScript

Sorry about the confusing title, but I have the following problem. I am working on a site where people can press a link and play a song, but in a page where there are multiple links (for playing songs), users can press all the links and all the songs start to play at the same time. So, this makes the current selected song difficult to hear.
So, what I am trying to do is, to cancel / stop the last playing song when a new link is pressed. Here is my code:
<div class='content'>
click <a href="javascript:play_wav('h');" class='h play-audio'> here </a>
to play the song
</div>
function play_wav(audio_name)
{
var src = document.querySelector('.'+audio_name).innerHTML =
"<audio src='audio/"+classs+".wav' class='audio_"+audio_name+"'>";
document.querySelector('.audio_'+audio_name).play();
}
Don't mind the bad quality, but as you can see, when the link is pressed, the DOM integrates an <audio src='audio/foo.wav' class='audio_foo"'>
then the script finds the audio_foo class and plays the songs.
But when another link is pressed, how do I reset the DOM to it's original state or just stop it from playing a previously started song?

You can keep a reference to the currently playing song.
var current_audio;
function play_wav(audio_name)
{
if (current_audio)
{
current_audio.stop();
}
var src = document.querySelector('.'+audio_name).innerHTML = "<audio src='audio/"+classs+".wav' class='audio_"+audio_name+"'>";
current_audio = document.querySelector('.audio_'+audio_name);
current_audio.play();
}
I've never used audio in javascript before, but I'm assuming there is a stop function if there is a play function.
Hope this helps!

Something like this:
function play_wav(audio_name) {
// List of all audio tags
var audios = document.querySelectorAll('audio')
//Iterate over all
for (var i = 0; i < audios.length; i++) {
var audio = audios[i]
// Stop playing
audio.pause()
// Remove node
audio.parentNode.removeChild(audio)
}
var audio = document.querySelector('.'+audio_name)
audio.innerHTML = "<audio src='audio/"+classs+".wav' class='audio_"+audio_name+"'>"
audio.querySelector('audio').play()
}