วิดีโอ HTML5 10 สิ่งที่นักออกแบบจำเป็นต้องรู้

การปฏิวัติ HTML5 เป็นนักออกแบบเว็บไซต์ที่น่าตื่นเต้นจากทั่วทุกมุมโลก ข้อมูลจำเพาะใหม่รองรับองค์ประกอบและคุณลักษณะมากมายสำหรับการสร้างเว็บไซต์เชิงความหมาย คุณสมบัติใหม่เหล่านี้รวมถึงแท็กมัลติมีเดียสำหรับรูปแบบเสียงและวิดีโอ.

ในปีที่ผ่านมาเครื่องเล่นสื่อที่ใช้ Flash มีมากพอสำหรับการสตรีมบนเว็บและเทคโนโลยีนี้ยังจำเป็นต่อการรองรับเบราว์เซอร์รุ่นเก่า แต่ต้องขอบคุณมาตรฐานที่ทันสมัยมีขั้นสูงและการรวมวิดีโอ HTML5 เปิดประตูสำหรับโอกาสใหม่นับสิบ.

ในคู่มือนี้ฉันต้องการนำเสนอวิดีโอ HTML5 เบื้องต้นสำหรับเว็บ จะต้องฝึกฝนเพื่อทำความเข้าใจกับผู้เล่นในเบราว์เซอร์และฟังก์ชั่นทั้งหมดของมัน และวิธีที่ดีที่สุดในการทำความคุ้นเคยคือการดำน้ำในหัวก่อน!

1. ประเภทของสื่อ

เมื่อคุณทำงานกับเครื่องเล่นวิดีโอแฟลชมันเป็นเรื่องธรรมดาเกินไปที่จะเชื่อมโยงทุกรูปแบบวิดีโอใน. flv ในขณะที่ใช้งานได้ไฟล์ flv ส่วนใหญ่ไม่สามารถรักษาคุณภาพได้ทุกที่ใกล้กับฟอร์แมต / codecs ขั้นสูง มี 3 ประเภทวิดีโอที่สำคัญซึ่งรองรับโดย HTML5: MP4, WebM และ Ogg / Ogv ประเภทไฟล์ MPEG-4 นั้นถูกเข้ารหัสโดยทั่วไปใน H.264 ซึ่งอนุญาตให้เล่นในเครื่องเล่น Flash บุคคลที่สามได้ ซึ่งหมายความว่าคุณไม่จำเป็นต้องเก็บสำเนาวิดีโอ. flv ไว้เพื่อรองรับวิธีสำรอง! WebM และ Ogg เป็นไฟล์ประเภทใหม่กว่าสองประเภทที่เกี่ยวข้องกับวิดีโอ HTML5 Ogg ใช้การเข้ารหัส Theora ซึ่งเป็นไปตามรูปแบบไฟล์เสียงมาตรฐานโอเพ่นซอร์ส สามารถบันทึกได้ด้วยนามสกุล. ogg หรือ. ogv.

WebM เป็นโครงการที่วางจำหน่ายโดย Google ซึ่งคุณสามารถอ่านเพิ่มเติมเกี่ยวกับเว็บไซต์ WebM Project รูปแบบนี้รองรับโดย Opera, Google Chrome, Firefox 4+ และ Internet Explorer 9 ล่าสุดโดยผู้เชี่ยวชาญด้านเว็บส่วนใหญ่ยังไม่เป็นที่รู้จัก แต่ WebM เป็นรูปแบบสื่อวิดีโอชั้นนำในอนาคตของเว็บวิดีโอ.

2. การสนับสนุนเบราว์เซอร์

ดังนั้นไฟล์ประเภทใดที่คุณต้องการสำหรับเว็บไซต์ของคุณ ความนึกคิดที่ดีทั้ง 3 จะยอดเยี่ยมเพราะพวกเขาให้การสนับสนุนเต็มสเปกตรัม แต่นี่ไม่ใช่ความจริงและที่จริงแล้วคุณสามารถครอบคลุมฐานทั้งหมดได้ด้วยสองฐานเท่านั้น นี่คือรายละเอียดของสิ่งที่เหมาะกับแต่ละเบราว์เซอร์:

• Mozilla Firefox - WebM, Ogg
• Google Chrome - WebM, Ogg
• Opera - WebM, Ogg
• Safari - MP4
• Internet Explorer 9 - MP4
• Internet Explorer 6-8 - ไม่มี HTML5, Flash เท่านั้น!

