ตอนที่7

 HTML มัลติมีเดีย

มัลติมีเดียคืออะไร?

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

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

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

รูปแบบมัลติมีเดีย

องค์ประกอบมัลติมีเดีย (เช่นเสียงหรือวิดีโอ) จะถูกเก็บไว้ในไฟล์สื่อ
วิธีที่ใช้กันมากที่สุดในการค้นพบชนิดของไฟล์ที่คือดูที่นามสกุลไฟล์
ไฟล์มัลติมีเดียมีรูปแบบที่แตกต่างกันและส่วนขยายที่ชอบ: .swf, .wav, .mp3 .mp4, .mpg, .wmv และ .avi

 

 MP4 เป็นรูปแบบใหม่และที่จะเกิดขึ้นสำหรับวิดีโออินเทอร์เน็ต

MP4 แนะนำโดย YouTube

MP4 ได้รับการสนับสนุนจากผู้เล่นแฟลช

MP4 ได้รับการสนับสนุนโดย HTML5

 เพียง MP4, WebM และวิดีโอ Ogg รับการสนับสนุนโดยมาตรฐาน HTML5 

รูปแบบเสียง

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

 เพียง MP3, WAV, และเสียง Ogg รับการสนับสนุนโดยมาตรฐาน HTML5 

HTML5 วิดีโอ

 

HTML ตัวอย่างวิดีโอ มารยาทของบิ๊กบั๊กบันนี่

 

ทดลองกดตรงนี้ 

 

การเล่นวิดีโอในรูปแบบ HTML

ก่อน HTML5 วิดีโอสามารถเล่นได้เฉพาะในเบราว์เซอร์ที่มีปลั๊กอิน (เช่นแฟลช)
HTML5 วิดีโอ <> องค์ประกอบระบุวิธีมาตรฐานในการฝังวิดีโอในหน้าเว็บ

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

ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ <video> องค์ประกอบ

ใช้ HTML <video> ธาตุ

ในการแสดงวิดีโอในรูปแบบ HTML ให้ใช้<video>องค์ประกอบ:


ทดลองกดตรงนี้

มันทำงานอย่างไร

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

HTML <video> แบบอัตโนมัติ

ในการเริ่มต้นวิดีโอโดยอัตโนมัติใช้แบบอัตโนมัติแอตทริบิวต์:


ทดลองกดตรงนี้


 แอตทริบิวต์แบบอัตโนมัติไม่ทำงานในอุปกรณ์มือถือเช่น iPad และ iPhone 

HTML วิดีโอ - การสนับสนุนเบราว์เซอร์

ใน HTML5 มี 3 รูปแบบวิดีโอที่รองรับ: MP4, WebM และ Ogg
สนับสนุนเบราว์เซอร์สำหรับรูปแบบที่แตกต่างกันคือ

HTML วิดีโอ - ประเภทสื่อ

 

HTML Video - วิธีคุณสมบัติและกิจกรรม

HTML5 กำหนดวิธีการ DOM คุณสมบัติและกิจกรรมสำหรับ <video> องค์ประกอบ
นี้ช่วยให้คุณโหลดเล่นและหยุดวิดีโอเช่นเดียวกับการตั้งค่าระยะเวลาและปริมาณ
นอกจากนี้ยังมีเหตุการณ์ DOM ที่สามารถแจ้งให้ทราบเมื่อวิดีโอเริ่มเล่นถูกหยุดชั่วคราว ฯลฯ


 ทดลองกดตรงนี้

 HTML5 และเสียง

เสียงบนเว็บ

ก่อน HTML5, ไฟล์เสียงสามารถเล่นได้เฉพาะในเบราว์เซอร์ที่มีปลั๊กอิน (เช่นแฟลช)
HTML5 <เสียง> องค์ประกอบระบุวิธีมาตรฐานในการฝังเสียงในหน้าเว็บ

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

ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ <เสียง> องค์ประกอบ

ใช้ HTML <เสียง> ธาตุ

ในการเล่นไฟล์เสียงในรูปแบบ HTML ใช้<เสียง>องค์ประกอบ:

  
ทดลองกดตรงนี้

HTML เสียง - วิธีการทำงาน

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

HTML เสียง - การสนับสนุนเบราว์เซอร์

ใน HTML5 มี 3 รูปแบบเสียงที่รองรับ: MP3, WAV, และ Ogg
สนับสนุนเบราว์เซอร์สำหรับรูปแบบที่แตกต่างกันคือ

HTML เสียง - ประเภทสื่อ

HTML Audio - วิธีคุณสมบัติและกิจกรรม

HTML5 กำหนดวิธีการ DOM, คุณสมบัติและเหตุการณ์สำหรับ <เสียง> องค์ประกอบ
นี้ช่วยให้คุณโหลดเล่นและหยุดไฟล์เสียงเช่นเดียวกับระยะเวลาและปริมาณชุด
นอกจากนี้ยังมีเหตุการณ์ DOM ที่สามารถแจ้งให้ทราบเมื่อเสียงเริ่มที่จะเล่นถูกหยุดชั่วคราว ฯลฯ
สำหรับการอ้างอิง DOM เต็มไปของเราHTML5 เสียง / วิดีโอ DOM อ้างอิง

HTML ปลั๊กอิน

 

HTML ผู้ช่วย (plug-in)

