Làm cách nào để buộc video html5 tải đầy đủ?

Question

Tôi có một vài video html5 trên một trang. Khi tôi lần đầu tiên vào trang, họ tải chính xác - Tôi có thể thấy kích thước khung hình chính xác, phát video, v.v. Sau khi truy cập một trang khác và quay lại trang video, các khung hình không đủ cao và video không chơi, không có chế độ toàn màn hình, vv ..

Theo ý kiến ​​của tôi, đó là điều gì đó khi tải video. Tôi đã thử sử dụng onloadeddata mà không thành công (tôi có thể đã sử dụng nó sai mặc dù, newbie ở đây).

Có cách nào để buộc video có thể tải không? Giống như kiểm tra vòng lặp nếu video được tải, nếu không - tải chúng?

CẬP NHẬT: Đây là mã.

var content = ''; 
    var index; 
    $.post('api/getVideo.php', {id: id}, function(data) { 
    //console.log(data); 

     for (index = 0; index < data.length; index++) { 
      content = content + '<div class="col-md-6 video-col"> <button id="play" class="full-play-button"><i class="fa fa-play"></i></button>' + 
        '<video id="video1" class="video-small"> <source src="'+data[index]["Path"] + '"type="video/'+data[index]["Typ"]+'" class="video-file"> </video><h3 class="video-title">'+ 
        data[index]["Tytul"]+'</h3></div>'; 
     } 
    }, "json"); 

Answer 1

Từ MediaAPI docs,

Media API cũng chứa một phương thức load() đó: "Nguyên nhân tố này để thiết lập lại và bắt đầu lựa chọn và tải tài nguyên truyền thông mới từ đầu" ( Yếu tố tải khiến trình duyệt chạy media element load algorithm)

Bạn có thể kích hoạt tải trong khi quay lại từ trang mới.

Answer 2

Tóm lại, điều này là hoàn toàn không thể. Đối với video ngắn, bạn có thể đặt preload attribute thành "tự động" hoặc chuỗi trống "". Điều này có nghĩa là bạn muốn trình duyệt tải trước toàn bộ nguồn.

Unfortunatley, trong trường hợp video dài, video không được tải xuống đầy đủ bởi hầu hết các trình duyệt. Trong trường hợp trình duyệt di động rõ ràng là iOS. Thuộc tính preload không hoạt động. Vì vậy, cách để trông như thế này:

<video preload="" controls=""> 
    <source src="my-video.mp4" type="video/mp4" /> 
    <source src="my-video.webm" type="video/webm" /> 
</video> 

Answer 3

Bạn có thể có lỗi đánh máy trong thẻ nguồn của mình. Thử thay đổi '"type =" video /' thành '"type = video /"'. Các trình duyệt hiện đại không yêu cầu thuộc tính type nữa, vì vậy hãy thử xóa '"type =" video /' + data [index] ["Typ"] + 'hoàn toàn. Tôi không có đủ thông tin để kiểm tra mã của bạn, nhưng có vẻ như lỗi cú pháp.