Tại sao tạo ra một yếu tố video tự động sử dụng jQuery không làm việc trong IE9

Question

Tôi cố gắng để tái tạo sau đây với 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/

tôi đã đưa ra sau nhưng trong IE9 các yếu tố video là trống rỗng, bất cứ ai có thể cho tôi biết lý do tại sao và những gì tôi sẽ cần phải thay đổi để có thể tự động thêm video trong IE9? Nó hoạt động tốt trong Firefox, Chrome và 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")); 

CẬP NHẬT - đóng thẻ video trên và addded liên kết mới

http://jsfiddle.net/8Cevq/

Answer 1

Hãy thử như sau, công trình này:

01.

$("#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 example.

Tôi đã làm gì để làm việc này là:

• A) sử dụng phương pháp html để tiêm mark-up mong muốn tất cả cùng một lúc
• B) thẻ Altered (trên cả hai video và source) để sử dụng các thẻ đóng đầy đủ thay vì viết tắt />

_{Một video khá thú vị, nhân tiện.}

Answer 2

IE9 không thích khi bạn thêm nội dung của thành phần <video> động, vì vậy bạn phải thêm phần tử <video> và tất cả nội dung cùng một lúc.

Lưu ý: IE9 dường như không gặp sự cố với cách viết tắt <source ... /> miễn là bạn không thử thêm sau đó.