วิธีการฝังวิดีโอใน GitHub README.md

219

เป็นไปได้หรือไม่ที่จะฝังวิดีโอแฟลชลงใน README.md บน GitHub? ไม่แสดงขึ้น: https://github.com/mattdipasquale/PicSciP

118

" Github Flavoured Markdown " ไม่รองรับคุณสมบัติประเภทนี้สำหรับหน้าใด ๆ :

เธรดการสนับสนุนเก่า "ฝังวิดีโอ YouTube ในไฟล์มาร์กดาวน์" ระบุไว้:

ด้วยpages.github.ioใช่ทุกที่อื่นไม่

(หมายเหตุ: ตามรายละเอียดใน " Github ระดับบนสุดโครงการหน้า " github.ioเป็นโดเมนใหม่สำหรับผู้ใช้และองค์กรหน้าตั้งแต่เดือนเมษายน 2013 หน้า GitHub สิ่งพิมพ์นำเสนอที่นี่ )

นี่อาจเป็นคำขอคุณลักษณะเช่นการเน้นไวยากรณ์ได้

ตัวอย่างเช่น: " วิดีโอ HTML5 ใน markdown " (สิงหาคม 2010):

มีวิธีใดบ้างในการนำวิดีโอ HTML5 ไปใช้ในREADME.markdownไฟล์

ไม่ใช่ในขณะนี้ แต่เราอาจขยายสิ่งที่คุณสามารถทำได้กับ README ในอนาคต

ในระหว่างนี้คุณสามารถทำได้ด้วย GitHub Pages และ Wikis ของเรา

Benjamin Oakesยืนยันในความคิดเห็น (พฤษภาคม 2012):

ฉันส่งคำร้องขอการสนับสนุน คำตอบคือไม่รองรับการฝังวิดีโอ

— VonC
แหล่งที่มา

2

ดูเหมือนว่าลิงก์เหล่านั้นจะเสียหาย พวกเขาพาฉันไปที่github.com/contactทันที ใครบ้างที่สามารถเข้าถึงเวอร์ชันที่เก็บถาวรได้ ฉันมีปัญหาในการนำมันออกจาก Google Cache หรือ Wayback Machine

— เบนจามินเคส

1

สำหรับวิดีโอ HTML5 ที่มีมูลค่าในหน้า wiki นั้นดูเหมือนว่าจะไม่ทำงานอีกต่อไป

— Benjamin Oakes

ฉันส่งคำร้องขอการสนับสนุน คำตอบคือไม่รองรับการฝังวิดีโอ

— Benjamin Oakes

17

มีปัญหาสาธารณะที่ฉันสามารถโหวตได้ไหม

— จะ

2

@hyipscript ไม่แน่ใจ: คำพูดนั้นมาจากเธรดการสนับสนุน GitHub อายุ 5 ปี (ฉันได้คืนลิงก์ในคำตอบ) จาก [Chris Wanstrath - defunkt] ( github.com/defunkt ) หนึ่งใน ผู้ก่อตั้ง GitHub ฉันไม่มีรายละเอียดเพิ่มเติมเกี่ยวกับสิ่งนั้น

— VonC

252

ฉันขอแนะนำอย่างยิ่งให้วางวิดีโอในเว็บไซต์โครงการที่สร้างด้วยGitHub Pagesแทน readme อย่างที่อธิบายไว้ในคำตอบของ VonC ; มันจะดีกว่าความคิดเหล่านี้มาก แต่ถ้าคุณต้องการการแก้ไขอย่างรวดเร็วเหมือนที่ฉันต้องการนี่คือคำแนะนำ

ใช้ gif

ดูคำตอบของ aloisdgผลลัพธ์นั้นยอดเยี่ยมมีการแสดง gif บน readme ของ github;)

ใช้รูปภาพของเครื่องเล่นวิดีโอ

คุณสามารถหลอกให้ผู้ใช้คิดว่าวิดีโออยู่บนหน้า readme พร้อมรูปภาพ ดูเหมือนว่าเคล็ดลับโฆษณามันไม่สมบูรณ์แบบ แต่ใช้งานได้และเป็นเรื่องตลก;)

ตัวอย่าง:

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

ผลลัพธ์:

ใช้รูปภาพตัวอย่างของ youtube

คุณสามารถใช้รูปภาพที่สร้างโดย youtube สำหรับวิดีโอของคุณ

สำหรับ URL ของ YouTube ในรูปแบบของ:

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

URL ที่แสดงตัวอย่างอยู่ในรูปแบบของ:

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

ตัวอย่าง:

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

ผลลัพธ์:

ใช้ asciinema

หากกรณีการใช้งานของคุณเป็นสิ่งที่ทำงานในเทอร์มินัลasciinemaช่วยให้คุณสามารถบันทึกเซสชันเทอร์มินัลและมีการฝังมาร์คดาวน์ที่ดี

