Thư viện

Trải nghiệm

Chủ Nhật, tháng 3 09, 2014

Lấy ảnh của video từ Youtube làm ảnh thumbnail cho blogspot

Hướng dẫn cách để lấy ảnh thu nhỏ từ trong video của youtobe làm ảnh thumbnail cho blogspot.

Chia sẻ:
Như các bạn đã biết hiện nay có một số blog phát triển theo hướng phim ảnh, video. Đây là hình thức được nhiều người lựa chọn nhưng đi kèm với nó có một số vấn đề đặt ra là làm thế nào để có thể lấy trực tiếp ảnh thumbnail của video mà không phải tải một ảnh riêng lẻ lên làm ảnh đại diện cho video đó.
Lấy ảnh của video từ Youtube làm ảnh thumbnail cho blogspot
Hiện nay có nhiều trang lưu trữ video nổi tiếng nhưng phổ biến nhất vẫn là Youbode. Do vậy trong khuôn khổ bài viết này mình sẽ hướng dẫn các bạn cách làm thế nào để có thể trích xuất một hình ảnh từ trong video để làm ảnh thu nhỏ cho blog. Mình sẽ hướng dẫn 2 cách các bạn có thể đọc và lựa chọn cách mình muốn ở bên dưới:

» Cách 1: Lấy ảnh bằng cách để video tự động chạy

- Ưu điểm: Không mất công lấy hình ảnh thông qua id của video
- Nhược điểm: Hình ảnh mờ, không sắc nét, chỉ lấy được một hình duy nhất không thể lựa chọn hình hiển thị, chỉ thích hợp vơi những trang để ảnh thumbnail dạng thu nhỏ tầm 72x72 picel trở xuống.

Cách sử dụng: Cách này sử dụng rất dơn giản bạn chỉ cần thêm thuộc tín autoplay=1 vào trong mã nhứng của video. bạn có thể xem chi tiết cách để video tự động chạy tại bài viết mà namkna đã hướng dẫn tại đây.

» Cách 2 trích xuất hình ảnh từ video.

- Ưu điểm: Hình ảnh sắc nét, có thể thay đổi độ phân giải hoặc hình ảnh nếu bạn muốn.
- Nhược điểm: Làm thủ công, Bạn phải chèn thêm link của hình ảnh và mất thời gian trích xuất hình ảnh dựa trên Id của hình ảnh đó.

Cách tiến hanh:
- Đầu tiên bạn lấy mã nhúng của video:
Cách lấy mã nhúng từ Video Youtube

Namkna ví dụ bạn lấy được mã nhúng như sau:
<iframe width="560" height="315" src="//www.youtube.com/embed/h5Um8m7I2iY?rel=0" frameborder="0" allowfullscreen></iframe>
- Trong đoạn code trên bạn chú ý cho mình đoạn code màu đỏ h5Um8m7I2iY nằm ngay sau đoạn embed/ đó chính là đoạn mã ID của video đó. Đoạn màu đỏ này rất quan trọng vì nó sẽ giúp bạn trích xuất hình ảnh của video đó làm ảnh thu nhỏ.

- Công việc tiếp theo của bạn là thay ID màu đỏ ở trên vào link hình ảnh để bên dưới và chèn nó vào phần HTML của bài viết.
<img border="0" src="http://i2.ytimg.com/vi/h5Um8m7I2iY/0.jpg" height="0" width="0" />
- Trong đoạn code trên hãy chú ý những phần mình in đậm. Những phần này rất quan trọng, Namkna sẽ giải thích chi tiết đến các bạn sau đây:
  • h5Um8m7I2iY đây chính là Id của video. Phần này để phân biệt giữa các video (nó cũng như địa chỉ blog không thể trùng nhau) do vậy nếu bạn điền phần này sai có thể nó sẽ lấy hình ảnh thumbnail của video khác để làm ảnh đại diện đó.
  • 0.jpg Nếu bạn từng đăng tải video lên trên Youtube bạn sẽ thấy họ cung cấp cho bạn 4 hình ảnh thu nhỏ thumbnail để làm ảnh đại diện cho một video gồm 0, 1, 2 và 3. Do đó nếu muốn thay đổi hình ảnh thu nhỏ bạn chỉ cần thay thế 0.jpg thành 1.jpg, 2.jpg hoặc 3.jpg. Trong đó hình ảnh 0.jpg có độ phân giải lớn nhât (480x380px), còn 3 hình 1,2,3.jpg có độ phân giải nhỏ hơn (120.90px). bài viết tới mình sẽ hướng dẫn các bạn lấy hình ảnh chất lượng HD tư youtobe, còn bài này chỉ dừng ở đây thôi.
  • height="0" width="0" đây lần lượt là chiều rộng và chiều cao của hình ảnh. Do chỉ cần hiển thị ảnh thu nhỏ ở kiểu trang index (trang chủ, trang nhãn, trang lưu trữ và trang tìm kiếm) nên mình để chiều rộng và chiều cao bằng 0 picel. Nếu bạn muốn hình ảnh này hiển thị cả ở trang bài viết thì bạn hãy chỉnh sửa lại nó hoặc xóa hẳn nó đi để lấy ảnh kích thước gốc.