หากคุณจำได้ว่าก่อนหน้านี้ฉันพูดถึงว่าเครื่องเล่นวิดีโอแฟลชส่วนใหญ่จะรองรับไฟล์ MP4 ตราบใดที่เข้ารหัสใน H.264 ดังนั้นเบราว์เซอร์แต่ละตัวจะฝัง MP4 + Flash เป็นทางเลือกสุดท้าย ซึ่งหมายความว่าคุณจะต้องสร้าง สอง รูปแบบวิดีโอต่าง ๆ เพื่อรองรับเบราว์เซอร์ทั้งหมด MP4 สำหรับ Safari / IE9 และตัวเลือกระหว่าง WebM หรือ Ogg สำหรับส่วนที่เหลือ.

ในความคิดของฉันฉันขอแนะนำให้ติดกับรูปแบบ WebM มีชื่อใหญ่อยู่เบื้องหลังโครงการ (คือ Google) และได้รับความนิยมอย่างมากในชุมชน HTML5 Ogg / Ogv จะได้รับการสนับสนุน แต่ส่วนใหญ่จะสูญเสียความนิยมในไฟล์ขนาดเล็กของ WebM คุณสามารถอ่านบทความที่เกี่ยวข้องกับอนาคตของวิดีโอบนเว็บที่เขียนโดย Sean Golliher.

3. การฝังวิดีโอ HTML5 อย่างง่าย

ตอนนี้เรามาดูไวยากรณ์ที่จำเป็นสำหรับการฝังโค้ดตัวอย่าง สิ่งที่เราต้องการคือแท็กวิดีโอ HTML5 เพื่ออ้างอิง URL ภาพยนตร์แต่ละเรื่อง.

ขอให้สังเกต การควบคุม และ เล่นอัตโนมัติ ไม่จำเป็นต้องตั้งค่าแอตทริบิวต์ด้วยค่าใด ๆ ฉันยังรวม โปสเตอร์ คุณลักษณะที่โหลดภาพไว้เหนือโปรแกรมเล่นวิดีโอก่อนสตรีม นี่เป็นภาพตัวอย่างทั่วไปที่มีผู้เล่นเว็บหลายคน.

เรานำเสนอทั้งรูปแบบ MP4 และ WebM ภายในองค์ประกอบวิดีโอ หากไม่สามารถโหลดสิ่งเหล่านี้ได้เราจะแสดงข้อผิดพลาดให้ผู้ใช้อัปเดตเบราว์เซอร์.

4. เสนอแฟลชสำรอง

ตัวอย่างด้านบนเหมาะสำหรับเว็บเบราว์เซอร์ที่ได้มาตรฐาน แต่เรายังต้องพิจารณาด้วยว่าโลกนี้ไม่ได้อยู่ในเทคโนโลยีที่ทันสมัยเสมอไป เราจำเป็นต้องสนับสนุนผู้ใช้ใน Safari, Mozilla Firefox รุ่นเก่าและโดยเฉพาะ Internet Explorer.

วิธีที่ดีที่สุดในการบรรลุเป้าหมายนี้คือการใช้ Flash fallback player สามารถเพิ่มได้โดยใช้ ฝัง หรือ วัตถุ แท็กเพื่ออ้างอิงไฟล์. swf ของบุคคลที่สาม JW Player และ Flowplayer เป็นโซลูชั่นโอเพ่นซอร์สฟรีสองตัวที่คุณสามารถพิจารณาได้ แต่ยังตรวจสอบเครื่องเล่นวิดีโอพรีเมี่ยมใน ActiveDen ซึ่งสามารถไปที่ถูกเป็น $ 15 - $ 20.

ตอนนี้เรามาปรับแต่งโค้ดด้านบนเพื่อรวม Flash Player สำรองเพื่อรองรับเกือบทุกเบราว์เซอร์ที่มีอยู่.

5. การสนับสนุนอุปกรณ์มือถือ

หัวข้อนี้ยังคงถกเถียงกันอย่างมากเนื่องจากอุตสาหกรรมมือถือยังเด็ก Apple ออกมาพร้อมรองรับ MP4 บนอุปกรณ์ Mac และ iOS ซึ่งหมายความว่าคุณสามารถสตรีมไฟล์วิดีโอ. mp4 แบบดั้งเดิมบน iPad, iPhone หรือ iPod Touch ของคุณใน UI วิดีโอมาตรฐาน ซึ่งครอบคลุมส่วนแบ่งการตลาดจำนวนมาก.

