Làm cách nào để nhúng video vào GitHub README.md?


Câu trả lời:


118

"Đánh dấu hương vị Github " không hỗ trợ loại tính năng này cho bất kỳ trang nào:

Một chủ đề hỗ trợ cũ "Nhúng video YouTube vào các tệp đánh dấu" đã nêu:

Với pages.github.io, có, mọi nơi khác, không.

(Lưu ý: chi tiết trong " Github Top-Level Dự án Trang ", github.io là lĩnh vực mới cho người sử dụng và tổ chức trang kể từ tháng Tư năm 2013.
Các trang GitHub ấn phẩm được trình bày ở đây )

Đây có thể là một yêu cầu tính năng như tô sáng cú pháp.

Ví dụ: " Video HTML5 trong markdown " (Tháng 8 năm 2010):

Có cách nào để triển khai video HTML5 vào README.markdowntệp không?

Không phải hiện tại nhưng chúng tôi có thể mở rộng những gì bạn có thể làm với READMEs trong tương lai.

Trong thời gian này, bạn có thể làm điều này với Trang GitHub và Wikis của chúng tôi.


Benjamin Oakes xác nhận trong các bình luận (tháng 5 năm 2012):

Tôi đã gửi trong một yêu cầu hỗ trợ. Câu trả lời là nhúng video không được hỗ trợ.


2
Những liên kết đó dường như bị phá vỡ; họ đưa tôi đến github.com/contact ngay bây giờ. Có ai có quyền truy cập vào một phiên bản lưu trữ? Tôi đang gặp khó khăn khi lấy nó ra khỏi Google Cache hoặc Wayback Machine.
Benjamin Oakes

1
Đối với những gì đáng giá video HTML5 trong các trang wiki dường như không còn hoạt động.
Benjamin Oakes

Tôi đã gửi trong một yêu cầu hỗ trợ. Câu trả lời là nhúng video không được hỗ trợ.
Benjamin Oakes

16
Có một vấn đề nào đó ở đâu đó mà tôi có thể nâng cao?
Sẽ

2
@hyipscript Thực tế không chắc chắn: các trích dẫn đó xuất phát từ chuỗi hỗ trợ GitHub 5 năm tuổi (tôi đã khôi phục liên kết trong câu trả lời), từ [Chris Wanstrath - defunkt] ( github.com/defunkt ), một trong những đồng người sáng lập GitHub. Tôi không có thêm chi tiết về điều đó.
VonC

252

Tôi thực sự khuyên bạn nên đặt video trong trang web dự án được tạo bằng Trang GitHub thay vì readme, như được mô tả trong câu trả lời của VonC ; nó sẽ tốt hơn rất nhiều so với bất kỳ ý tưởng nào trong số này Nhưng nếu bạn cần sửa chữa nhanh chóng như tôi cần, đây là một số gợi ý.

Sử dụng gif

Xem câu trả lời của aloisdg , kết quả thật tuyệt vời, gifs được hiển thị trên readme của github;)

Sử dụng hình ảnh trình phát video

Bạn có thể lừa người dùng nghĩ rằng video trên trang readme có hình ảnh. Nghe có vẻ như một mẹo quảng cáo, nó không hoàn hảo, nhưng nó hoạt động và thật buồn cười;).

Thí dụ:

