ใช้ HTML5 เพื่อแสดงวิดีโอในเบราว์เซอร์ปัจจุบัน

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

• โฮสติ้ง HTML5 วิดีโอของคุณเองกับการใช้ YouTube
• ภาพรวมการสนับสนุนวิดีโอบนเว็บอย่างรวดเร็ว
• สร้างและแก้ไขวิดีโอของคุณ
• แปลงวิดีโอเป็น Ogg สำหรับ Firefox
• แปลงวิดีโอเป็น MP4 สำหรับ Safari
• แปลงวิดีโอเป็น FLV สำหรับ Internet Explorer
• เพิ่มองค์ประกอบวิดีโอลงในเว็บเพจของคุณ
• เพิ่ม JavaScript และ Flash Player เพื่อให้ Internet Explorer ทำงานได้
• ทดสอบในเบราเซอร์มากเท่าที่จะทำได้

01 จาก 10

โฮสติ้ง HTML 5 ของคุณเองกับการใช้ YouTube

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

แต่การใช้ YouTube เพื่อฝังวิดีโอของคุณมีข้อบกพร่องบางอย่าง

ปัญหาส่วนใหญ่ที่เกิดขึ้นกับ YouTube อยู่ที่ด้านผู้บริโภคมากกว่าด้านนักออกแบบเช่นเรื่อง:

• การค้นหาและสร้างดัชนีช้า
• เซิร์ฟเวอร์ขัดข้อง
• เนื้อหาที่ถูกนำออก (ดูเหมือน) โดยพลการ
• เนื้อหาไม่ดีมากเกินไป

แต่มีเหตุผลบางประการที่ทำให้ YouTube ไม่ดีสำหรับนักพัฒนาเนื้อหาเช่นกัน ได้แก่ :

• ความยาวสูงสุด 10 นาทีสำหรับวิดีโอ (สำหรับบัญชีฟรี)
• ประสิทธิภาพในการอัปโหลดไม่ดี
• YouTube ได้รับสิทธิการใช้งานวิดีโอของคุณไม่ จำกัด
• ผู้ใช้ YouTube รายใดจะได้รับสิทธิการใช้งานวิดีโอของคุณไม่ จำกัด

วิดีโอ HTML5 ให้ข้อดีเหนือกว่า YouTube

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

หลักสูตรวิดีโอ HTML5 มีข้อบกพร่องบางอย่าง

ซึ่งรวมถึง:

• คุณต้องเข้ารหัสวิดีโอของคุณอย่างน้อยสามตัวแปลงสัญญาณที่แตกต่างกัน
• คุณต้องใส่ JavaScript เพื่อให้แน่ใจว่าเบราว์เซอร์ที่ไม่สนับสนุน HTML5 จะทำงาน
• เซิร์ฟเวอร์ของคุณต้องสามารถจัดการกับข้อกำหนดเกี่ยวกับแบนด์วิดท์ในการโฮสต์วิดีโอได้

อ่านต่อด้านล่าง

02 จาก 10

ภาพรวมการสนับสนุนวิดีโอบนเว็บอย่างรวดเร็ว

การเพิ่มวิดีโอลงในเว็บเพจเป็นกระบวนการที่ยากลำบาก มีหลายอย่างที่อาจผิดพลาดได้:

• ขั้นแรกคุณใช้ เพื่อฝังวิดีโอของคุณไว้ในหน้าเว็บของคุณ แต่ แท็กดังกล่าวเลิกใช้งานสำหรับแท็กอื่น และเบราว์เซอร์บางรุ่นไม่สามารถรองรับได้ดีเลยล่ะค่ะ
• ดังนั้นคุณจึงเปลี่ยนไปที่ แต่เบราว์เซอร์ที่เก่ากว่าไม่สนับสนุนและเบราว์เซอร์รุ่นใหม่มีความสามารถในการสนับสนุน
• แล้วคุณคิดว่า Flash! และเข้ารหัสวิดีโอของคุณเป็นไฟล์ FLV แต่ Flash ไม่ได้รับการสนับสนุนบนโทรศัพท์มือถือจำนวนมากและผู้คนจำนวนมากต่างเกลียด Flash ไม่ว่าจะใช้งานอย่างไร (25% ของผู้ตอบในการหยั่งเสียงถามว่าคุณรู้สึกอย่างไรเกี่ยวกับ Flash กล่าวว่า Flash ไม่สามารถใช้งาน Flash ได้ แต่อย่างใด)
• ดังนั้นคุณจึงตัดสินใจที่จะอัปโหลดวิดีโอของคุณไปยังไซต์ฝังวิดีโอเช่น YouTube แต่คุณมีปัญหากับ YouTube ที่เราพูดถึง
• สุดท้ายคุณตัดสินใจที่จะใช้งาน HTML5 แต่ Internet Explorer ไม่สนับสนุน (ยกเว้น Internet Explorer 9) แม้ว่าคุณจะมีมาตรฐาน codec วิดีโอสองตัวที่ได้รับการสนับสนุนและมีเพียงเบราว์เซอร์เดียวที่สามารถใช้งานได้ทั้งคู่ การสนับสนุนเบราว์เซอร์สำหรับตัวแปลงสัญญาณวิดีโอและคอนเทนเนอร์

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

