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

Я пытаюсь воссоздать следующее с помощью 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>

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/

Ответ 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) для использования полных закрывающих тегов, а не сокращенного />

Довольно крутое видео, кстати.

Ответ 2

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

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