ภาษา HTML ช่วงที่ 10

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 ข้อ

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