บทความต่อไปนี้จะกล่าวถึงวิธีเพิ่มวิดีโอลงในเว็บเพจของคุณที่ทำงานใน Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 และ 4, iPhone และ Android, Flash และ Internet Explorer 7 และ 8 คุณจะ นอกจากนี้ยังมีคีย์ที่คุณต้องเพิ่มการสนับสนุนเบราว์เซอร์ที่เก่ากว่าอื่น ๆ ถ้าจำเป็น

อ่านต่อด้านล่าง

03 จาก 10

สร้างและแก้ไขวิดีโอของคุณ

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

• โครงการวิดีโอสำหรับครอบครัว
• วิดีโอการตลาดและการส่งเสริมการขาย
• ทัวร์ชมวิดีโอเสมือนจริง
• วิธีการวิดีโอ
• วิดีโองานแต่งงาน

เรียนรู้วิธีการบันทึกวิดีโอคุณภาพสูง

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

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

การแก้ไขวิดีโอของคุณ

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

บันทึกวิดีโอของคุณลงใน MOV หรือ AVI (หรือ MPG, CD, DV)

สำหรับส่วนที่เหลือของบทแนะนำนี้เราจะสมมติว่าคุณได้บันทึกวิดีโอของคุณไว้ในรูปแบบที่มีคุณภาพสูง (ไม่บีบอัด) เช่น AVI หรือ MOV แม้ว่าคุณจะสามารถใช้ไฟล์เหล่านี้ได้ แต่ก็จะทำให้คุณพบปัญหาเกี่ยวกับวิดีโอที่เรากำลังพูดถึงอยู่แล้ว หน้าต่อไปนี้จะอธิบายวิธีแปลงไฟล์ของคุณเป็นสามประเภทเพื่อให้เบราว์เซอร์สามารถดูได้มากที่สุด

04 จาก 10

แปลงวิดีโอเป็น Ogg สำหรับ Firefox

รูปแบบแรกที่เราจะแปลงเป็น Ogg (บางครั้งเรียกว่า Ogg-Theora) รูปแบบนี้เป็นรูปแบบที่ Firefox 3.5, Opera 10.5 และ Chrome 3 สามารถดูได้

อย่างไรก็ตามในขณะที่ Ogg มีการสนับสนุนจากเบราเซอร์หลายโปรแกรมวิดีโอที่รู้จักกันดีที่คุณสามารถซื้อได้ (Adobe Media Encoder, QuickTime ฯลฯ ) ไม่มีตัวเลือกการแปลง Ogg ดังนั้นวิธีเดียวที่จะแปลงวิดีโอของคุณ Ogg คือการหาโปรแกรมแปลงบนเว็บ

ตัวเลือกการแปลง

มีเครื่องมือออนไลน์ที่เรียกว่า Media-Convert ซึ่งอ้างว่าสามารถแปลงรูปแบบวิดีโอ (และเสียง) ต่างๆลงในรูปแบบวิดีโอ (และเสียง) อื่น ๆ ได้ เมื่อเราลองใช้วิดีโอทดสอบ 3 วินาทีของฉันเราไม่สามารถใช้งาน Mac ได้ แต่คุณอาจมีโชคดีกว่า เว็บไซต์นี้มีประโยชน์ในการเป็นอิสระ

เครื่องมืออื่น ๆ ที่เราพบ ได้แก่

• Miro Video Converter (Windows Macintosh) - โปรแกรมนี้มีประโยชน์ในการแปลงเป็น Ogg และ MP4 (H.264) และเป็นโอเพนซอร์ส
• Koyote Video Converter (Windows)
• Free Video Converter เราคิดว่านี่มีทั้ง Windows และ Macintosh แต่ก็ยากที่จะบอกได้จากเว็บไซต์ของพวกเขา
• Simple Theora Encoder (Macintosh) - นี่คือหนึ่งที่เรามักจะใช้

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

