Các mã được viết bằng Javascript thuần túy và được nhận xét khá. Những điểm nổi bật chính của mã được giải thích dưới đây
liên quan đến HTML
Select MP4 Video
Seek to seconds Download Thumbnail
Using the Object URL as the of the Element
Sau khi người dùng chọn video, video phải hiển thị dưới dạng phần tử trên trang HTML. Để đặt nguồn của phần tử này, bạn có thể sử dụng URL đối tượng của video. URL đối tượng là URL cục bộ của video do trình duyệt tạo.
// On selecting a video file
document.querySelector["#file-input"].addEventListener['change', function[] {
// Set object URL as the video
document.querySelector["#video-element source"].setAttribute['src', URL.createObjectURL[document.querySelector["#file-input"].files[0]]];
}];
Chờ siêu dữ liệu video tải
The dimensions [width / height] of the generated thumbnail will depend on the dimensions of the element. The dimensions of the element will in turn depend on the dimensions of the video.
Please note that dimensions of video refers to the actual video, and not the CSS dimensions of the element.
Để biết kích thước của video, bạn cần đợi siêu dữ liệu video tải. Điều này có thể được thực hiện thông qua sự kiện loadedmetadata .
var _VIDEO = document.querySelector["#video-element"],
_CANVAS = document.querySelector["#canvas-element"];
// Video metadata is loaded
_VIDEO.addEventListener['loadedmetadata', function[] {
// Set canvas dimensions same as video dimensions
_CANVAS.width = _VIDEO.videoWidth;
_CANVAS.height = _VIDEO.videoHeight;
}];
Chờ vị trí video thay đổi
Bạn có thể thay đổi vị trí phát lại hiện tại thông qua thuộc tính currentTime của thành phần video. Tuy nhiên, thay đổi khi phát lại diễn ra không đồng bộ. Bạn có thể đợi nó diễn ra thông qua sự kiện timeupdate .
// Video playback position is changed
document.querySelector["#video-element"].addEventListener['timeupdate', function[] {
// You are now ready to grab the thumbnail from the element
}];
Lấy hình ảnh từ Canvas
Sau khi bạn đã quyết định lấy hình thu nhỏ của khung hình video hiện tại, bạn có thể vẽ khung hình video hiện tại trong phần tử canvas. Sau đó, bạn có thể lưu dữ liệu cơ sở 64 của canvas dưới dạng hình ảnh
Bạn đang tìm cách thực hiện điều này với Vimeo? . http. // tường mã. com/p/fdrdmg
Giả sử bạn cần xem trước hình ảnh của video YouTube
Ví dụ: nếu đây là video của bạn. http. //www. youtube. com/watch?v=LFbhGEiFWk4, chỉ cần gõ http. //img. youtube. com/vi/LFbhGEiFWk4/0. jpg trong thanh địa chỉ của bạn và thế là xong
Các chi tiết gai góc
YouTube tự động tạo [ít nhất] ba hình thu nhỏ và một hình ảnh xem trước cho mỗi video đã tải lên và bạn có thể dễ dàng truy cập chúng sau khi biết cách
Trước hết, hãy xem URL của video mà bạn quan tâm. Tất cả đều được định dạng như thế này
//www.youtube.com/watch?v=VIDEOID
Trong đó VIDEOID là một chuỗi các chữ cái và số xác định duy nhất nó. Bạn có thể có dấu và [&] và một số đối số sau ID đó, nhưng bạn có thể bỏ qua chúng một cách an toàn
Ghi lại [hoặc sao chép] chuỗi VIDEOID đó
Để có được các hình thu nhỏ do YouTube tạo, bạn chỉ cần sử dụng địa chỉ sau
//img.youtube.com/vi/VIDEOID/#.jpg
Thay thế VIDEOID bằng chuỗi đã nói ở trên, bằng cách nhập hoặc dán chuỗi đó vào. ENTER chưa
Trước tiên, bạn cần quyết định hình thu nhỏ nào bạn muốn. Hãy thử kích thước của chúng bằng cách thay thế hàm băm [#] bằng một số, như thế này
//img.youtube.com/vi/VIDEOID/0.jpg
Sẽ cung cấp cho bạn hình ảnh xem trước lớn mặc định [480x360]. Ví dụ của chúng tôi, điều này mang lại cho chúng tôi
Tương tự
//img.youtube.com/vi/VIDEOID/1.jpg
Sẽ cung cấp cho chúng tôi hình thu nhỏ đầu tiên [120x90]
Tất nhiên
Sẽ cung cấp cho chúng tôi hình thu nhỏ thứ hai [120x90] hoặc hình thu nhỏ do người tải lên chọn cho video đó [đây là hình thu nhỏ mặc định cho YouTube]
Và cuối cùng
//img.youtube.com/vi/VIDEOID/3.jpg
Sẽ mang lại hình thu nhỏ nhỏ thứ ba [120x90]
Đưa nó đi xa hơn
Bằng cách biết logic này đằng sau hình thu nhỏ và hình ảnh xem trước của YouTube, việc viết một tập lệnh đơn giản có thể hiển thị hình ảnh cho bất kỳ video cụ thể nào trở nên khá tầm thường và sẽ được để lại, như người ta vẫn nói, như một bài tập cho người đọc
Tất nhiên, Google làm cho điều đó trở nên dễ dàng hơn bằng cách cung cấp cho chúng tôi API YouTube. http. // nhà phát triển. Google. com/youtube/2. 0/developers_guide_protocol - thứ bạn đang tìm kiếm cụ thể là thông tin về phương tiện. thẻ hình thu nhỏ.