Giờ hãy quay lại trang chủ, trang nhãn hay trang lưu trữ của bạn và kiểm tra kết quả đi nha.

27 nhận xét:

  1. hay quá, cuối cùng cũng đã có bài viết, cám ơn anh Nam...:-)

    Trả lờiXóa
  2. nó vẫn không nhận ảnh anh Nam ơi, em đã áp dụng cho NHÃN NÀY
    cụ thể là bài viết NÀY

    Trả lờiXóa
  3. Trả lời
    1. Anh vào nhãn mà em cung cấp nó có ảnh thumbnail đó mà e.

      Xóa
  4. Hay quá, cảm ơn bạn. Hi trước đây cứ phải kiếm cái hình bên ngoài để làm ảnh đại diện cho bài viết, giờ thì không cần nữa rồi! ^_^

    Trả lờiXóa
  5. Chắc bài này của cộng tác viên,cách 1 nhớ thêm ? trước autoplay=1 nhưng chỉ tự động play thôi chả thấy ảnh đâu :D

    Trả lờiXóa
    Trả lời
    1. Nếu sử dụng chức năng autoread more của blogger thì nó sẽ tự lấy các ảnh trên, Còn nếu sử dụng tiện ích readmore sử dụng script thì bạn phải khai báo nó vào trong đoạn mã readmore để có thể lấy ảnh từ các sever ngoài picasa.

      cách thêm autoplay=1 thì có bài hướng dẫn riêng rồi mà :) XEM

      Xóa
    2. Nhận xét này đã bị tác giả xóa.

      Xóa
  6. Liên kết với e nha a :
    URL : nvvt.blogspot.com
    Title : Chia sẻ các thủ thuật hay, giải trí,...
    Tên hiển thị : N V V T

    Liên kết thêm một người nữa thôi nha a ^ ^

    Trả lờiXóa
  7. Cái thứ 2 nói là thủ công nhưng mình lưu vào mẫu bài đăng thì nó còn nhanh hơn cả bình thường chỉ cần copy ID vào là xong. Quá hay quá tốt. Thanks sờ Kiu :)

    Trả lờiXóa
    Trả lời
    1. Đúng thế nếu lưu sẵn đoạn mã link ảnh vào trong trình đăng bài thì chỉ cần copy link ID là oke.

      Xóa
  8. namkna ơi giúp mình với . Mình tích hợp comment băng google+ Nhưng có kẻ cứ đến spam link của họ vào đó . Mình phải làm như nào mới xóa đc những comment spam đó

    Trả lờiXóa
  9. Bài viết này hay! Cho copy qua Blog của mình nhé! http://trantuliem.blogspot.com/ . Và nếu có thể thì cho mình liên kết Blog với, mình đã liên kết blog của bạn!

    Trả lờiXóa
  10. Cô rất ngưỡng mộ trình độ tin học của cháu.Chúc cháu luôn thành công và hạnh phúc

    Trả lờiXóa
  11. Ôi cái thumb của dạng này không hiện thị trên Popularpost :(

    Trả lờiXóa
  12. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  13. hihi, cam on anh nhieu, em lam dc rui

    Trả lờiXóa
  14. Cảm ơn bạn nhe , mình thử đc rồi http://www.cauchuyencuocsong.info/ :d

    Trả lờiXóa
  15. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  16. Xem giúp vũ với nhá : Nó vẫn ko hiện

    http://www.gamevl.info/search/label/clip%20hot

    Trả lờiXóa
  17. anh Nam ơi, có cách nào hiển thị được cả thời gian không? vì cái này chỉ hiện được mỗi hình ảnh.
    Thank anh Nam.

    Trả lờiXóa
  18. Liên kết với e nha a :
    URL : www.2runs.blogspot.com
    Title : 2Runs Blogs
    Tên hiển thị : 2runs blog

    Trả lờiXóa
  19. cách đơn giản để lấy thumbnail video youtube => Lấy thumbnail video youtube

    Trả lờiXóa
  20. Bạn ơi xem giúp mình với. Trang của mình đã làm đúng như bạn hướng dẫn mà không được. Trang của mình là http://cuoixuyenviet.vn mình dùng theme Video Lab. Mình dùng theme khác thì hiện ảnh còn theme mình đang dùng lại không hiện. Bạn giúp mình nhé. Cũng có rất nhiều bạn bị giống mình hay bạn viết thêm bài nữa đi.hi

    Trả lờiXóa