Làm cách nào để có được hình thu nhỏ của video YouTube trong JavaScript?

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

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

Để 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

http://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

http://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

http://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ự

http://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

http://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ỏ.

Làm cách nào để hiển thị hình thu nhỏ của video trong JavaScript?

Làm cách nào để lấy hình thu nhỏ từ URL video trong HTML?

Tôi có thể tải xuống hình thu nhỏ của video YouTube không?

YouTube có tự động tạo hình thu nhỏ không?