Почему создание элемента видео динамически с помощью jQuery не работает в IE9

Question

Я пытаюсь воссоздать следующее с помощью Jquery

<video width="640" height="264" autoplay>
    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />
    <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" />
    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" />
</video>

http://jsfiddle.net/4bkpU/2/

Я придумал следующее, но в IE9 элемент видео пуст, может кто-нибудь сказать мне, почему и что мне нужно изменить, чтобы иметь возможность динамически добавлять видео в IE9? Отлично работает в Firefox, Chrome и Safari.

HTML

<div id="videoHolder">
</div>

1012 * JQuery *

var video = $('<video width="640" height="264" autoplay></video>')
            .append('<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />')
            .append('<source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" />')
            .append('<source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" />')
            .appendTo($("#videoHolder"));

ОБНОВЛЕНО - закрыл тег видео выше и добавил новую ссылку

http://jsfiddle.net/8Cevq/

Answer 1

Попробуйте следующее, это работает:

$("#videoHolder").html(
    '<video width="640" height="264" autoplay>' +
        '<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4"></source>' +
        '<source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm"></source>' +
        '<source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg"></source>' +
    '</video>');

Пример JSFIDDLE .

То, что я сделал, чтобы получить эту работу, было:

• A) использовать метод html, чтобы сразу ввести нужную наценку
• B) Измененные теги (как на video, так и на source) для использования полностью закрывающих тегов, а не сокращенной />

_{Кстати, довольно крутое видео.}

Answer 2

IE9 не нравится, когда вы динамически добавляете содержимое элемента <video>, поэтому вы должны добавить элемент <video> и его содержимое одновременно.

Примечание: IE9, похоже, не имеет проблемы с сокращением <source ... />, если вы не пытаетесь добавить его позже.