Почему динамическое создание видеоэлемента с использованием 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 ... />
, если вы не пытаетесь добавить его впоследствии.