อ่านต่อด้านล่าง

05 จาก 10

แปลงวิดีโอเป็น MP4 สำหรับ Safari

รูปแบบต่อไปที่คุณควรแปลงวิดีโอของคุณเป็น MP4 (วิดีโอ H.264) เพื่อให้สามารถเล่นบน Safari 3 และ 4 และ iPhone และ Android นอกจากนี้วิดีโอ H.264 สามารถแปลงเป็นไฟล์ FLV เพื่อดูบน Flash ได้อย่างง่ายดาย

รูปแบบนี้พร้อมใช้งานในผลิตภัณฑ์เชิงพาณิชย์และคุณอาจมีโปรแกรมที่จะแปลงเป็น MP4 หากคุณมีโปรแกรมตัดต่อวิดีโอ หากคุณมี Adobe Premiere คุณสามารถใช้ Adobe Video Encoder หรือถ้าคุณมี QuickTime Pro ที่จะใช้งานได้เช่นกัน ตัวแปลงจำนวนมากที่เราพูดถึงในหน้าก่อนหน้านี้จะแปลงวิดีโอเป็น MP4

• MediaConvert - เครื่องมือ AWS ออนไลน์
• Miro Video Converter (Windows Macintosh) - โปรแกรมนี้มีประโยชน์ในการแปลงเป็น Ogg และ MP4 (H.264) และเป็นโอเพนซอร์ส
• SUPER (Windows) - จะแปลงไฟล์ประเภทต่างๆเป็น MP4 และ FLV
• Free Video Converter เราคิดว่านี่มีทั้ง Windows และ Macintosh แต่ก็ยากที่จะบอกได้จากเว็บไซต์ของพวกเขา

บันทึกไฟล์ MP4 ลงในเว็บไซต์ของคุณแล้วคุณจะต้องแปลงเป็นไฟล์ Flash สำหรับ Internet Explorer เพื่อใช้

06 จาก 10

แปลงวิดีโอเป็น FLV สำหรับ Internet Explorer

วิธีที่ง่ายที่สุดในการแปลงวิดีโอให้เป็น FLV คือการใช้ Flash เอง นั่นคือวิธีที่เราแปลงวิดีโอของฉันเป็น Flash แต่ถ้าคุณไม่มี Flash นี่เป็นสองเครื่องมือที่นิยมสำหรับการแปลงไฟล์เป็น FLV:

• SUPER (Windows) - จะแปลงไฟล์ประเภทต่างๆเป็น MP4 และ FLV
• ffmpegX (Macintosh) - จะแปลงไฟล์ประเภทต่างๆให้เป็น Mp4 และ FLV

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

อ่านต่อด้านล่าง

07 จาก 10

เพิ่มองค์ประกอบวิดีโอลงในเว็บเพจของคุณ

ง่ายมากที่จะใช้ HTML 5 เพื่อเพิ่มวิดีโอลงในเว็บเพจ เบราว์เซอร์รุ่นใหม่ส่วนใหญ่สนับสนุน HTML 5 วิดีโอแม้ว่าจะไม่รองรับในรูปแบบเดียวกันก็ตาม แต่สิ่งนี้หมายความว่าถ้าคุณบันทึกวิดีโอเป็นรูปแบบ Ogg และ MP4 คุณจะสามารถเขียน HTML ได้เพียงสี่ถึงห้าบรรทัดเพื่อให้แสดงในเบราว์เซอร์ที่ทันสมัยที่สุด (ยกเว้น Internet Explorer 8) นี่คือวิธี:

เขียนเครื่องหมายประเภท HTML 5 doctype เพื่อให้เบราว์เซอร์รู้ HTML 5:

1. สร้างเว็บเพจของคุณตามที่ปกติสร้างขึ้น:

