Làm sao để up ảnh .gif và chạy ảnh gif trên web

Thì cứ up ảnh gif lên host rồi chèn vào như hình ảnh bình thường thôi bạn. Đâu có gì đặc biệt đâu. Đến IE6 còn hỗ trợ

1. Chuyển gif sang video: https://github.com/hughsk/gif-video
2. Chạy video như facebook: https://github.com/MGNexus/gifplayer

Chuyển gif sang video rồi, thì phải đầu tư máy chủ để chứa. Mình sẽ hướng dẫn cách nhẹ nhàng hơn, với Giphy và Imgur.

Imgur

Hướng dẫn

Bước 1: Upload ảnh gif lên Imgur

Bước 2: Lấy ID ảnh trên Imgur, ví dụ link thế này:

http://imgur.com/fNxKlX1

… thì ID là fNxKlX1

Bước 3: Thêm jQuery plugin Gifplayer vào Website.

Bước 4: Sử dụng code sau:

<img id="imgur" src="https://i.imgur.com/{ID}h.jpg">
<script>
$('#imgur').gifplayer({
  mode: 'video',
  webm: '//i.imgur.com/{ID}.webm',
  mp4: '//i.imgur.com/{ID}.mp4'
});
</script>

Chú ý chữ h trong link ảnh ở code trên nhé, không phải mình ghi thừa đâu, không có nó là ra link video đấy, dù là đuôi .jpg

Ví dụ:

<img id="imgur" src="https://i.imgur.com/fNxKlX1h.jpg">
<script>
$('#imgur').gifplayer({
  mode: 'video',
  webm: '//i.imgur.com/fNxKlX1.webm',
  mp4: '//i.imgur.com/fNxKlX1.mp4'
});
</script>

Demo

https://jsfiddle.net/baivong/aj9tbznt/

Tạm thời thì mình chỉ tìm thấy Giphy và Imgur đạt yêu cầu của Gifplayer: 1 ảnh nền, 1 video webm, và 1 video mp4. Nếu bạn dùng máy chủ riêng hoặc, tìm thấy dịch vụ tạo ảnh gif nào khác, thì cũng cứ như trên làm là xong.

@ltd @dqh @Le_Dinh_Huy nếu có súng bắn like thì sẵn sàng bắn cho câu trả lời này

Câu trả lời quá xuất sắc và chi tiết

ok thank bạn nhiều…

Một sai lầm khủng khiếp khi code chạy và được nhiều like.

Trong hướng dẫn tối qua, code thật sự chỉ chạy được gif mode, còn video mode thì plugin Gifplayer bị lỗi khi dùng nguồn bên ngoài. Khắc phục lỗi đó đã có bản fork của MGNexus (đã thay link trong hướng dẫn).
Trong thiết kế của plugin này thì ở video mode, bắt buộc phải có file webm. Giphy không đáp ứng điều này nên bị loại ra.
Dù sao đây cũng phải bản beta, còn phát triển.

quá nhanh và nguy hiểm