video html5 chơi hai lần (âm thanh tăng gấp đôi) với JQuery .append()

Question

WTF lớn mà tôi nghĩ là một lỗi ẩn trong số semicomplex web app mà tôi đang thực hiện, nhưng tôi đã bỏ nó xuống mã đơn giản nhất có thể, và nó là vẫn có thể sao chép được trong Firefox, Chrome và Safari, không thể đoán trước nhưng hơn một nửa thời gian.

http://jsfiddle.net/cDpV9/7/

var v = $("<video id='v' src='http://ia600401.us.archive.org/18/items/ForrestPlaysTaik/forresto-plays-taik-piano-360.webm' autobuffer='auto' preload autoplay controls></video>"); 
$("#player").append(v); 

1. Thêm một yếu tố video.
2. Video bắt đầu tải và phát.
3. Âm thanh video như âm thanh đã được tăng gấp đôi.
4. Tạm dừng video hiển thị và một bản âm thanh vẫn tiếp tục.
5. Xóa phần tử video; âm thanh ma vẫn tiếp tục phát.
6. Xóa khung và âm thanh con ma ngừng (mặc dù một lần trong Firefox nó tiếp tục phát sau khi đóng cửa sổ và không dừng lại cho đến khi thoát Firefox).

Dưới đây là một ảnh chụp màn hình để có thể chứng minh rằng tôi không hoàn toàn điên: http://www.youtube.com/watch?v=hLYrakKagRY

Nó dường như không xảy ra khi thực hiện nguyên tố này với .html() thay vì .append(), vì vậy đó là đầu mối duy nhất của tôi: http://jsfiddle.net/cDpV9/6/

$("#player").html("<video id='v' src='http://ia600401.us.archive.org/18/items/ForrestPlaysTaik/forresto-plays-taik-piano-360.webm' autobuffer='auto' preload autoplay controls></video>"); 

Tôi đang sử dụng OS X 10.6.7.

---

Tôi nghĩ rằng tôi có nó. Thậm chí chỉ cần tạo đối tượng JQuery mà không cần thêm nó vào trang gây các cầu thủ ma to play: http://jsfiddle.net/cDpV9/8/

var v = $("<video id='v' src='http://ia600401.us.archive.org/18/items/ForrestPlaysTaik/forresto-plays-taik-banjo-360.webm' autobuffer='auto' preload autoplay controls></video>");

Để bây giờ tôi có thể làm việc này bằng cách sử dụng .html(). Tôi sẽ báo cáo the issue cho JQuery.

Answer 1

Có thể jQuery lưu trữ nội dung của $() trước khi thêm nó vào div người chơi của bạn? Vì vậy, có một trường hợp khác của thẻ video. Nó có thể là một lỗi trong jQuery. Bạn đã thử điều này mà không có Jquery/js?

Answer 2

Bạn có thể nhận html của #player và thêm video tự của bạn, sau đó thêm tổng số với .html() như thế này:

var v = $("#player").html() + "<video id='v' src='http://ia600401.us.archive.org/18/items/ForrestPlaysTaik/forresto-plays-taik-piano-360.webm' autobuffer='auto' preload autoplay controls></video>"; 
$("#player").html(v); 

Đó là không tốt như các .append() chức năng, nhưng nếu .append() không làm việc, bạn có thể buộc phải làm một việc như thế này.

Answer 3

Tôi sẽ thử thêm thuộc tính tự động phát sau bạn nối trình phát video. Điều này sau đó sẽ khởi tạo chức năng phát.

Đó sẽ là một cái gì đó như thế này:

var v = $("<video id='v' src='videofile.webm' autobuffer='auto' preload controls></video>"); 
$("#player").append(v); 
v.attr('autoplay','autoplay'); 

Khi bạn tạo các yếu tố trong JavaScript yếu tố hình ảnh ví dụ, đối tượng vv, chúng được nạp ngay lập tức và được lưu trữ trong bộ nhớ như các đối tượng.Đó là lý do tại sao bạn có thể tải trước hình ảnh trước khi tải trang. Do đó, nó không phải là một lỗi jQuery.

Ref: http://www.w3.org/TR/html5/video.html#attr-media-autoplay

Khi có mặt, các đại lý người dùng (như mô tả trong thuật toán được mô tả trong tài liệu này ) sẽ tự động bắt đầu phát lại của tài nguyên phương tiện truyền thông như sớm vì nó có thể làm như vậy mà không dừng lại.

Answer 4

Tôi gặp vấn đề tương tự ở đây. Điều này có vẻ là vấn đề với việc sử dụng thuộc tính "tự động phát" trên đánh dấu video của bạn.

• Tháo thuộc tính autoplay
• thêm DOMNode video của bạn đến bất kỳ node
• nếu bạn muốn hành vi autoplay, gọi videodomnode.play() - sử dụng jquery này sẽ $('video')[0].play()

Answer 5

Cái này đã làm việc tốt nhất trong trường hợp của tôi:

var v = '<audio hidden name="media"><source src="text.mp3"><\/audio>'; 
$('#player').append(v); 
$("audio")[$('audio').size()-1].play(); 

Answer 6

Tôi đã giải quyết được lỗi bằng cách tải video sau khi tải xong:

$(window).bind("load", function() { 
    var v = $("<video id='bgvid' loop muted> 
       <source src='/blabla.mp4' type='video/mp4'> 
       </source> 
      </video>"); 
$(".video-container").append(v); 
v.attr('autoplay','autoplay'); 
});