We Keep Coding

Random Fullscreen Video Background on Load (jsfiddle included)

Trying to get my site to display a random fullscreen background video from a folder of videos I will maintain. I'd like to keep adding to the folder (bg1.mp4, bg2.mp4, etc...) and have the code automatically choose a random video to loop when you load the page.
here is my current code: https://jsfiddle.net/nenr3kyn/2/ , which isn't fully functional. I have a specific video chosen as the source file:
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
because I can't seem to get the html to call the variable set by the javascript "vid", like this:
<source src=vid type="video/mp4">
Also, this code wouldn't allow me to simply add files to the folder, and is limiting me to the videos that are specifically listed in the code. I'd rather have the javascript able to count all the files currently in the folder and choose a random, but couldn't get that to work either.
Any ideas?
Any input is greatly appreciated.
Thanks so much!!

Don't use the loop attribute it wouldn't trigger the ended event.
videoPlayer.addEventListener('ended', function(){
var videoLink = ['link1', 'link2','link3'];
var nextVid = Math.floor( Math.random() * videoLink.length);
this.src = videoLink[nextVideo];
this.play();
});
Hope this will help

Load different video in HTML5 video player

I have an HTML5 video tag that I dynamically load. Here's my HTML:
<video id="video" width="640" height="480" controls autoplay>
<source id="source" src="" type="video/mp4">
</video>
Here is my JavaScript for loading the video:
function RunVideo(index) {
var grid = document.getElementById("ctl00_ContentPlaceHolder1_gvPresentations");
var cell = grid.rows[(+index) + 1].cells[2].innerHTML;
var player = document.getElementById('video');
var mp4Vid = document.getElementById('source');
var movie = cell;
player.pause();
mp4Vid.setAttribute('src', movie);
player.load();
player.play();
}
The first time I load a video (from a grid view) it works fine. But any subsequent ones I try to load I get the following message in the video player:
Error: Unsupported video type or invalid file path.
How can I correctly unload the current video in order to reload a new one?
Edit
It seems to be an IE only bug. It does work in other browsers like a charm.
It is able to play each video individually on load (i.e if no other src have been set before).
The links and code are ok then.
It throws a MEDIA12899: AUDIO/VIDEO: Unknown MIME type. error.

Edit:
After I tested with this fiddle, the bug doesn't raise, so my assumptions were incorrect.
Which leaves you with the only choice of trying to re-encode your videos.
Original answer:
It seems you are facing an IE bug, when setting the source element with different codecs(not type).
I think that the browser automatically assigns for himself the codec parameter, in the type attribute and doesn't update it when the new src is set.
Even if all your videos are encapsulated in .mp4, the codecs may vary.
You can find a list of codecs that IE does support here. Basically, .webm, '
H.264 high profile' and H.264 baseline profile.
One possible workaround you may try, if my assumptions are correct, is to create a new sourceelement each time you call your RunVideo function.
function RunVideo(index) {
var grid = document.getElementById("ctl00_ContentPlaceHolder1_gvPresentations");
var cell = grid.rows[(+index) + 1].cells[2].innerHTML;
var player = document.getElementById('video');
var oldMp4Vid = document.getElementById('source');
var movie = cell;
var newmp4Vid = document.createElement('source')
newMp4Vid.src = cell;
player.removeChild(oldMp4Vid);
player.appendChild(newMp4Vid);
player.load();
}
I'm not sure it will do the trick and I'm not sure what the specs tells about setting <source> new src on the flow like that, but if this problem is only present in IE, it's probably a bug from them, maybe you could fill a bug report.
Alternatively, you could re-encode your videos with the exact same codec.

Why does audio not start when 'play' button is first clicked?

I'm having trouble with audio in Firefox. I have an .ogg audio clip in an <audio> tag, and Firefox does not start playing the file when the play button is fisrt pressed. However, if the play button is pressed and then a time is selected from the timeline, the audio will start playing from the time selected. The file will also start playing if the play button is pressed repeatedly (e.g. play/pause/play).
I'm also using the web audio API to run the audio through an AnalyserNode. The issue, however, does not seem to relate to the analyser specifically, as this can be removed without affecting this issue. It seems to have something to do with createMediaElementSource. If I remove the JavaScript code related to this, the issue disappears.
The audio file is being served from the same origin, so I'm fairly certain this is not a CORS issue (as described here). As I said, the audio will play, but only if a time is selected on the timeline.
I'm including the simplest example of the issue below. This would likely need to be run from an HTTP server (python -m http.server, python -m SimpleHTTPServer or whatever) in order to avoid any CORS issues. For this reason, I don't think I can include a JSFiddle demonstration of this issue here.
This issue appears to be Firefox only. It definitely does not affect Chrome, but I haven't actually tested any other browsers yet.
<audio id="audio" controls>
<source src="piano-sonata-no13.ogg" type="audio/ogg" />
</audio>
<script>
var audio_node = document.getElementById('audio');
var audioctx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioctx.createAnalyser();
window.addEventListener('load', function(e) {
var source = audioctx.createMediaElementSource(audio_node);
source.connect(analyser);
source.connect(audioctx.destination);
}, false);
</script>
Edit: An example of this issue can be found here: http://mdn.github.io/media-source-buffer/

