How do I load a video into a HTML5 page with javascript using onclick

Question

I want to call a function onclick (which I know works) then load it into the page:

I'm trying to create a video element in HTML5 including some attributes for it.

I know it works because I tested it with the following alert:

alert("createSmallVideo has been called");

I've commented the alert now and I know the function is being called but why isn't the video being displayed on the web page:

function createSmallVideo(){
    //alert("createSmallVideo has been called");

    var video = document.createElement("video");

    video.setAttribute("id", "VideoElement");
    video.setAttribute("src", "videos/small.ogv");
    video.setAttribute("controls", "controls");
    video.setAttribute("preload", "auto");
    document.getElementById("#VideoContainer").appendChild(video);
}

What am I doing wrong? Please help!

Answer 1

Because there is no element on your page with an id of #VideoContainer (or if there is there shouldn't be). An element Id cannot contain a # . If you open your JavaScript console you'll probably find a null reference error message. Try removing the # from your call to document.getElementById() .

Answer 2

you can preload it with javascript too

function loadVideo(videoUrl){
var video;
try {
    video = new Video();
} catch(e) {
    video = document.createElement('video');
}
video.src = videoUrl;
bindOnce(video, 'canplaythrough', function() {alert("Loaded");});
video.onerror = function(e){alert("Error");};
video.load();
}