Tự động sử dụng khung hình đầu tiên làm áp phích trong video HTML5?

Question

Tôi tự hỏi nếu có cách nào đơn giản để đạt được hiệu ứng này, không cần mã phụ trợ để trích xuất khung, hãy lưu nó dưới dạng jpg và cơ sở dữ liệu ở đâu đó.

Hiệu ứng nhờ đó khung đầu tiên của video chỉ hiển thị dưới dạng áp phích khi video tải sẽ hữu ích (nó sẽ chỉ hoạt động nếu trình duyệt có thể phát lại video rõ ràng, có thể hơi khác so với cách poster truyền thống hoạt động, nhưng đó không phải là một mối quan tâm.

Answer 1

có một plugin Popcorn.js gọi Popcorn.capture mà sẽ cho phép bạn tạo ra các áp phích từ bất kỳ khung video HTML5 của mình.

có một hạn chế được áp đặt bởi trình duyệt cấm đọc dữ liệu pixel của tài nguyên được yêu cầu trên các tên miền (sử dụng API canvas để ghi lại giá trị hiện tại của một khung). Video nguồn phải được lưu trữ trên cùng một tên miền như tập lệnh và trang html đang yêu cầu nó cho phương pháp này hoạt động.

Mã để tạo ra poster sử dụng plugin này khá đơn giản:

// This block of code must be run _after_ the DOM is ready 
// This will capture the frame at the 10th second and create a poster 
var video = Popcorn("#video-id"); 

// Once the video has loaded into memory, we can capture the poster 
video.listen("canplayall", function() { 

    this.currentTime(10).capture(); 

}); 

Answer 2

Bạn có thể đặt preload='auto' trên các yếu tố video để tải các khung đầu tiên của video tự động.

Answer 3

Gần đây, tôi đã thực hiện việc này cho một dự án gần đây hoạt động trên máy tính để bàn và thiết bị di động. Bí quyết đã làm cho nó hoạt động trên iPhone.

Đặt preload=metadata hoạt động trên máy tính để bàn và thiết bị Android chứ không phải iPhone.

Đối với iPhone, tôi phải đặt thành autoplay để hình ảnh áp phích tự động xuất hiện khi tải ban đầu. iPhone sẽ ngăn video tự động phát nhưng hình ảnh áp phích xuất hiện dưới dạng kết quả.

Tôi đã phải kiểm tra iPhone bằng câu trả lời của Pavan được tìm thấy tại đây. Detect iPhone Browser. Sau đó, sử dụng thẻ video phù hợp có hoặc không có autoplay tùy thuộc vào thiết bị.

var agent = navigator.userAgent; 
var isIphone = ((agent.indexOf('iPhone') != -1) || (agent.indexOf('iPod') != -1)) ; 

$videoTag = ""; 
if(isIphone()) { 
    $videoTag = '<video controls autoplay preload="metadata">'; 
} else { 
    $videoTag = '<video controls preload="metadata">'; 
}