[![Watch the video](https://i.imgur.com/vKb2F1B.png)](https://youtu.be/vt5fpE0bzSY)

Kết quả:

Xem video

Sử dụng hình ảnh xem trước của youtube

Bạn cũng có thể sử dụng hình ảnh được tạo bởi youtube cho video của mình.

Đối với các url youtube dưới dạng:

https://www.youtube.com/watch?v=<VIDEO ID>
https://youtu.be/<VIDEO URL>

Các url xem trước có dạng:

https://img.youtube.com/vi/<VIDEO ID>/maxresdefault.jpg
https://img.youtube.com/vi/<VIDEO ID>/hqdefault.jpg

Thí dụ:

[![Watch the video](https://img.youtube.com/vi/T-D1KVIuvjA/maxresdefault.jpg)](https://youtu.be/T-D1KVIuvjA)

Kết quả:

Xem video

Sử dụng asciinema

Nếu trường hợp sử dụng của bạn là một cái gì đó chạy trong một thiết bị đầu cuối, asciinema cho phép bạn ghi lại một phiên cuối và có nhúng đánh dấu đẹp.

Nhấn nút chia sẻ và sao chép đoạn mã đánh dấu.

Thí dụ:

[![asciicast](https://asciinema.org/a/113463.png)](https://asciinema.org/a/113463)

Kết quả:

asciicast


1
Ngoài ra còn có các công cụ tuyệt vời để tạo ảnh gif hoặc hoạt hình Svg từ asciicasts của bạn (ví dụ: github.com/marionebl/svg-term-cli ) ;-)
JepZ

100

Tôi kết hợp câu trả lời của Alexandre JasminGab Le Roux như thế này:

[![Demo CountPages alpha](https://share.gifyoutube.com/KzB6Gb.gif)](https://www.youtube.com/watch?v=ek1j272iAmc)

Bản giới thiệu:

Bản trình diễn CountPages alpha

Bạn có thể xem bản demo này trên github .

Tôi đã sử dụng gifyoutube ở đây, nhưng tôi khuyên bạn nên sử dụng trình chuyển đổi gif cục bộ (như ffmpeg, xem cách làm ) thay vì trực tuyến.

Để ghi lại màn hình của bạn thành gif trực tiếp, bạn có thể muốn kiểm tra ScreenToGif .


1
Tôi nghĩ rằng đây nên là câu trả lời được lựa chọn. Đây là video gần nhất với video mà bạn có thể nhận được và với hầu hết mọi người, đó video. Một video là gì? Các khung hình chuyển động theo thứ tự để cho chúng ta ảo giác nó đang phát. Một gif hoạt hình là điều tương tự ... Mặc dù OP đặc biệt yêu cầu video flash, điều này là không thể, nhưng bạn sẽ sử dụng phương pháp này để chuyển đổi video flash thành gif hoạt hình.
lội

1
thưa ngài là một người thông minh; Tôi đang sử dụng nó ở mọi nơi. Bạn có thể muốn thêm url nào để chọn tức là url trực tiếp (mặc dù tôi không thể tìm thấy url share.gifyoutube.com)
Dheeraj Bhaskar

Lưu ý rằng bây giờ trang web là gifs.com, giúp bạn tải xuống từ j.gifs.com và yêu cầu bạn phải có tài khoản gifs.com để tải xuống
Jeroen Wiert Pluimers

1
Licecap là một thay thế tốt cho screentogif cho người dùng mac!
J.beenie

26

Đối với hình ảnh động đơn giản, bạn có thể sử dụng một gif hoạt hình. Tôi đang sử dụng một trong tệp README này chẳng hạn.


1
@HarishKayarohanam "cho đến khi github mang đến tính năng này" nói chung hay họ đang làm việc trên một thứ như vậy? Nếu vậy, họ đã hoàn thành nó bây giờ? :)
Paul

2
@Paul Không, họ không làm việc này, như tôi đã học được vài tháng trước ... Hãy thoải mái giải quyết vấn đề! github.com/github/markup/issues/538
Petr Dvořák

Khi làm điều này xin vui lòng xem xét khả năng tiếp cận. Những người gặp khó khăn trong việc chú ý có thể đấu tranh để lấy văn bản nếu có một hình ảnh động chuyển động nhìn thấy bên cạnh nó.
Eneroth3

6

chỉ để mở rộng câu trả lời của @ GabLeRoux:

[<img src="https://img.youtube.com/vi/<VIDEO ID>/maxresdefault.jpg" width="50%">](https://youtu.be/<VIDEO ID>)

bằng cách này, bạn sẽ có thể điều chỉnh kích thước của hình ảnh thu nhỏ trong tệp README.md trên repo Github của bạn.


3

Đây là một bài viết cũ nhưng tôi đã tìm kiếm một câu trả lời và tôi đã tìm thấy nó: https://gifs.com . Chỉ cần tải lên video, sau đó nó tạo ra một gif chúng ta có thể dễ dàng thêm vào trong một đánh dấu github. Tôi đã thử nó, chất lượng của gif là một trong những tốt.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.