HTML 5 Video, Phát trực tuyến/Chỉ đệm một phần nhất định của video dài hơn

Question

Chúng tôi có một đoạn video dài, dài tới 1 giờ. Chúng tôi muốn hiển thị cho người dùng đoạn 30 giây nhỏ của video này. Điều bắt buộc là video không nói lắp tại bất kỳ thời điểm nào.

Người dùng không thể sau đó nhảy xung quanh phần còn lại của video, họ chỉ thấy đoạn thứ hai 30 giây.

Ví dụ: một trận đấu bóng đá, toàn bộ trận đấu có trên video nhưng việc nhấp vào nút trong một trang khác sẽ tải toàn bộ video và chỉ chơi một mục tiêu.

Điều này có thể thực hiện với Video HTML5 không? Nó có liên quan gì đến TimeRang không? Video có phải phân phát qua giao thức truyền trực tuyến không? Chúng ta có thể đệm toàn bộ đoạn 30 giây trước khi phát không?

Mục tiêu là cắt giảm quy trình làm việc để cắt bỏ tất cả các clip nhỏ (và thời gian chuyển mã này sang tất cả các định dạng video HTML 5 khác), chúng tôi chỉ có thể ném một đoạn phim được mã hóa và gửi người dùng đến một phần của cảnh quay đó.

Suy nghĩ và ý kiến ​​của bạn được chào đón nhiều nhất, cảm ơn!

Answer 1

Tại thời điểm này trong thời gian video HTML5 là một Pita thực - chúng tôi không có API thực để kiểm soát đệm trình duyệt, do đó họ có xu hướng nói lắp trên các kết nối chậm hơn, như các trình duyệt thử để đệm một cách thông minh, nhưng thông thường làm hoàn toàn ngược lại.

Ngoài ra, nếu bạn chỉ muốn người dùng xem đoạn video cụ thể 30 giây (tôi cho rằng đó là cách bạn buộc người dùng đăng ký xem toàn bộ video), HTML5 không phải là lựa chọn đúng - nó sẽ vô cùng đơn giản để lạm dụng hệ thống của bạn.

Điều bạn thực sự cần trong trường hợp này là Trình phát Flash phong nha và Máy chủ phương tiện trong chương trình phụ trợ - đây là khi bạn có toàn quyền kiểm soát.

Answer 2

Bạn có thể thực hiện một số thao tác này, nhưng sau đó bạn sẽ phải chịu sự đệm của chính trình duyệt đó. (Bạn cũng không thể dừng nó khỏi đệm ngoài X giây) Đặt tốt nhất, bạn có thể dễ dàng có một điều khiển tìm kiếm tùy chỉnh để hạn chế phạm vi và dừng video khi truy cập đoạn thứ hai 30 giây.

Ngoài ra, việc lưu vào bộ đệm không phải là thứ bạn có thể kiểm soát khác để yêu cầu trình duyệt không làm điều đó. Phần còn lại là tự động và hỗ trợ để buộc một bộ đệm đầy đủ đã được gỡ bỏ từ thông số kỹ thuật.

Dù sao, chỉ cần cho bạn biết đây là thực tế khủng khiếp và có thể thực hiện được nhưng bạn sẽ có khả năng gặp phải nhiều sự cố. Bạn luôn có thể sử dụng một dịch vụ như Zencoder để giúp xử lý chuyển mã quá. Một lựa chọn khác sẽ là có ffmpeg hoặc phần mềm khác trên máy chủ để xử lý việc cắt và chuyển mã.

Answer 3

Bạn có thể đặt thời gian bằng cách sử dụng javascript (thuộc tính currentTime của video).

Trong trường hợp bạn muốn có một tùy chỉnh seekbar bạn có thể làm một cái gì đó như thế này:

<input type="range" step="any" id="seekbar"> 

var seekbar = document.getElementById('seekbar'); 
function setupSeekbar() { 
seekbar.max = video.duration; 
} 
video.ondurationchange = setupSeekbar; 
function seekVideo() { 
    video.currentTime = seekbar.value; 
} 
function updateUI() { 
    seekbar.value = video.currentTime; 
} 
seekbar.onchange = seekVideo; 
video.ontimeupdate = updateUI; 

function setupSeekbar() { 
    seekbar.min = video.startTime; 
    seekbar.max = video.startTime + video.duration; 
} 

Nếu video đang trình chiếu, bạn sẽ cần phải "tính toán" là "kết thúc" thời gian.

var lastBuffered = video.buffered.end(video.buffered.length-1); 
function updateUI() { 
    var lastBuffered = video.buffered.end(video.buffered.length-1); 
    seekbar.min = video.startTime; 
    seekbar.max = lastBuffered; 
    seekbar.value = video.currentTime; 
}