กดปุ่มแชร์และคัดลอกส่วนย่อยของมาร์คดาวน์

ตัวอย่าง:

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

ผลลัพธ์:

— GabLeRoux
แหล่งที่มา

1

นอกจากนี้ยังมีเครื่องมือเจ๋ง ๆ เพื่อสร้างภาพ gif หรือ svg เคลื่อนไหวจาก asciicasts ของคุณ (เช่นgithub.com/marionebl/svg-term-cli ) ;-)

— JepZ

100

ฉันรวมคำตอบของAlexandre JasminและGab Le Rouxดังนี้:

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

การสาธิต:

คุณสามารถดูการสาธิตนี้บนGitHub

ฉันใช้gifyoutubeที่นี่ แต่ฉันแนะนำให้ใช้ตัวแปลง gif ในพื้นที่ (เช่น ffmpeg ดูวิธี ) แทนที่จะเป็นออนไลน์

ในการบันทึกหน้าจอของคุณเพื่อ GIF โดยตรงคุณอาจต้องการตรวจสอบScreenToGif

— aloisdg กำลังย้ายไปยัง codidact.com
แหล่งที่มา

1

ฉันคิดว่านี่ควรเป็นคำตอบที่เลือก นี่คือวิดีโอที่ใกล้เคียงที่สุดเท่าที่คุณจะหาได้และสำหรับคนส่วนใหญ่แล้วมันคือวิดีโอ วิดีโอคืออะไร เฟรมยังคงเคลื่อนที่ตามลำดับเพื่อให้เราเห็นภาพลวงตาที่กำลังเล่นอยู่ ภาพเคลื่อนไหว gif นั้นเป็นสิ่งเดียวกัน ... แม้ว่า OP จะขอแฟลชวิดีโอเป็นพิเศษซึ่งเป็นไปไม่ได้ แต่คุณจะใช้วิธีนี้ในการแปลงวิดีโอแฟลชเป็น gif ที่เคลื่อนไหวได้

— ลุย

1

คุณเป็นคนฉลาด ฉันใช้สิ่งนี้ทุกที่เดี๋ยวนี้ คุณอาจต้องการเพิ่ม URL ที่จะเลือกเช่น url โดยตรง (ฉันไม่สามารถหา share.gifyoutube.com url ได้)

— Dheeraj Bhaskar

โปรดทราบว่าตอนนี้ไซต์คือ gifs.com คุณจะได้รับการดาวน์โหลดจากj.gifs.comและคุณต้องมีบัญชี gifs.com เพื่อดาวน์โหลด

— Jeroen Wiert Pluimers

1

Licecapเป็นทางเลือกที่ดีสำหรับ screentogif สำหรับผู้ใช้ mac!

— J.beenie

26

สำหรับภาพเคลื่อนไหวอย่างง่ายคุณสามารถใช้ภาพเคลื่อนไหว gif ฉันใช้หนึ่งในไฟล์ README นี้เช่น

— อเล็กซ์จัสมิน
แหล่งที่มา

1

@HarishKayarohanam "จนกระทั่ง github นำเสนอคุณลักษณะนี้" โดยทั่วไปแล้วพวกเขากำลังพูดถึงสิ่งเหล่านี้หรือไม่? ถ้าเป็นเช่นนั้นพวกเขาน่าจะเสร็จแล้วหรือยัง? :)

— เปาโล

2

@ พอลไม่พวกเขาไม่ได้ทำงานในเรื่องนี้เพราะฉันได้เรียนรู้สองสามเดือนที่ผ่านมา ... รู้สึกฟรีเพื่อชนปัญหา! github.com/github/markup/issues/538

— Petr Dvořák

เมื่อทำเช่นนี้โปรดพิจารณาความสามารถในการเข้าถึง ผู้ที่มีปัญหาด้านความสนใจสามารถต่อสู้กับข้อความได้หากมีภาพเคลื่อนไหวที่เคลื่อนไหวอยู่ข้างๆ

— Eneroth3

6

เพียงเพื่อขยาย @ GabLeRoux คำตอบของ:

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

วิธีนี้คุณจะสามารถปรับขนาดของภาพขนาดย่อในไฟล์ README.md บน Github repo ของคุณ

— B.Kocis
แหล่งที่มา

3

นี่คือการโพสต์เก่า แต่ผมกำลังมองหาคำตอบและฉันพบนี้: https://gifs.com เพียงแค่อัปโหลดวิดีโอจากนั้นจะสร้าง gif ที่เราสามารถเพิ่มได้อย่างง่ายดายใน markdown github ฉันลองมันคุณภาพของ gif นั้นดีมาก

— Proustibat
แหล่งที่มา