Nhận số khung hình trong Video HTML5

Question

Tôi đang cố chụp từng số khung hình của video, tuy nhiên có vẻ như không có cách nào để đạt được số khung hình đó. Vì vậy, tôi bắt đầu đồng hồ của riêng mình để phù hợp với số khung của video nhưng chúng không bao giờ khớp và sự khác biệt tiếp tục tăng khi tiến trình video.

Vui lòng xem thùng của tôi. http://jsbin.com/dopuvo/4/edit

Tôi đã thêm số khung vào mỗi khung của video từ Adobe After Effect để tôi có thông tin chính xác hơn về sự khác biệt. Video đang chạy ở 29,97fps và requestAnimationFrame cũng được đặt để tăng số ở cùng một tỷ lệ, tuy nhiên tôi không chắc chắn sự khác biệt này đến từ đâu.

Đôi khi chúng phù hợp và đôi khi không. Tôi cũng đã thử làm nó ngoại tuyến nhưng tôi nhận được kết quả tương tự. Bất kỳ sự giúp đỡ nào.

Answer 1

Tôi tìm thấy thứ gì đó trên github cho việc này. https://github.com/allensarkisyan/VideoFrame

Tôi đã thực hiện nó trong fiddle này: http://jsfiddle.net/Ck6Zq/184/

var currentFrame = $('#currentFrame'); 
var video = VideoFrame({ 
    id : 'video', 
    frameRate: 29.97, 
    callback : function(frame) { 
     currentFrame.html(frame); 
    } 
}); 

$('#play-pause').click(function(){ 
    if(video.video.paused){ 
     video.video.play(); 
     video.listen('frame'); 
     $(this).html('Pause'); 
    }else{ 
     video.video.pause(); 
     video.stopListen(); 
     $(this).html('Play'); 
    } 
}); 

EDIT: cập nhật fiddle video mới để nó hoạt động trở lại.

Answer 2

Vấn đề là setTimeout không thực sự có thể dự đoán được, vì vậy bạn không thể chắc chắn rằng chính xác một khung hình mới đã được hiển thị mỗi lần chức năng của bạn chạy. Bạn cần kiểm tra số currentTime của video mỗi khi bạn cập nhật hiển thị khung hình và nhân với tốc độ khung hình.

Dưới đây là ví dụ hoạt động: http://jsbin.com/xarekice/1/edit Nó bị tắt bởi một khung, nhưng có vẻ như bạn có thể có hai khung ở đầu đánh dấu "000000".

Một vài điều về các yếu tố video mà bạn có thể muốn phải nhận thức được:

1. Như bạn dường như đã phát hiện ra, không có cách nào đáng tin cậy để xác định tỷ lệ khung hình, vì vậy bạn phải khám phá nó ở nơi khác và mã hóa nó. Có một số điều thú vị xảy ra với video metrics, nhưng chúng không chuẩn, không được hỗ trợ rộng rãi và theo kinh nghiệm của tôi, hoàn toàn không hiệu quả khi xác định tốc độ khung hình thực tế.

2. currentTime không phải lúc nào cũng đại diện chính xác những gì trên màn hình. Đôi khi nó đi trước một chút, đặc biệt là khi tìm kiếm (đó là lý do tại sao trong JSBin của tôi, tôi không cập nhật khung hình trong khi bạn đang tìm kiếm).

Tôi tin rằng currentTime cập nhật trên một chuỗi riêng biệt từ video rút ra thực tế, vì vậy nó hoạt động giống như đồng hồ riêng mà chỉ tiếp tục. Đó là nơi video muốn trở thành, không nhất thiết phải ở đâu. Vì vậy, bạn có thể nhận được gần, nhưng bạn cần phải làm tròn kết quả của tính toán khung, và một lần trong một thời gian, bạn có thể được tắt bởi một khung.