Tìm kiếm trong video HTML5 bằng Chrome

Question

Tôi gặp sự cố khi tìm kiếm video bằng Chrome.

Đối với một số lý do, không có vấn đề gì tôi làm, video.seekable.end(0) luôn là 0.

Khi tôi gọi video.currentTime = 5, tiếp theo là console.log(video.currentTime), tôi thấy nó luôn luôn là 0, mà dường như để thiết lập lại các video.

Tôi đã thử cả định dạng webm của MP4 và VP9, ​​nhưng cả hai đều cho kết quả tương tự.

Điều gây phiền nhiễu hơn là Firefox chạy mọi thứ một cách hoàn hảo. Có điều gì đặc biệt về Chrome mà tôi nên biết không?

Dưới đây là mã của tôi (mà chỉ có tác dụng trong Firefox):

 <div class="myvideo"> 
     <video width="500" height="300" id="video1" preload="auto"> 
      <source src="data/video1.webm" type="video/webm"/> 
      Your browser does not support videos. 
     </video> 
     </div> 

Và đây là javascript:

var videoDiv = $(".myvideo").children().get(0) 
videoDiv.load(); 
    videoDiv.addEventListener("loadeddata", function(){ 
    console.log("loaded"); 
    console.log(videoDiv.seekable.end(0)); //Why is this always 0 in Chrome, but not Firefox? 
    videoDiv.currentTime = 5; 
    console.log(videoDiv.currentTime); //Why is this also always 0 in Chrome, but not Firefox? 
    }); 

Lưu ý rằng chỉ đơn giản gọi videoDiv.play() không thực sự chơi đúng video trong cả hai trình duyệt.

Ngoài ra, sau khi tệp phim được tải đầy đủ, videoDiv.buffered.end(0) cũng cung cấp các giá trị chính xác trong cả hai trình duyệt.

Answer 1

Tôi đã mất một lúc để tìm ra ...

Sự cố này hóa ra là phía máy chủ. Tôi đã sử dụng phiên bản Jetty để phục vụ tất cả các tệp video của mình. Cấu hình đơn giản của Cầu tàu không hỗ trợ byte serving.

Sự khác biệt giữa Firefox và Chrome là Firefox sẽ tải xuống toàn bộ tệp video để bạn có thể tìm kiếm thông qua nó, ngay cả khi máy chủ không hỗ trợ http code 206 (partial content). Mặt khác, Chrome từ chối tải xuống toàn bộ tệp (trừ khi nó thực sự nhỏ, như khoảng 2-3mb).

Vì vậy, để có được những currentTime thông số của video html5 được làm việc trong Chrome, bạn cần một máy chủ hỗ trợ mã http 206.

Đối với bất cứ ai khác có vấn đề này, bạn có thể kiểm tra cấu hình máy chủ của bạn với curl tăng gấp đôi:

curl -H Range:bytes=16- -I http://localhost:8080/GOPR0001.mp4 

Điều này sẽ trả lại mã 206. Nếu nó trả về mã 200, Chrome sẽ không thể tìm kiếm video, nhưng Firefox sẽ, do một giải pháp thay thế trong trình duyệt.

Và một mẹo cuối cùng: Bạn có thể sử dụng NPM http-server để có được một http-server đơn giản cho một thư mục địa phương hỗ trợ nội dung phần:

npm install http-server -g 

Và chạy nó để phục vụ cho một thư mục địa phương:

http-server -p 8000 

Answer 2

Bạn có 3 khả năng cho thẻ Video: MP4, OGG, WebM.

Không phải tất cả các định dạng đều hoạt động trong tất cả các trình duyệt. Ở đây, tôi nghĩ rằng WebM hoạt động trong Firefox chứ không phải Chrome, vì vậy bạn nên cung cấp cả hai định dạng thay thế cho các tệp MP4 và WebM, bằng cách bao gồm thẻ Nguồn thứ hai đề cập đến tệp MP4.

Ví dụ: src = "data/video1.mp4" type = "video/mp4"

Phiên bản liên quan sẽ được trình duyệt tự động chọn.

Answer 3

Tôi gặp sự cố tương tự. Tôi đã nghe một sự kiện kết thúc trên một video và đặt currentTime ở giữa video để lặp lại liên tục. Nó không hoạt động trong Safari hoặc Chrome.

Tôi nghĩ rằng có thể có lỗi trong Safari/Chrome, nơi thuộc tính vị trí playhead không khả dụng trừ khi phương tiện hiện đang phát.

Cách giải quyết của tôi là bắt đầu vòng lặp của tôi ngay trước khi kết thúc video và không cho phép kết thúc.

Hãy thử kiểm tra của bạn bằng cách bắt đầu phát lại trước và sau đó chạy fuction của bạn để xem nó có hoạt động trong Safari Chrome hay không.

Answer 4

Nếu bạn đợi canplaythrough thay vì loadeddata, nó hoạt động.

Xem this codepen example.