2. ในร่างกายวาง
3. เลือกแอตทริบิวต์ที่คุณต้องการให้วิดีโอของคุณ: เราขอแนะนำให้ใช้การควบคุมและโหลดล่วงหน้า ใช้ตัวเลือกโปสเตอร์หากวิดีโอของคุณไม่มีฉากแรกที่ดี
   1. เล่นอัตโนมัติ - เพื่อเริ่มต้นทันทีที่ดาวน์โหลด
   2. ควบคุม - ช่วยให้ผู้อ่านของคุณสามารถควบคุมวิดีโอได้ (หยุดชั่วคราวย้อนกลับเร็ว)
   3. ลูป - เริ่มวิดีโอจากจุดเริ่มต้นเมื่อสิ้นสุด
   4. โหลดล่วงหน้า - ดาวน์โหลดวิดีโอล่วงหน้าเพื่อให้พร้อมใช้งานได้เร็วขึ้นเมื่อลูกค้าคลิกที่
   5. โปสเตอร์ - กำหนดภาพที่คุณต้องการใช้เมื่อหยุดวิดีโอ
4. จากนั้นเพิ่มไฟล์ต้นฉบับสำหรับวิดีโอทั้งสองรุ่น (MP4 และ OGG) ภายใน
5. เปิดหน้าใน Chrome 1, Firefox 3.5, Opera 10 และ / หรือ Safari 4 และตรวจดูให้แน่ใจว่าได้แสดงอย่างถูกต้อง คุณควรทดสอบอย่างน้อยใน Firefox 3.5 และ Safari 4 เนื่องจากแต่ละตัวจะใช้ตัวแปลงสัญญาณที่ต่างกัน

แค่นั้นแหละ. เมื่อคุณมีรหัสนี้แล้วคุณจะมีวิดีโอที่ทำงานได้ใน Firefox 3.5, Safari 4, Opera 10 และ Chrome 1 แต่แล้วสิ่งที่เกี่ยวกับ Internet Explorer?

ไม่ชอบ HTML 5 หรือ

ในส่วนถัดไปเราจะพูดถึงสิ่งที่คุณสามารถทำได้เพื่อให้ IE 8 สามารถเล่นวิดีโอแท็ก HTML 5 ของคุณและแสดงวิดีโอได้อย่างดี คุณต้องใช้ Flashข่าวดีก็คือ IE 9 คาดว่าจะรองรับ HTML 5 และแท็กวิดีโอ

08 จาก 10

เพิ่ม JavaScript และ Flash Player เพื่อให้ Internet Explorer ทำงานได้

คุณอาจสังเกตเห็นว่าใน HTML ของหน้าก่อนหน้านี้ไม่มีไฟล์ต้นฉบับสำหรับไฟล์ FLV และถ้าคุณทดสอบหน้าเว็บดังกล่าวใน Internet Explorer จะไม่สามารถใช้งานได้ นั่นเป็นเพราะ Internet Explorer ไม่รู้จัก HTML 5 และไม่สามารถเล่น OGG หรือวิดีโอ MP4 แบบ natively ได้ เพื่อให้ Internet Explorer 7 และ 8 ทำงานได้คุณต้องเล่นวิดีโอเป็น Flash แต่มีขั้นตอนเพิ่มเติมในการทำให้การทำงานมากกว่าการเพิ่มไฟล์ FLV

ขั้นที่ 1: รับ Flash Video Player สำหรับเว็บไซต์ของคุณ

ขอแนะนำให้ใช้ FlowPlayer เนื่องจากเป็นเครื่องเล่นวิดีโอ Flash แบบโอเพนซอร์สที่คุณสามารถติดตั้งได้บนเว็บเซิร์ฟเวอร์ของคุณและใช้เมื่อใดก็ตามที่คุณมี Flash Video เล่น รุ่นฟรีของ FlowPlayer แทรกโฆษณาลงในวิดีโอของคุณ แต่คุณยังสามารถซื้อใบอนุญาตการค้าถ้าคุณต้องการ

ทำตามคำแนะนำในเว็บไซต์ FlowPlayer เพื่อติดตั้ง FlowPlayer บนเว็บไซต์ของคุณ โดยสรุปคุณจะติดตั้งไฟล์ SWF 2 ไฟล์และไฟล์ JavaScript ในเว็บไซต์ของคุณ ที่ด้านล่างของ HTML ของคุณ (ก่อนหน้า ) คุณจะเพิ่มบรรทัด:

แต่ Internet Explorer จะไม่เล่นวิดีโอคุณต้องสอนวิธีรู้จักแท็ก HTML 5

ขั้นตอนที่ 2: โน้มน้าวให้ Internet Explorer อ่านแท็ก HTML 5

มีสคริปต์ที่มีประโยชน์ใน Google Code เรียกว่า "HTML Shiv" ซึ่งจะช่วยให้ IE รู้จักองค์ประกอบ HTML 5 ดังนั้นใน ของเอกสาร HTML ของคุณที่คุณต้องการอ้างอิง เป็นการดีที่สุดที่จะใส่ลงในข้อคิดเห็นที่มีเงื่อนไขของ IE เพื่อให้เบราว์เซอร์อื่น ๆ ไม่สับสน:

