html - How do I load a video into a HTML5 page with javascript using onclick - Stack Overflow

admin管理员组

文章数量:1402415

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 mented 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!

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 mented 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!

• javascript
• html
• video
• load

Share Improve this question Follow edited Nov 16, 2011 at 0:42 GNi33 4,50922 gold badges3232 silver badges4545 bronze badges asked Nov 16, 2011 at 0:32 user1048682user1048682 11944 silver badges1111 bronze badges 2

• What browser are you using and are you using some kind of developement tools (firebug for example)? If you do, is the console showing you anything? Is the given video-source correct? – GNi33 Commented Nov 16, 2011 at 0:42
• #VideoContainer should be changed to VideoContainer. The # is something done for CSS selectors (jQuery also uses that syntax). – Jasper Commented Nov 16, 2011 at 0:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

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

本文标签： htmlHow do I load a video into a HTML5 page with javascript using onclickStack Overflow