ในบล็อกแรกของเขาสำหรับ พีซี Pro , นักพัฒนาเว็บ เอียนเดฟลิน เผยวิธีการฝังวิดีโอลงในเว็บไซต์ของคุณด้วย HTML5
วิธีการกำหนดบทบาทโดยอัตโนมัติในความไม่ลงรอยกัน
คุณลักษณะที่ใหญ่ที่สุดและเป็นที่พูดถึงมากที่สุดของ HTML5 คือวิดีโอแบบฝัง ปัจจุบันวิธีเดียวในการเพิ่มเนื้อหาวิดีโอลงในเว็บไซต์ของคุณคือใช้ปลั๊กอินของบุคคลที่สามเช่น Flash, QuickTime หรือ RealPlayer ด้วยการเริ่มต้นของ HTML5 และองค์ประกอบวิดีโอสิ่งนี้จะเปลี่ยนไปทั้งหมดด้วยการรองรับวิดีโอที่จัดการโดยเว็บเบราว์เซอร์ทำให้ไม่ต้องใช้การสนับสนุนจากบุคคลที่สาม
เว็บเบราว์เซอร์หลายตัวรองรับ HTML5 แล้ว ต่อไปนี้เราจะเปิดเผยวิธีฝังวิดีโอที่ไม่มีปลั๊กอินลงในไซต์ของคุณและปัญหาที่คุณจะต้องเผชิญ
ประเภทไฟล์และความเข้ากันได้ของเบราว์เซอร์
ในการเริ่มต้นเราจะมาดูประเภทไฟล์วิดีโอต่างๆที่รองรับใน HTML5 โดยสังเขป เหล่านี้คือ Theora OGG และ H.264 (.mp4) เบราว์เซอร์ที่แตกต่างกันรองรับประเภทต่างๆและบางประเภทก็ไม่รองรับเลย ตารางต่อไปนี้ระบุสิ่งนี้:
| Theora OGG | H.264 (mp4) | |
|---|---|---|
| Firefox 3.5+ | ✓ | x |
| Chrome 3+ | ✓ | ✓ |
| Safari 3+ | x | ✓ |
| Opera 10.5+ | ✓ | x |
| Internet Explorer 8 | x | x |
| Internet Explorer 9 | x | ✓ |
| iPhone | x | ✓ |
| Android | x | ✓ |
ตัวแปลงสัญญาณและปัญหาทางเทคนิคอื่น ๆ
HTML5 เองไม่ได้ระบุตัวแปลงสัญญาณวิดีโอที่จะใช้และสิ่งนี้นำไปสู่การโต้แย้งว่าเป็นอย่างไร ที่ดีที่สุดที่จะใช้สำหรับเว็บ . ดังนั้นเพื่อให้ครอบคลุมทุกเบราว์เซอร์เราต้องรองรับทั้งตัวแปลงสัญญาณ
และแน่นอนว่ามี Internet Explorer ในขณะนี้ไม่มี Internet Explorer เวอร์ชันใดที่เปิดตัวรองรับองค์ประกอบวิดีโอและยังต้องใช้ปลั๊กอินเพื่อเล่นวิดีโอ สิ่งนี้จะเปลี่ยนไปตามการเปิดตัวของ Internet Explorer 9 (น่าจะต้นปีหน้า) เมื่อรองรับ H.264 พร้อมกับสารพัด HTML5 อื่น ๆ อีกมากมาย
ในกรณีที่คุณสงสัยว่าคุณสามารถแปลงไฟล์วิดีโอของคุณเป็น OGG ได้อย่างไร (คุณสามารถอ่านเพิ่มเติมเกี่ยวกับประเภท Theora OGG ได้ที่ TheoraCookbook ) โดยใช้ไฟล์ Miro Video Converter .
สำหรับข้อมูลเชิงลึกเพิ่มเติมเกี่ยวกับองค์ประกอบวิดีโอและตัวแปลงสัญญาณให้ไปที่ไฟล์ เจาะลึก html5: วิดีโอบนเว็บ โดย Mark Pilgrim
รหัส HTML5
ตอนนี้เราย้ายไปที่โค้ด HTML5 จริงและเราจะทำให้สิ่งนั้นทำงานได้อย่างไร HTML5 มีองค์ประกอบใหม่สองอย่างที่เราสามารถใช้เพื่อเพิ่มวิดีโอลงในหน้าเว็บของเรา: ซึ่งเราได้กล่าวไปแล้วและ ธาตุ. ลองมาดูแต่ละสิ่งเหล่านี้ในทางกลับกัน
องค์ประกอบ
องค์ประกอบวิดีโอสามารถมีแอตทริบิวต์ดังต่อไปนี้:
| แอตทริบิวต์ | คำอธิบาย |
|---|---|
| src | URL ที่ถูกต้องไปยังไฟล์วิดีโอ |
| เล่นอัตโนมัติ | บูลีนระบุว่าควรเล่นวิดีโอโดยอัตโนมัติหรือไม่ |
| การควบคุม | บูลีนที่ระบุว่าเบราว์เซอร์ควรแสดงการควบคุมสื่อเริ่มต้น |
| วน | บูลีนระบุว่าควรเล่นวิดีโอซ้ำหรือไม่ |
| โหลดล่วงหน้า | ระบุให้เบราว์เซอร์ทราบว่าจำเป็นต้องมีการดาวน์โหลดวิดีโอล่วงหน้าหรือไม่หรือถ้าจำเป็นต้องใช้ข้อมูลเมตาเพียงอย่างเดียว ค่าที่เป็นไปได้คือ:
|
| โปสเตอร์ | URL ไปยังไฟล์ภาพที่จะแสดงเมื่อไม่มีข้อมูลวิดีโอ |
| ความกว้าง | ความกว้างของวิดีโอเป็นพิกเซล CSS |
| ความสูง | ความสูงของวิดีโอเป็นพิกเซล CSS |
จากสิ่งนี้จะเห็นได้ว่าการฝังวิดีโอ OGG ลงในเว็บไซต์ของคุณนั้นง่ายเพียงใดโดยใช้องค์ประกอบวิดีโอเพียงอย่างเดียว:
นั่นคือทั้งหมดที่มี
เบราว์เซอร์ใด ๆ ที่รองรับรูปแบบ Theora OGG ควรแสดงและเล่นวิดีโอของคุณได้สำเร็จโดยไม่ต้องกังวลใจอีกต่อไป แน่นอนว่ามันไม่ง่ายอย่างนั้นเพราะอย่างที่เราเห็นจากตารางด้านบนโค้ดจะใช้ได้เฉพาะใน Firefox, Chrome และ Opera ดังนั้นเราจึงต้องมีทางเลือกสำรองเป็น H.264 ด้วย ซึ่งสามารถทำได้โดยใช้ องค์ประกอบซึ่งช่วยให้เราสามารถกำหนดแหล่งที่มาของสื่อหลายแหล่งสำหรับองค์ประกอบวิดีโอ
วิธีเปลี่ยนบัญชี roku บนทีวี
องค์ประกอบ
องค์ประกอบต้นทางมีคุณลักษณะดังต่อไปนี้:
| แอตทริบิวต์ | คำอธิบาย |
|---|---|
| src | URL ที่ถูกต้องไปยังไฟล์สื่อ (ในกรณีนี้คือวิดีโอ) |
| ชนิด | ประเภทของไฟล์สื่อที่ต้องเป็นไฟล์ ประเภท MIME , เช่น. type='video/ogg' แสดงว่าเป็นวิดีโอ Theora OGG และคุณยังสามารถใส่ตัวแปลงสัญญาณ MIME เพื่อช่วยเบราว์เซอร์ในการตัดสินใจว่าจะเล่นวิดีโออย่างไรโดยใช้ type='video/ogg; codecs='theora, vorbis' |
| ครึ่ง | ระบุประเภทสื่อที่ต้องการของทรัพยากรสื่อและต้องถูกต้อง แบบสอบถามสื่อ , เช่น. media='handheld' แสดงว่าวิดีโอเหมาะสำหรับอุปกรณ์พกพาหรือ media='all and (min-device-height:720px)' ซึ่งบ่งชี้ว่าวิดีโอเหมาะสมสำหรับหน้าจอ 720 พิกเซลขึ้นไป |
หมายเหตุ: องค์ประกอบต้นทางเป็นโมฆะและมีแท็กเริ่มต้น แต่ไม่มีแท็กปิด
สิ่งที่มีประโยชน์ที่สุดเกี่ยวกับองค์ประกอบต้นทางคือเราสามารถใช้มันเพื่อซ้อนไฟล์ประเภทต่างๆทำให้เบราว์เซอร์ลองแต่ละครั้งจนกว่าจะพบว่ามันสามารถเล่นได้
การใช้และร่วมกัน
ในการจัดเรียงวิดีโอในประเภทต่างๆภายในองค์ประกอบวิดีโอให้ป้อนรหัสดังนี้:
Your browser does not support the video element.
ตอนนี้โค้ดด้านบนจะใช้งานได้ในทุกเบราว์เซอร์ยกเว้น Internet Explorer ซึ่งจะแสดงข้อความที่ระบุไว้ด้านบน
คุณสามารถทดสอบได้ด้วยตัวเองโดยดูหน้าวิดีโอทดสอบ HTML5 ซึ่งมีวิดีโอตัวอย่างของผีเสื้อทั้งในรูปแบบ Theora OGG และ MP4 ดังนั้นหากคุณกำลังดูสิ่งนี้ใน Firefox, Chrome, Safari, Opera หรือบน iPhone หรือ โทรศัพท์มือถือ Android คุณควรจะสามารถดูได้
ตอนนี้คุณจะสังเกตเห็นมีดที่คมชัดว่าเราสามารถใช้ประโยชน์จากการซ้อนนี้และมีทางเลือกอื่นเป็น Flash (หรือปลั๊กอินอื่น ๆ ) ที่ด้านล่างแทนที่จะแสดงข้อความขอโทษที่คุณไม่เห็นข้อความวิดีโอนี้โดยใช้รหัสต่อไปนี้ :
data='flvplayer.swf?file=myVideo.flv&autoStart=true'>
'
สรุป
เช่นเดียวกับองค์ประกอบ HTML5 ส่วนใหญ่การสนับสนุนเบราว์เซอร์สำหรับองค์ประกอบแหล่งที่มาและวิดีโอในขณะนี้ยังไม่สมบูรณ์ นอกจากนี้ยังมีการถกเถียงกันอย่างมากในขณะนี้ว่าองค์ประกอบแหล่งที่มาจะฆ่าการใช้ Flash หรือไม่ซึ่งเป็นวิธีการที่นิยมมากที่สุดในการเพิ่มเนื้อหาวิดีโอลงในเว็บไซต์ ฉันไม่แน่ใจว่ามันจะฆ่า Flash ได้อย่างสมบูรณ์ แต่อย่างไรก็ตามฉันคิดว่ามันยุติธรรมแล้วที่จะบอกว่ามันอยู่ที่นี่และจะช่วยให้นักพัฒนาเว็บมีวิธีการฝังวิดีโอที่สะอาดและง่ายขึ้น
