Как загрузить видео на страницу HTML5 с помощью JavaScript с помощью onclick

Question

Я хочу вызвать функцию onclick (которая, как я знаю, работает), а затем загрузить ее на страницу:

Я пытаюсь создать элемент видео в HTML5, включая некоторые атрибуты для него.

Я знаю, что это работает, потому что я проверил это со следующим предупреждением:

alert("createSmallVideo has been called");

Я прокомментировал предупреждение сейчас, и я знаю, что функция вызывается, но почему нетвидео отображается на веб-странице:

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

Что я делаю не так?Пожалуйста, помогите!

Answer 1

Поскольку на вашей странице нет элемента с идентификатором #VideoContainer (или, если он есть, его не должно быть).Идентификатор элемента не может содержать #.Если вы откроете консоль JavaScript, вы, вероятно, найдете сообщение об ошибке нулевой ссылки.Попробуйте удалить # из вашего звонка на document.getElementById().

Answer 2

Вы также можете предварительно загрузить его с помощью JavaScript

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