Trình theo dõi tiến trình theo dõi lưu lượng video?

Question

Sử dụng API FlowPlayer, có cách nào để nắm bắt Tiến độ video không? Tôi đang tìm cách nắm bắt tiến trình của video để tôi có thể kích hoạt sự kiện cho trang tại một số điểm nhất định trong Video. Trong Flash, có Sự kiện tiến triển kích hoạt mọi khung hình và tôi hy vọng rằng vì FlowPlayer là Flash, nên sự kiện Progress cũng sẽ được hiển thị. Tôi dường như không thể tìm thấy bất cứ điều gì như thẳng về phía trước trong tài liệu FlowPlayer.

Nếu sự kiện tiến trình không tồn tại. Có bất kỳ đề xuất nào về cách xây dựng một thứ như vậy bằng cách sử dụng các phương thức JS setInterval và các API FlowPlayer hiện có không?

Answer 1

Tôi đã hack một đoạn mã Javascript ngắn tương tác với các đối tượng Flowplayer Player và Clip để xác định tiến trình video.

var videoProgressInterval; 

flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.15.swf"); 
flowplayer("player").onStart(startVideoProgressChecking); 
flowplayer("player").onResume(startVideoProgressChecking); 
flowplayer("player").onStop(stopVideoProgressChecking); 
flowplayer("player").onPause(stopVideoProgressChecking); 
flowplayer("player").onFinish(stopVideoProgressChecking); 

function startVideoProgressChecking() { 
    videoProgressInterval = setInterval(checkVideoProgress, 1000); 
    videoProgressInterval(); 
} 

function stopVideoProgressChecking() { 
    clearInterval(videoProgressInterval); 
} 

function checkVideoProgress() { 
    var time_completed = flowplayer("player").getTime(); 
    var total_time = flowplayer("player").getClip().fullDuration; 
    var percent_done = Math.floor((time_completed/total_time) * 100); 

    console.log(percent_done + "% of video done"); 
} 

Bạn có thể xem bản trình diễn trên JSFiddle.

Nó đăng ký xử lý sự kiện cho các sự kiện start và resume của trình phát. Khi phát lại video đã bắt đầu, nó đăng ký một khoảng thời gian chạy mỗi giây (cảm thấy tự do để sửa đổi điều này để chạy thường xuyên hơn). Khoảng thời gian gọi checkVideoProgress() mỗi khi nó được thực thi, sau đó nhận thời gian phát lại hiện tại và tổng thời lượng từ đối tượng Clip để tính toán tiến độ.

Ngoài ra, trình xử lý sự kiện cũng được đăng ký cho các sự kiện stop, pause và finish để xóa khoảng thời gian sau khi video bị tạm dừng/dừng.

Answer 2

lẽ bạn có thể sử dụng Flowplayers Cuepoints

Thêm cuepoints đến tài sản dữ liệu (một trong hai giây, hoặc giây từ cuối với một dấu trừ)

<div class="flowplayer" data-cuepoints="[1.5, 2, 3, -1]"><!-- video here --></div> 

Sau đó ràng buộc một sự kiện:

flowplayer(function (api, root) { 
    api.bind("cuepoint", function (e, api, cuepoint) { 
     console.log(cuepoint); 
    }); 
});