เมื่อเร็ว ๆ นี้อุปกรณ์ Android กำลังประสบปัญหาในการรับการสนับสนุนในระดับเดียวกันนี้ อย่างไรก็ตามในที่สุด Google ก็ใช้. mp4 เว็บสตรีมมิ่งซึ่งตอนนี้ใช้กับผู้ใช้มือถือเกือบทั้งหมด และเนื่องจาก Flash ไม่ใช่ตัวเลือกที่นี่ MP4 เป็นทางเลือกที่ดีที่สุด นี่คือเหตุผลที่คุณต้องการฝังรหัส. mp4 ก่อนเพื่อให้อุปกรณ์ iOS สามารถจดจำไฟล์ได้ทันที.

6. ตัวแทนผู้ใช้ Safari

หนึ่งข้อบกพร่องที่ต้องกล่าวถึงคือหนึ่งที่มีอยู่ระหว่างผู้เล่น Flash และสตรีมมิ่ง HTML5 .mp4 ดั้งเดิมบน Safari เนื่องจากเบราว์เซอร์สามารถรองรับไฟล์ทั้งสองได้คุณอาจมีปัญหาในการรับสตรีมวิดีโอ HTML5 แทน Flash อย่างไรก็ตามต้องขอบคุณโพสต์บล็อกที่ยอดเยี่ยมบน TUAW มันเป็นเรื่องง่ายที่จะเปลี่ยนตัวแทนผู้ใช้ที่กำลังสืบค้นของคุณ.

การทำเช่นนี้จะบังคับให้หน้าเว็บของคุณจดจำเบราว์เซอร์ว่าทำงานบนอุปกรณ์อื่น เป็นไปได้มากว่าคุณจะเลือก iPad ซึ่งไม่รองรับการเล่น Flash ใด ๆ นี่เป็นปัญหาสำคัญที่คุณอาจพบเมื่อทดสอบวิธีเนทีฟ MP4 และการเล่นแฟลช.

7. จัดการการควบคุมผู้เล่น

เชื่อหรือไม่ว่ายังมีวิธีการที่คุณสามารถใช้เพื่อควบคุมการควบคุมเครื่องเล่นวิดีโอ HTML5 มันสามารถทำได้ใน JavaScript โดยดึงจากชุดวิธีการเปิด มีวิธีมากเกินไปที่จะแสดงรายการที่นี่ แต่พยายามอ่านผ่านเอกสารองค์ประกอบสื่อ W3C เพื่อดูรายละเอียดเพิ่มเติม.

เพื่อให้แนวคิดทั่วไปบล็อก Opera dev ได้โพสต์บทเรียนสั้น ๆ ซึ่งเหมาะสำหรับมือใหม่ แม้ว่าคุณจะไม่เคยเลือกใช้ JavaScript หรือ jQuery มาก่อนก็ยังง่ายที่จะทำให้การใช้งานส่วนนี้เป็นเรื่องง่าย คุณสามารถโทรหาคุณสมบัติเฉพาะของสื่อวิดีโอเช่น ไม่ออกเสียง หรือ currentTime. จากนั้นคุณสามารถดำเนินการ (หรี่แสงพื้นหลัง, โฆษณาแบบรูปภาพ) ตามเกณฑ์เหล่านี้โดยจัดการ DOM ใน jQuery.

นักพัฒนาเดียวกันในบทความ Opera ให้การสาธิตการทำงานของโปรแกรมเล่นวิดีโอสคริปต์ โอกาสในการปรับแต่งการควบคุม UI ของคุณเองนั้นโดดเด่น มันเพิ่งจะแสดงให้เห็นว่าวิดีโอ HTML5 มีประสิทธิภาพมากขึ้นเพียงใด.

8. การแปลงรูปแบบวิดีโอ

นี่เป็นอีกประเด็นใหญ่ที่จะสร้างความสับสนให้กับผู้ที่มีความชำนาญด้านเทคโนโลยีน้อยลง คุณเพียงแค่ต้องการทำให้เว็บไซต์ของคุณเป็นแบบสตรีมมิ่งและตอนนี้คุณต้องจัดการกับการแปลงวิดีโอหรือไม่ จริง ๆ แล้วมันไม่ใช่เรื่องยากเลย.