การประยุกต์ใช้ตัวช่วย (ปลั๊กอิน) เป็นโปรแกรมคอมพิวเตอร์ที่ขยายการทำงานมาตรฐานของเว็บเบราเซอร์
ตัวอย่างที่รู้จักกันดีปลั๊กอินจาวา
ปลั๊กอินสามารถเพิ่มไปยังหน้าเว็บที่มี <object> แท็กหรือ <embed> แท็ก 
ปลั๊กอินสามารถนำมาใช้เพื่อวัตถุประสงค์หลาย: แผนที่แสดงสแกนหาไวรัสยืนยันรหัสธนาคารของคุณ ฯลฯ

ในการแสดงภาพและเสียง: ใช้ <video> และแท็ก <เสียง> 

ก <object> ธาตุ

ก <object> องค์ประกอบการสนับสนุนจากเบราว์เซอร์
ก <object> องค์ประกอบกำหนดวัตถุที่ฝังอยู่ภายในเอกสาร HTML
มันถูกใช้เพื่อฝังปลั๊กอิน (เช่นจาวาผู้อ่านไฟล์ PDF, Flash เล่น) ในหน้าเว็บ

ทดลองกดตรงนี้

ก <object> องค์ประกอบนอกจากนี้ยังสามารถนำมาใช้เพื่อรวม HTML ใน HTML:

ทดลองกดตรงนี้

หรือภาพถ้าคุณต้องการ:

ทดลองกดตรงนี้

ก <ฝัง> ธาตุ

ก <ฝัง> องค์ประกอบได้รับการสนับสนุนในเบราว์เซอร์ที่สำคัญทั้งหมด
ก <ฝัง> องค์ประกอบยังกำหนดวัตถุที่ฝังอยู่ภายในเอกสาร HTML
เว็บเบราเซอร์ได้รับการสนับสนุน <embed> องค์ประกอบเป็นเวลานาน แต่ก็ยังไม่ได้เป็นส่วนหนึ่งของข้อกำหนด HTML ก่อน HTML5

ทดลองกดตรงนี้

โปรดทราบว่า <embed> องค์ประกอบไม่ได้แท็กปิด มันไม่สามารถมีข้อความทางเลือก

ก <ฝัง> องค์ประกอบนอกจากนี้ยังสามารถนำมาใช้เพื่อรวม HTML ใน HTML:

ทดลองกดตรงนี้ 

หรือภาพถ้าคุณต้องการ:

ทดลองกดตรงนี้ 

HTML วิดีโอ YouTube

วิธีที่ง่ายที่สุดในการเล่นวิดีโอในรูปแบบ HTML คือการใช้ YouTube

ดิ้นรนกับรูปแบบวิดีโอ?

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

Id วิดีโอ YouTube

YouTube จะแสดงรหัส (เช่น XGSy3_Czz8k) เมื่อคุณบันทึก (หรือเล่น) วิดีโอ
คุณสามารถใช้ ID นี้และดูวิดีโอของคุณในโค้ด HTML

การเล่นวิดีโอของ YouTube ใน HTML

ในการเล่นวิดีโอของคุณบนหน้าเว็บที่ทำต่อไปนี้:

• อัปโหลดวิดีโอไปยัง YouTube
• จดรหัสวิดีโอ
• กำหนด <iframe> องค์ประกอบในหน้าเว็บของคุณ
• ให้จุด src แอตทริบิวต์เป็น URL ของวิดีโอ
• ใช้ความกว้างและความสูงเพื่อระบุมิติของผู้เล่น
• เพิ่มพารามิเตอร์อื่น ๆ เพื่อ URL (ดูด้านล่าง)

ตัวอย่างเช่น - การใช้ iFrame (แนะนำ)

ทดลองกดตรงนี้

YouTube แบบอัตโนมัติ

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

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

ราคา 0 (เริ่มต้น): วิดีโอจะไม่เล่นโดยอัตโนมัติเมื่อโหลดเล่น
ราคา 1: วิดีโอจะเล่นโดยอัตโนมัติเมื่อโหลดเล่น

ทดลองกดตรงนี้

YouTube เพลย์ลิส

รายการที่คั่นด้วยเครื่องหมายจุลภาคของวิดีโอเพื่อเล่น (นอกเหนือไปยัง URL เดิม)

YouTube ห่วง

ราคา 0 (เริ่มต้น): วิดีโอจะเล่นเพียงครั้งเดียว
ราคา 1: วิดีโอจะห่วง (ตลอดไป)


ทดลองกดตรงนี้

การควบคุม YouTube

ราคา 0: การควบคุมผู้เล่นไม่แสดง
ราคา 1 (เริ่มต้น): ผู้เล่นควบคุมการแสดง

ทดลองกดตรงนี้

YouTube - การใช้ <object> หรือ <embed>

หมายเหตุ: YouTube <object> และ <embed> ถูกเลิกใช้ตั้งแต่เดือนมกราคมปี 2015 คุณควรโยกย้ายวิดีโอของคุณไปใช้ <iframe> แทน

ตัวอย่างเช่น - การใช้ <object> (เลิกใช้)

ทดลองกดตรงนี้

ตัวอย่างเช่น - การใช้ <embed> (เลิกใช้)

ทดลองกดตรงนี้ 

แบบทดสอบ ภาษา HTML มีทั้งหมด 40 ข้อ

กดทำแบบทดสอบตรงนี้