CODEWITHSUNDEEP
javascripthtmlvideoload
user1048682
user1048682

Reputation: 119

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

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!

Upvotes: 1

Views: 8898

Answers (2)

noob
noob

Reputation: 9202

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

Upvotes: 1

gilly3
gilly3

Reputation: 91497

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().

Upvotes: 4

Related Questions