Truy cập Sự kiện tiến độ video HTML 5 với jQuery

Question

Phần dưới đây dành cho sự kiện trình phát video HTML5.

Đối tác của tôi và tôi đã bị bối rối trong một phần rất lớn trong ngày về vấn đề này và hy vọng ai đó có thể cho vay một số thông tin chi tiết về vấn đề này. Chúng tôi đã có thể truy cập vào sự kiện tiến bộ với js đồng bằng như được thấy bên dưới nhưng khi cố gắng truy cập điều này với jQuery, chúng tôi nhận được không xác định trong bảng điều khiển. Bất kỳ trợ giúp/khuyến nghị nào được đánh giá cao.

//JS - Works like a charm 
document.addEventListener("DOMContentLoaded", init, false); 
function init() { 
    var v = document.getElementById('test-vid'); 
    console.log(v) 
    v.addEventListener('progress', progress, false); 
} 
function progress(e) { 
    console.log(e.lengthComputable + ' ' + e.total + ' ' + e.loaded); 
} 


    // jQuery - NO BUENO - Undefined rendered in console 
    var vid = $('#test-vid'); 
    $(vid).bind("progress", function(e){ 
      console.log(e.total + ' ' + e.loaded + ' ' + e.lengthComputable); 

      }); 

Cảm ơn trước,

JN

Answer 1

Tại sao không chỉ cần sử dụng:

$('video#test-vid').bind("progress",function(e){ 
     console.log(e.total + ' ' + e.loaded + ' ' + e.lengthComputable); 
    }); 

này nên làm việc, jQuery nên ràng buộc các sự kiện

Hãy xem ở đây

HTML5 <video> callbacks?

Answer 2

Một vài suy đoán hoang dã ...

Bạn có:

var vid = $('#test-vid'); 
$(vid).bind(... 

On rằng dòng thứ hai, vid đã là một đối tượng jQuery. Bạn đã thử sử dụng đơn giản vid.bind() chưa?

Hoặc, nếu bạn biết addEventListener hoạt động, tại sao không sử dụng? Có lẽ bạn sẽ có may mắn nếu, sau khi chọn với jQuery, bạn phát ra các đối tượng DOM undecorated:

var vid = $('#test-vid'); 
vid.get().addEventListener(... 

Answer 3

bạn nhận được một không xác định vì jQuery sử dụng một danh sách trắng của sự kiện bất động sản, để bình thường hóa các sự kiện, không phải tải hay tổng là trong danh sách này.

Nếu bạn muốn nhận được thông tin, bạn phải sử dụng: e.originalEvent.lengthComputable vv ..

Nhưng thành thật bạn không nên làm điều này. Thuộc tính sự kiện này chỉ là firefox và không phải là một phần của đặc tả html5 nữa. Bạn phải sử dụng đối tượng đệm trong các trình duyệt khác. Điều tiến bộ thực sự có vấn đề trong các phương tiện truyền thông html5. safari trên iPad hoạt động khác với safari trên mac và vân vân.

một thực hiện qua trình duyệt của một tiến trình sự kiện có thể được tìm thấy trong jMediaelement-THƯ VIỆN: http://github.com/aFarkas/jMediaelement/blob/1.1.3/src/mm.base-api.js#L312

liên quan alex

Answer 4

Sử dụng originalEvent:

if(e.originalEvent.lengthComputable && e.originalEvent.total){ 
    var loaded = e.originalEvent.loaded/e.originalEvent.total * 100; 
}