2014-10-06 14 views
5

Tôi đang tải nhiều video trên một trang duy nhất,Nhiều của video trên một trang duy nhất Không tải tất cả các video của Chrome

đoạn mã của tôi là một cái gì đó như thế nào,

<div class="video_content left"> 
    <span style="font-weight:bold">1</span> 
    <video width="213" height="120" controls class="video_tag"> 
     <source src="<MY VIDEO SOURCE>" type="video/mp4" /> 
    </video> 
</div> 
<div class="video_content left"> 
    <span style="font-weight:bold">2</span> 
    <video width="213" height="120" controls class="video_tag"> 
     <source src="<MY VIDEO SOURCE>" type="video/mp4" /> 
    </video> 
</div> 
<div class="video_content left"> 
    <span style="font-weight:bold">3</span> 
    <video width="213" height="120" controls class="video_tag"> 
     <source src="<MY VIDEO SOURCE>" type="video/mp4" /> 
    </video> 
</div> 
<div class="video_content left"> 
    <span style="font-weight:bold">4</span> 
    <video width="213" height="120" controls class="video_tag"> 
     <source src="<MY VIDEO SOURCE>" type="video/mp4" /> 
    </video> 
</div> 

Đôi khi tôi sẽ nhận được 20 + video trên một trang, vì vậy thời gian đó tôi sẽ tạo nhiều thẻ video đó. Bất cứ khi nào tôi thử mã này trong localhost của tôi nó hoạt động tốt, nhưng nếu tôi lưu trữ mã này trong máy chủ từ xa và thử chỉ một vài video sẽ được tải, nhưng trong phần tử kiểm tra chrome của tôi không có thông báo lỗi.

Tôi đã thử tải lại từng video một bằng cách sử dụng JQuery với một khoảng thời gian nào đó, thời gian đó tôi sẽ nhận được cảnh báo "Tiêu đề tạm thời được hiển thị" trong phần tử Kiểm tra của chrome.

Có ai vui lòng giúp tôi khắc phục sự cố này không?

Xin cảm ơn trước.

Trả lời

2

Điều đó có thể là rất nhiều dữ liệu để trình duyệt tải xuống tất cả cùng một lúc, tùy thuộc vào độ lớn của tệp và tốc độ máy chủ cũng như tốc độ nhanh. Thử cung cấp cho mỗi thẻ video một thuộc tính preload và đặt nó thành "siêu dữ liệu". Như thế này:

<video width="213" height="120" controls class="video_tag" preload="metadata"> 

Điều đó sẽ giới hạn số lượng tệp mà trình duyệt cần tải cùng một lúc, chỉ tải tiêu đề của mỗi tệp video. Phần còn lại của tệp sẽ tải khi bạn bắt đầu chơi. Nếu điều đó không có tác dụng, hãy thử cài đặt preload thành "none".

Ngoài ra, bạn sẽ muốn đảm bảo máy chủ từ xa đang sử dụng HTTP Byte Serving. tức là, tiêu đề trạng thái HTTP trên các tệp video phải là "206 Nội dung một phần", không phải là "200 OK".

3

Chrome giới hạn số lượng tệp video/âm thanh thành 4 hoặc 6 (Tôi không thể nhớ được), như brianchirls đề cập, bạn cần đặt thuộc tính preload, mặc dù bạn cần đặt thành none.

Đề xuất của tôi là cung cấp hình ảnh áp phích (thông qua thuộc tính poster) cho tất cả video của bạn và đặt preload="none" cho tất cả các video đó. Bằng cách đó, trình duyệt chỉ thực sự cố gắng tải chúng nếu người dùng chủ động nhấp vào nút phát.

Hoặc bạn có thể đặt 4/6 video đầu tiên với preload="metadata" và phần còn lại là preload="none".

Các vấn đề liên quan