ในการจัดการกับ MP4 ซึ่งเป็นสิ่งที่สำคัญที่สุดของคุณคุณสามารถใช้ HandBrake ซึ่งเป็นโซลูชันโอเพ่นซอร์สฟรีที่ทำงานบนระบบปฏิบัติการหลักทั้ง 3 ระบบ มันจะรองรับ H.264 พร้อมกับตัวแปลงสัญญาณอื่น ๆ ซึ่งทำให้ตัวเลือกที่ดีที่สุดสำหรับผู้ใช้ freebie หากคุณมีเงินพอที่จะใช้งานได้ฉันต้องแนะนำตัวแปลง Xilisoft ซึ่งอยู่ใน Mac App Store ในราคาเพียง 40 ดอลลาร์เท่านั้น.

ดูเหมือนว่าเส้นทาง WebM ทำให้ชีวิตง่ายขึ้นมาก Miro Video Converter เป็นเครื่องมือฟรีสำหรับ Windows และ OS X ซึ่งสร้างไฟล์ WebM คุณภาพเยี่ยม นอกจากนี้ยังสามารถทำการเข้ารหัส Ogg Theora ซึ่งออกมาด้วยคุณภาพที่ยอดเยี่ยมเช่นกัน.

9. การสร้าง Web Player

รูปแบบวิดีโอที่มีข้อกำหนด HTML5 ยังใหม่สำหรับนักพัฒนา มีโพรโทคอลเปิดรอที่จะเล่นเพื่ออนุญาตให้มีการควบคุมแบบกำหนดเอง, ตัวเลื่อน, ไอคอนเล่น / หยุดชั่วคราว ฯลฯ หากคุณรู้สึกกล้าลองดูบทแนะนำนี้เกี่ยวกับวิธีสร้างเครื่องเล่น HTML5 ของคุณเอง (เผยแพร่ใน Splashnology).

รหัสนี้ค่อนข้างรุนแรงสำหรับผู้มาใหม่เนื่องจากต้องการการกำหนดเป้าหมาย CSS ขั้นสูงและ jQuery อย่างเป็นทางการ มีเฟรมเวิร์กอื่น ๆ ที่คุณสามารถสร้างได้ซึ่งมีการออกแบบเครื่องเล่นที่กำหนดเองอยู่แล้ว ในทำนองเดียวกันงานนำเสนอสไลด์โชว์นี้เป็นการแนะนำที่ดีในการสร้างเครื่องเล่นวิดีโอ HTML5.

สร้างเครื่องเล่นวิดีโอ HTML5

10. ห้องสมุด VideoJS

VideoJS น่าจะเป็นทางออกที่ฉันชอบสำหรับเครื่องเล่นวิดีโอ HTML5 สิ่งที่คุณต้องมีก็คือ JavaScript และ CSS สไตล์ชีตที่โฮสต์ด้วยตนเองซึ่งรวมอยู่ในเอกสารของคุณ จากนั้นคุณเขียนรหัสวิดีโอ HTML5 มาตรฐานพร้อมคลาสเพิ่มเติมสำหรับการสร้างสกิน ฉันเพิ่มรหัสตัวอย่างด้านล่าง:

หากคุณใช้งานบล็อก WordPress คุณสามารถลองใช้ปลั๊กอิน WP แบบกำหนดเองได้ มันจะรวมไลบรารี js / css บนหน้าเว็บที่คุณแสดงวิดีโอ HTML5 โดยอัตโนมัติ และคุณสามารถทำได้จากภายในเครื่องมือแก้ไขบทความหรือหน้าโดยใช้รหัสย่อ (ดูที่นี่).

ข้อสรุป

ฉันหวังว่าคู่มือแนะนำนี้สามารถกระตุ้นความสนใจของคุณในอนาคตของวิดีโอบนเว็บ เมื่อผู้ใช้หันมาใช้มือถือมากขึ้นเป็นสิ่งสำคัญที่จะต้องใช้มาตรฐาน HTML5 สำหรับสื่อประเภทนี้ ควรทำให้เว็บง่ายขึ้นเพื่อให้ผู้พัฒนาสามารถผลิตโซลูชั่นที่สนับสนุนอย่างรวดเร็วยิ่งขึ้น เรายินดีที่จะรับฟังแนวคิดและข้อเสนอแนะของคุณสำหรับอนาคตของวิดีโอ HTML5 หากคุณต้องการแบ่งปันโปรดแสดงความคิดเห็นในส่วนการโพสต์การสนทนาด้านล่าง.