Try replacing the window "load" event listener with this:
audio_node.addEventListener('canplay', function(e) {
var source = audioctx.createMediaElementSource(audio_node);
source.connect(analyser);
source.connect(audioctx.destination);
}, false);

This issue appears to be related to a Firefox bug.
The gist of it is, it appears as if createMediaElementSource is currently somewhat broken in Firefox, and you can't use the audio API with createMediaStreamSource and have it work as expected.
I found a workaround here (WARNING: page autoplays audio), but as far as I can tell, it only works when autoplay is set to true. Quick testing suggests that setting audio.autoplay to true, and immediately calling audio.pause() may be an acceptable workaround to this issue. One downside to this method is that when the play button is pressed, the audio does not start at the very beginning of the file.
This solution would look something like this:
<audio id="audio" controls>
<source src="piano-sonata-no13.ogg" type="audio/ogg" />
</audio>
<script>
var audio_node = document.getElementById('audio');
audio_node.autoplay = true;
// Alternatively, the autoplay attribute can be set on the <audio> tag
var audioctx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioctx.createAnalyser();
window.addEventListener('load', function(e) {
var source = audioctx.createMediaElementSource(audio_node);
source.connect(analyser);
source.connect(audioctx.destination);
audio_node.pause();
}, false);
</script>

changing src and currentTime doesn't work together

Well, the thing is, for my application, I have to change the video src and currentTime dynamically. I have tried changing both independently which worked fine. But, when I tried to do them together, there is some problem.
This is my video tag and a button, onclicking which src and currentTime must be changed.
<video id="video" src="sample.mp3" controls autoplay></video>
<button onclick="foobar()">change</button>
and my foobar() function is
function foobar()
{
v=document.getElementById("video");
v.src = "foo.mp3";
v.load();
v.currentTime = 3;
}
When I remove either v.src or v.currentTime, its working fine...
I have tried using networkState and currentState, no luck. I have even waited for some time(javascript timers) made sure that the new mp3 file is completely loaded and then tried changing currentTime. Even that did not work.
Please help me..
PS: I don't want to use any third party libraries.

You have to change the currentTime when the video is ready for that. In order to do that you can listen for a event from the video and change then the property, for example the loadeddata event. You can see the full list here.
v.addEventListener('loadeddata', function(){v.currentTime = 3;}, true);

You may use the url to set the timer:
function foobar()
{
v=document.getElementById("video");
v.src = "foo.mp3#t=3";
v.load();
}
It works in this fiddle http://jsfiddle.net/UkZLf/

Windows 8 (JavaScript): Multiple <video> tags with same webcam source: Possible?

I am developing a metro app using JavaScript and am trying to display two videos from the webcam simultaneously (one of them will, in the end, have a filter applied to it). However, I get an error whenever I try to set them both to use the webcam as a source,,,, Is there a good way to hand this situation?
Thanks!
Edit: Here is some code:
(Javascript)
var mediaCaptureMgr = new Windows.Media.Capture.MediaCapture();
var captureInitSettings = new Windows.Media.Capture.MediaCaptureInitializationSettings();
//...set properties of captureInitSettings...
mediaCaptureMgr.initializeAsync(captureInitSettings).then(function (result) {
var video1 = id("Video1"); //function to get html element with id
video1.src = URL.createObjectURL(mediaCaptureMgr, false); //does not matter if false is switched to true
var video2 = id("Video2");
video2.src = video1.src;//could also use var x = URL.create... then set video1.src/video2.src = x; still won't work.
},
errorHandler);
(HTML)
<video id="Video1" autoplay></video>
<video id="Video2" autoplay></video>
I can fire the JS through a Click event or Load event--doesn't matter--only Video1 gets the webcam video. Video2 doesn't work. Thoughts?
Thanks!

Been playing a bit with getUserMedia in a similar fashion in Chrome lately, and I'm wondering if canvas in Metro is acceptable for your second video playback, seeing as you're planning on doing filtering anyway, seems like you may have to go this route regardless?
That said, I don't know anything about the Metro javascript environment, but looking at your example and knowing how I'd do it in a supported browser:
var video1 = id("Video1");
var canvas = id('canvas');
var context = canvas.getContext('2d');
context.drawImage(video1, 0, 0);
Of course, this would only work if you are drawing that image for each frame of video, which would be a breeze if there's some analog of window.requestAnimationFrame.