เอาล่ะตอนนี้ IE จะรับรู้

ขั้นตอนที่ 3: เพิ่มบรรทัดที่มาสำหรับไฟล์ FLV

เช่นเดียวกับที่ทำในหน้าก่อนหน้าคุณจะเพิ่มบรรทัดลงใน HTML 5 ภายใน

อ่านต่อด้านล่าง

09 จาก 10

เพิ่ม JavaScript และ Flash Player เพื่อให้ Internet Explorer ทำงานได้ - ตอนที่ 2

แต่น่าเสียดายที่เรายังไม่ได้ทำ ขณะนี้เราต้องบอกให้ IE ใช้โปรแกรมเล่นวิดีโอ Flash FlowPlayer ที่เราอ้างถึงข้างต้น

ขั้นตอนที่ 4: เปิด

สำหรับเรื่องนี้เราต้องใช้สคริปต์อีก เราได้สคริปต์จาก Dive Into HTML 5. แต่เมื่อเราทดสอบแล้วมันก็ไม่ได้ผลจนกว่าเราจะปรับตัวให้เข้ากันสองครั้ง:

• รอบบรรทัดที่ 31: เพิ่มตำแหน่งของการติดตั้ง FlowPlayer ของคุณ
• รอบบรรทัดที่ 42: เปลี่ยนประเภทไฟล์จากวิดีโอ / mp4 เป็นวิดีโอ / x-flv
• รอบบรรทัดที่ 94: เริ่มต้นด้วย if (!! $ && !! $ (document) .ready) {ที่ส่วนท้ายของเอกสารให้เปลี่ยนส่วนที่ต้องการอ่าน:

  // if (!! $ && !! $ (document) .ready) {/ * ผู้ใช้ jQuery สามารถเริ่มต้นได้ทันทีที่ DOM พร้อม * /// $ (document) .ready (html5_video_init);//} else {/ * ทุกคนสามารถรอจนกว่า onload * // * addEvent function ผ่าน http://www.ilfilosofo.com/blog/2008/04/14/addevent-preserving-this/ * /var addEvent = ฟังก์ชัน (obj, type, fn) {if (obj.addEventListener)obj.addEventListener (ประเภท fn, false);else if (obj.attachEvent)obj.attachEvent ('on' + type, function () {return fn.apply (obj, new Array (window.event));});}addEvent (หน้าต่าง "โหลด", html5_video_init);//}

เมื่อคุณแก้ไขไฟล์ JavaScript แล้วให้อัปโหลดไฟล์ไปยังเซิร์ฟเวอร์ของคุณและเชื่อมโยงไปที่ด้านล่างของหน้า HTML (ก่อนหน้าไฟล์ ):

ต๊าย! ตอนนี้คุณได้ทำสิ่งเหล่านี้เสร็จแล้วคุณควรอัปโหลด HTML เพื่อเริ่มการทดสอบ

10 จาก 10

ทดสอบในเบราเซอร์มากเท่าที่จะทำได้

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

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

เนื่องจากคุณประสบปัญหาในการเข้ารหัสวิดีโอของคุณในรูปแบบสามรูปแบบคุณควรทดสอบเพื่อตรวจสอบว่าได้แสดงในทั้งสามรูปแบบ ซึ่งหมายความว่าอย่างน้อยที่สุดคุณควรทดสอบใน:

• Firefox 3.5
• Safari 3 หรือ 4
• Internet Explorer 7 หรือ 8

คุณสามารถทดสอบได้ใน Chrome แต่เนื่องจาก Chrome จะดูทั้งสามวิธี (แม้กระทั่ง Flash หากคุณมีปลั๊กอิน) ก็ยากที่จะบอกได้ว่ามีปัญหากับหนึ่งในอีกสองตัวหรือตัวแปลงสัญญาณที่ Chrome ใช้อยู่

เพื่อความอุ่นใจคุณควรทดสอบในเบราว์เซอร์รุ่นเก่าเพื่อดูว่าตนทำอะไรโดยเฉพาะอย่างยิ่งถ้าผู้อ่านจำนวนมากของคุณใช้เบราว์เซอร์รุ่นเก่า

การใช้งานวิดีโอในเบราว์เซอร์รุ่นเก่า

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

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