Develop Reference

Video Poster play at delay

I am trying to figure out how to play my 'animation' video at a delay. It needed to have a transparent background and no controller, so like a gif.
I figured video is the only solution, however now it's either running in a loop or running once.
Example image:
<div id="nee">
<video poster="" id="bgvid" playsinline muted>
<source src=" rendermirror.webm" type="video/webm">
<source src="rendermirror.mov" type="video/mp4">
</video>
Also tried using an interval, but i don't get it to work properly.
var video = document.getElementById("bgvid");
video.addEventListener("canplay", function() {
setTimeout(function() {
video.play();
}, 5000);
});
If anyone has any tips, would be really appreciated.
Cheers,

I pause the video when load and the video plays after 5s
var video = document.getElementById("myVideo");
// pause video event
video.pause();
video.addEventListener("canplay", function() {
setTimeout(function() {
video.play();
}, 5000);
});
<video id="myVideo" width="320" height="176">
<source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
</video>
if you want to loop the video then you will need to add change this
var video = document.getElementById("myVideo");
// pause video event
video.pause();
video.addEventListener("canplay", function() {
setTimeout(function() {
video.play();
}, 5000);
});
<video id="myVideo" width="320" height="176" loop>
<source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
</video>

how to make an array with several id's to a video tag with javascript jquery

I am using a custom build html5 video. The video tag has an unique id. Now i want to create several video tags.
This is how it works wit only 1 video:
<video id="myVideo1" controls preload="auto" width="600" height="350" >
<source src="test.mp4" type="video/mp4" />
</video>
the js:
$(document).ready(function(){
var video = $('#myVideo1);
// stuff goes her...
So: how can i make several video tags with each his own id and trigger with javascript on these id's?
How to handle with several videos, independent from each other like below?
<video id="myVideo1" controls preload="auto" width="600" height="350" >
<source src="test1.mp4" type="video/mp4" />
</video>
<video id="myVideo2" controls preload="auto" width="600" height="350" >
<source src="test2.mp4" type="video/mp4" />
</video>
<video id="myVideo3" controls preload="auto" width="600" height="350" >
<source src="test3.mp4" type="video/mp4" />
</video>
Code to start the video:
//bind video events
$('.videoContainer')
.append('<div id="init"></div>')
.hover(function() {
$('.control').stop().animate({'bottom':0}, 500);
$('.caption').stop().animate({'top':0}, 500);
}, function() {
if(!volumeDrag && !timeDrag){
$('.control').stop().animate({'bottom':-45}, 500);
$('.caption').stop().animate({'top':-45}, 500);
}
})
.on('click', function() {
$('#init').remove();
$('.btnPlay').addClass('paused');
$(this).unbind('click');
video[0].play();
});
$('#init').fadeIn(200);
});

You can always select the actual element instead of relying on id's.
$(document).ready(function(){
$('video').each(function(){
var video = $(this);
// Do the rest of the instructions.
});
});

HTML5 Video autoplay in Android

I am developing an html5 player supports ads with video-js
Since i know it doesn't work in iOS, is it the same on Android?
So far i've tried these with no luck on autoplay in Android
HTML
<video id="inReadPlayer" autoplay loop="loop"
controls preload="auto" class="video-js vjs-default-skin" width="640"
height="360" > <source src="'+videoSource+'" type="video/mp4">
</video>
JS
var player = videojs('inReadPlayer', { /* Options */ }, function() {
this.play();
this.on('ended', function() {
});
});
Thanks in advance

Try this:
var videoplayer = document.getElementById('inReadPlayer')
videoplayer.addEventListener("load", function() {
videoplayer.play();
});
videoplayer.onended = function() {
source.setAttribute('src', 'MAINVIDEO.mp4');
};
<video id="inReadPlayer" autoplay loop="loop"
controls preload="auto" class="video-js vjs-default-skin" width="640"
height="360" > <source src="'+videoSource+'" type="video/mp4">
</video>
Note that this snippet won't work because there is no video source

HTML / JavaScript Make a video play once a condition is met

For my website, I wanted a specific video to play, once a condition is met.
e.g (If x = 1, play the video)
I have this code in the HTML file:
<div id="video">
<video width="320" height="240" autoplay,>
<source src=video_mp4 type="video/mp4">
<source src=video_ogg type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
And in the JavaScript file:
document.getElementById("video").innerHTML.source.src = video_mp4;
document.getElementById("video").innerHTML.source.src = video_ogg;
But it doesn't seem to work.

You can use the following :
<video id="video1" src="vid.mp4"></video>
<script>
function playVideo(){
var video= document.getElementById("video1");
video.load();
video.play();
}
</script>

Javascript HTML5 audio - Dont play sound if already playing?

I have set up some HTML audio on my site and I have set an autoplay function after a couple of seconds, however the sound seems to be loading twice? one starts playing straight after the other although, one is a ghost and cannot see a player for it.
How could I go about telling javascript not to start playing sounds if there are already sounds playing?
<audio controls="controls" onloadeddata="var audioPlayer = this; setTimeout(function() { audioPlayer.play(); }, 2000)" }>
<source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
<source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
</audio>
The above issue has been solved however I wanted to add a flash fallback for this audio for internet explorer and so added:
<div id ="audio">
<script>var readingMusic = false; </script>
<audio controls="controls" loop="loop" onloadeddata="var audioPlayer = this; if (!readingMusic){readingMusic = true;setTimeout(function() { audioPlayer.play(); }, 2000)}" }>
<source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
<source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
<embed type="application/x-shockwave-flash" flashvars="audioUrl=http://www.alanis50.com/Music/music.mp3&autoPlay=true" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="400" height="27" quality="best" wmode="transparent"></embed>
</audio>
</div>
<div id="audiohide">
<audio controls="controls" loop="loop" onloadeddata="var audioPlayer = this; if (!readingMusic){readingMusic = true;setTimeout(function() { audioPlayer.play(); }, 2000)}" }>
<source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
<source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
<embed type="application/x-shockwave-flash" flashvars="audioUrl=http://www.alanis50.com/Music/music.mp3&autoPlay=true" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="400" height="27" quality="best" wmode="transparent"></embed>
</audio>
</div>
But now the flash audio is behaving how the previous audio did obviously the javascript is not affecting the flash embed?

Can't you have a boolean telling the browser if there is already some music playing ?
Example with 2 tags:
<script>var readingMusic = false; </script>
<audio controls="controls" onloadeddata="var audioPlayer = this; if (!readingMusic){readingMusic = true;setTimeout(function() { audioPlayer.play(); }, 2000)}" }>
<source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
<source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
</audio>
<audio controls="controls" onloadeddata="var audioPlayer = this; if (!readingMusic){readingMusic = true;setTimeout(function() { audioPlayer.play(); }, 2000)}" }>
<source src="http://www.alanis50.com/Music/music.mp3" type="audio/mp3"/>
<source src="http://www.alanis50.com/Music/music.ogg" type="audio/ogg"/>
</audio>

Well, that's a part of your jScript.js.
It seems that problem is in this line:
location = base + "/#" + current.replace(base, "");
You navigating to the new url without leaving current page(if origins are the same and the only difference is in hashes). I recommend you to start playing audio after changing location origin.
So you might place your autoplay logick right after this location changes.