AngularJS tải xuống tệp video đầy đủ cho phần tử video HTML5

Question

Tôi đang xây dựng một ứng dụng bằng AngularJS có trang chủ hiển thị 5 video của người dùng. Sau đó, người dùng có thể nhấp vào bất kỳ một trong số họ để bắt đầu phát lại.

Trình duyệt hiện đang tải xuống TẤT CẢ tệp video nguồn cho từng phần tử video html5 được hiển thị trong trang. Điều này xảy ra trên Chrome và FireFox, nhưng không phải trên IE 11.

Đây là mã cho ứng dụng

AngularJS ứng dụng khởi

var app = angular.module("hdv", ['ngCookies', 'infinite-scroll']).config(function ($interpolateProvider, $sceDelegateProvider) { 
$sceDelegateProvider.resourceUrlWhitelist([ 
    'self', 
    'https://*.vo.msecnd.net/**', 
    'https://*.domain.com/**' 
]); 
$interpolateProvider.startSymbol('[[[').endSymbol(']]]'); 
}); 

tôi sử dụng $ sceDelegateProvider vào danh sách trắng nguồn gốc khác nhau , vì các tệp nguồn video được phân phát qua CDN (tên miền của nó rõ ràng khác với uri của trang của tôi).

Các yếu tố html5 video được xây dựng sử dụng một chỉ thị của khách hàng:

app.directive("aVideo", function($http){ 
return { 
    template: '<video controls width="100%" ng-attr-poster=[[[post.creative.media.poster]]] ng-attr-preload="metadata" ng-src="[[[post.creative.media.uri]]]" ng-attr-type="[[[post.creative.media.contentType]]]"></video>',   
    scope:{ 
     post: "=", 
    }, 
    link: function(scope, element, attrs) { 
     $(element).find("video").on("play", function() { 
      $http.post('/post/' + scope.post.creative.cuid + '/views?_csrf=' + csrfToken) 
      .success(function(data){ 

      }) 
      .error(function(error){    

      }); 
     }); 
    }, 
} 
}); 

Lưu ý rằng các yếu tố hình tất cả đều có tải trước = set thuộc tính siêu dữ liệu, vì vậy tải của tập tin nguồn không nên bắt đầu.

Như bạn có thể thấy ở trên, tệp nguồn được lấy từ đối tượng phạm vi "[[[post.creative.media.uri]]]". Thông qua gỡ lỗi, tôi đã nhận ra rằng đó là phương thức resourceUrlWhitelist là phương thức kích hoạt tải xuống. Nếu tôi xóa danh sách trắng, thì các tệp video sẽ không được tải xuống nữa (nhưng cũng không được hiển thị trong trình duyệt do lỗi không an toàn $ sce). Ngoài ra, nếu tôi đặt uri này bằng phương thức $ sce "resourceUrl" trên mọi đối tượng "bài đăng", thì trình duyệt sẽ tải xuống toàn bộ tệp. Có vẻ như, bất cứ khi nào $ sce được sử dụng để đưa vào danh sách trắng tên miền hoặc nguồn gốc của tệp, trình duyệt chỉ tải xuống toàn bộ tệp mà không tương ứng với thực tế là nguồn của phần tử video và do đó thuộc tính tải trước nên được vinh danh.

Tôi muốn nhận ý kiến ​​từ cộng đồng về cách giải quyết vấn đề này, vì mỗi khi người dùng tải xuống trang chủ của tôi, trình duyệt của họ tải xuống khoảng 500mb dữ liệu video mà họ không cần.

Answer 1

1. Bạn chắc chắn nên sử dụng tải trước thay vì ng-attr-preload.

2. Kiểm tra xem khối meta có ở cuối tệp của bạn hay không. Nếu đây là trường hợp của bạn kiểm tra bài này về cách sửa chữa nó: Why do webkit browsers need to download the entire html5 video (mp4) before playing?