แอนดิว

2015-08-10T19:23:37+00:00

2016-02-28T17:11:05+00:00

11937

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

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

Screencast: ตัวอย่างการใช้เทมเพลต

ดาวน์โหลดวิดีโอ

Screencast: ตัวอย่างการใช้เทมเพลตจากบทความ - เว็บไซต์

วิดีโอและเสียง HTML5 เป็นมาตรฐานที่กำลังพัฒนา และไม่เกี่ยวข้องกับรูปแบบเสียงหรือวิดีโอใดๆ ดังนั้นจึงมีความแตกต่างระหว่างเบราว์เซอร์ในสิ่งที่รองรับ รูปแบบไฟล์เสียงและวิดีโอ ขณะนี้ความแตกต่างนี้ได้รับการชดเชยด้วยการเข้ารหัสแล้ว ไฟล์ต้นฉบับตัวแปลงสัญญาณที่แตกต่างกันหลายตัวและเชื่อมต่อไฟล์เวอร์ชันเหล่านี้ทั้งหมดเข้ากับแท็กหรือผ่านแท็กที่ซ้อนกัน< source src=" URL">. อย่างไรก็ตาม ผู้นำกำลังปรากฏตัวในรูปแบบไฟล์เสียงและวิดีโอที่เบราว์เซอร์รองรับ แน่นอนว่าสำหรับวิดีโอคือรูปแบบ MP4 (H.264) และสำหรับเสียงคือรูปแบบ MP3 และ m4a ตอนนี้เบราว์เซอร์ทั้งหมดสามารถเล่นไฟล์ในรูปแบบเหล่านี้ได้ อีกด้วย, เบราว์เซอร์ไฟร์ฟอกซ์ Chrome และ Opera ได้ตกลงที่จะสนับสนุนมาตรฐาน WEBM ในรูปแบบวิดีโอทั่วไป จากมุมมองของฉัน ตัวเลือกที่ดีที่สุดสำหรับการใช้วิดีโอและเสียง HTML5 ในตอนนี้จะเป็นรูปแบบตามการใช้ไฟล์มัลติมีเดียไฟล์เดียวในรูปแบบ MP4 ( H.264) สำหรับวิดีโอและ m4a สำหรับเสียงและเครื่องเล่น JS HTML5 มีเพียงไฟล์เดียวในรูปแบบที่ระบุเท่านั้นที่เชื่อมต่อกับคอนเทนเนอร์เสียงหรือวิดีโอ ปัจจุบันเบราว์เซอร์ส่วนใหญ่สามารถเล่นไฟล์ MP4 ได้ ไลบรารี JS ที่เชื่อมต่อจะจัดรูปแบบเครื่องเล่นที่สร้างไว้ในเบราว์เซอร์ หากเบราว์เซอร์ไม่รองรับรูปแบบ mp4 / m4a แสดงว่าในกรณีนี้เครื่องเล่น JS จะใช้งานได้ การเชื่อมต่อแฟลชเครื่องเล่นสำหรับเล่นไฟล์มัลติมีเดีย เมื่อพิจารณาว่ารูปแบบ mp4 ได้รับความนิยมอย่างมาก เราหวังว่าจะมีโอกาสเกิดปัญหาในการเล่นในเบราว์เซอร์ต่ำ รูปแบบนี้ต้องการไฟล์มัลติมีเดียเพียงไฟล์เดียวในรูปแบบที่ระบุซึ่งช่วยประหยัดพื้นที่ดิสก์และทรัพยากรสำหรับการประมวลผลไฟล์ นอกจากนี้ โครงการดังกล่าวจะมีความถูกต้องเชิงกลยุทธ์มากขึ้น เนื่องจากมีแนวโน้มว่าเบราว์เซอร์จะใช้งานวิดีโอและเสียง HTML5 ได้ดีขึ้นมากขึ้นเรื่อยๆ

หากต้องการระบุไฟล์ที่จะเล่นให้ผู้เล่น HTML5 ทราบ นอกเหนือจาก URL ของไฟล์แล้ว คุณต้องส่งประเภท MIME ของไฟล์ด้วย เพื่อให้เบราว์เซอร์เข้าใจว่าต้องใช้ตัวแปลงสัญญาณใด ตารางด้านล่างแสดงรายการรูปแบบไฟล์ที่พบบ่อยที่สุดและประเภท MIME

รูปแบบไฟล์และประเภท MIME นามสกุลไฟล์มีเดียประเภท Mime

เสียง mp3	mp3	เสียง/mpeg
เสียง mp4	ม4เอ	เสียง/mp4
เว็บเอ็มเสียง	เว็บเอ็ม	เสียง/เว็บเอ็ม
เสียง	อ็อก	เสียง/ogg
วิดีโอ mp4 (H.264)	mp4	วิดีโอ/mp4
วีดีโอเว็บเอ็ม	เว็บเอ็ม	วิดีโอ/เว็บเอ็ม
วิดีโอ ogg	ogv	วิดีโอ/ogg

เครื่องมือเข้ารหัสเสียงและวิดีโอ

คุณสามารถใช้การเข้ารหัสไฟล์วิดีโอและเสียงเป็นรูปแบบเว็บด้านบนได้ เปิดโปรแกรมซึ่งรองรับการแปลงไฟล์เสียงและวิดีโอเป็นรูปแบบหลักทั่วไปสำหรับเว็บ ( MP4, WebM, Ogg Theora, MP3 ฯลฯ). Miro Video Converter มีให้ใช้งานที่แตกต่างกัน ระบบปฏิบัติการ- Windows, Mac และ Linux และเป็นเชลล์กราฟิกสำหรับยูทิลิตี้คอนโซลและสะดวกต่อการใช้งาน เว็บเซิร์ฟเวอร์เพื่อประมวลผลวิดีโอและเสียงที่ดาวน์โหลดมาโดยอัตโนมัติ

: โค้ดตัวอย่างเสียง HTML5 พร้อมมาร์กอัปไมโคร schema.org: ส่วนหัวของเสียง

เบราว์เซอร์ของคุณไม่รองรับเสียง HTML5

ดาวน์โหลดเสียง

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

Audioobject itemType = http://schema.org/AudioObject name = คำอธิบายชื่อเสียง = คำอธิบายเสียง... isfamilyfriendly = รูปแบบการเข้ารหัสที่แท้จริง = ระยะเวลา mp3 = วันที่อัปโหลด PT04M59S = 31-12-2558 รูปภาพ = URL แบบเต็มไปยัง image.jpg ชื่อสำรอง = ทางเลือกอื่น title audio contenturl href = URL ไปยัง file.mp3 text = ดาวน์โหลดเสียงผู้เขียน itemType = http://schema.org/Person url href = URL text = ชื่อผู้แต่ง = ชื่อผู้แต่ง image = URL แบบเต็มไปยัง person.jpg

มาร์กอัปเสียงขั้นต่ำตาม schema.org ควรมี itemprop ="name" , itemprop ="description" , itemprop ="contentUrl" คุณสมบัติที่เหลือเป็นทางเลือก

ตัวอย่างการใช้แท็ก HTML5 มาตรฐาน:

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

โค้ดตัวอย่างวิดีโอ HTML5 พร้อมมาร์กอัปขนาดเล็กของ schema.org: ชื่อวิดีโอ

ดูบน YouTube

เบราว์เซอร์ของคุณไม่รองรับวิดีโอ HTML5

ดาวน์โหลดวิดีโอ: ชื่อวิดีโอ

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

Videoobject itemType = http://schema.org/VideoObject name = ภาพขนาดย่อของชื่อวิดีโอ imageobject itemType = http://schema.org/ImageObject contenturl = URL ไปยัง video-thumbnail.jpg|png width = 100 ความสูง = 100 ระยะเวลา = PT14M59S เหมาะสำหรับครอบครัว = วันที่อัพโหลดจริง = 31-12-2558 คำอธิบายสั้นสำหรับวิดีโอ... url href = URL ไปยังไฟล์.mp4 text = ชื่อวิดีโอ ผู้เขียน ชื่อบุคคล itemType = http://schema.org/Person url href = URL ไปยังผู้เขียน ข้อความหน้าเว็บ = ชื่อผู้เขียน ชื่อ = ชื่อผู้เขียน รูปภาพ = URL เต็ม ถึง author.jpg thumbnailurl = URL ไปยัง file.jpg|png

ขั้นต่ำ จำเป็นสำหรับเครื่องมือค้นหา มาร์กอัปวิดีโอตาม schema.org ควรมีคุณสมบัติของ itemprop ทั้งหมดที่แสดงในโค้ดตัวอย่าง ยกเว้นบล็อก itemprop ="author" ซึ่งเป็นทางเลือกสำหรับเครื่องมือค้นหา และสามารถลบได้หากไม่มีข้อมูล เพื่อเติมเต็มมัน สำหรับภาพขนาดย่อของวิดีโอ Yandex ต้องการให้คุณระบุมาร์กอัปขนาดเล็กตาม schema.org เป็น itemprop ="thumbnail" ในรูปแบบของ ImageObject และ Googleจำเป็นต้องระบุ itemprop ="thumbnailUrl" ดังนั้นคุณต้องแทรกไฟล์วิดีโอขนาดย่อสองครั้ง ดังนั้นแท็ก img ที่สองจึงได้รับ display: none style เพื่อไม่ให้แสดงในเบราว์เซอร์ แทนที่จะใช้แท็ก img พร้อม display:none คุณสามารถส่งคุณสมบัตินี้ไปยังแท็กลิงก์ได้ผ่านทางแอตทริบิวต์ href นอกจากนี้ แม้ว่าข้อเท็จจริงที่ว่าไมโครมาร์กอัปสามารถส่งผ่านเมตาแท็กและลิงก์แท็กที่ไม่แสดงต่อผู้ใช้ แต่หากเป็นไปได้ ก็ยังแนะนำให้เพิ่มมาร์กอัปไมโครให้กับแท็กที่จะแสดงต่อผู้ใช้เป็นหลัก การตรวจสอบความถูกต้องของมาร์กอัปไมโครของ schema.org สามารถทำได้โดยใช้ลิงก์เหล่านี้: , . ข้อได้เปรียบหลักของการใช้ไมโครมาร์กอัปคือความสะดวกของเนื้อหาดังกล่าวสำหรับโรบ็อตการค้นหาและโรบ็อตเครือข่ายโซเชียล โรบ็อตเหล่านี้จะดึงข้อมูลที่มีป้ายกำกับและรวมเข้าด้วยกัน ดังนั้นการใช้ไมโครมาร์กอัปจึงดีขึ้น การทำ SEOเว็บไซต์และอำนวยความสะดวกในการกระจายข้อมูลโดยอัตโนมัติไปยัง ในเครือข่ายโซเชียล. คำอธิบายโดยละเอียดของไมโครมาร์กอัป Schema.org สำหรับวิดีโอที่ทำเครื่องหมายด้วยรูปแบบ VideoObjec บนเว็บไซต์ นอกจากนี้เป็นที่น่าสังเกตว่าในกรณีที่คุณแทรกวิดีโอบนเว็บไซต์ของคุณไม่ได้โดยตรง แต่ใช้วิดเจ็ตโฮสต์วิดีโอ Yandex.Video หรือ YouTube คุณสามารถเพิ่มบล็อกโค้ด HTML พร้อมคำอธิบายของวิดีโอใต้บล็อกโค้ดวิดเจ็ต และฝังมาร์กอัป Schema.org สำหรับวิดีโอนี้ ในขณะเดียวกัน ในฐานะพารามิเตอร์ URL - ลิงก์ไปยังวิดีโอ อย่าระบุลิงก์โดยตรงไปยังไฟล์คงที่ แต่ระบุลิงก์ที่ได้รับจากการโฮสต์วิดีโอ แม้ว่าข้อกำหนด Schema.org ระบุว่าลิงก์จะต้องเป็นไฟล์โดยตรง แต่เครื่องมือค้นหายังประมวลผลลิงก์ไปยังวิดีโอจากการโฮสต์วิดีโอด้วย ( ดูตัวอย่างบนเว็บไซต์ Yandex ในส่วนผู้ดูแลเว็บ) แม้ว่าคุณไม่สามารถดาวน์โหลดไฟล์จากลิงก์ดังกล่าวได้และคุณไม่สามารถดูไฟล์ได้โดยตรงในเครื่องเล่นสื่อ HTML5 บนเพจ แต่จะอยู่ในวิดเจ็ตการโฮสต์วิดีโอเท่านั้น

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

คุณสมบัติและแท็ก:

คุณลักษณะ src , preload , autoplay , mediagroup , loop , muted , controls เป็นคุณลักษณะทั่วไปสำหรับองค์ประกอบสื่อทั้งหมด รวมถึงแท็กและ

แอตทริบิวต์เล่นอัตโนมัติ: อย่างใดอย่างหนึ่ง หรือ

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

แอตทริบิวต์การควบคุม: อย่างใดอย่างหนึ่งหรือ

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

แอตทริบิวต์วนรอบ: อย่างใดอย่างหนึ่งหรือ

• แอตทริบิวต์ loop ทำให้ผู้เล่นเล่นไฟล์ในลูป แอ็ตทริบิวต์ถูกระบุโดยการมีอยู่ของแอ็ตทริบิวต์ในแท็ก หรือเท่านั้น และไม่มีพารามิเตอร์ โดยค่าเริ่มต้นจะไม่มีแอตทริบิวต์วนซ้ำ

แอตทริบิวต์โหลดล่วงหน้า:

• แอตทริบิวต์ preload ระบุการโหลดไฟล์พร้อมกับการโหลดหน้าเว็บ และรับหนึ่งในสามค่าต่อไปนี้:
  • ไม่มี - อย่าดาวน์โหลดไฟล์พร้อมกับโหลดหน้าเว็บ ซึ่งหมายความว่าไฟล์จะเริ่มโหลดในเครื่องเล่นหลังจากกดปุ่มเล่นเท่านั้น สิ่งนี้มีประโยชน์ในการเร่งความเร็วในการโหลดหน้าเว็บ ค่า none เป็นค่าเริ่มต้นสำหรับแอตทริบิวต์ preload ดังนั้นจึงเป็นไปได้ที่จะไม่แทรกแอตทริบิวต์ preload ลงในแท็กเลยหรือในกรณีนี้
  • ข้อมูลเมตา - ไม่ได้ดาวน์โหลดไฟล์พร้อมกับการโหลดหน้าเว็บ แต่จะดาวน์โหลดไฟล์ข้อมูลเมตาของไฟล์มัลติมีเดีย
  • อัตโนมัติ - ดาวน์โหลดไฟล์แบบเต็มพร้อมกับโหลดหน้าเว็บ ในตัวเลือกนี้ เบราว์เซอร์จะโหลดไฟล์มีเดียโดยอัตโนมัติ หน้าเว็บใช่ แต่สิ่งนี้จะไม่รบกวนการโหลดเพจและการเรนเดอร์เพจในเบราว์เซอร์ หากมีการระบุแอตทริบิวต์ preload ="" ที่มีค่าว่างในแท็ก หรือ ค่าอัตโนมัติจะถูกนำมาใช้
  • แอตทริบิวต์โหลดล่วงหน้าจะถูกแทนที่หากใช้แอตทริบิวต์เล่นอัตโนมัติ

คุณลักษณะ src:

• แอตทริบิวต์ src ของแท็ก หรืออนุญาตให้คุณกำหนดเส้นทางไปยังไฟล์มัลติมีเดียในแท็กได้ทันที เส้นทางสามารถเป็นได้ทั้งแบบสมบูรณ์ โดยระบุโปรโตคอลและโดเมน หรือสัมพันธ์กับรูทของไซต์ปัจจุบัน คุณยังสามารถระบุเส้นทางไปยังไฟล์ในแท็กที่ฝังอยู่ในคอนเทนเนอร์เสียงหรือวิดีโอได้< source src=" URL"> .

แอตทริบิวต์โปสเตอร์ของแท็กวิดีโอ:

• แอตทริบิวต์โปสเตอร์จะใช้เฉพาะในแท็ก และระบุ URL ของรูปภาพ (gif, PNG, jpeg ฯลฯ) ที่จะแสดงในขณะที่วิดีโอไม่พร้อมใช้งาน หากไม่ได้ตั้งค่าแอตทริบิวต์โปสเตอร์ โปรแกรมเล่นเบราว์เซอร์จะพยายามแสดงเฟรมแรกของวิดีโอ

แอตทริบิวต์ความกว้างและความสูงของแท็กวิดีโอ:

• แอตทริบิวต์ความกว้างและความสูงจะใช้กับแท็กเท่านั้น และตั้งค่าความกว้างและความสูงของพื้นที่เล่นของเครื่องเล่นวิดีโอตามลำดับ ค่านี้คาดว่าจะเป็นจำนวนเต็มบวก ซึ่งระบุเป็นพิกเซลหรือเปอร์เซ็นต์ การตั้งค่าแอตทริบิวต์เหล่านี้จะส่งผลต่อขนาดการแสดงผลของวิดีโอ แต่จะไม่เปลี่ยนอัตราส่วนภาพของวิดีโอ วิดีโอจะปรับตามขนาดที่ระบุโดยยังคงสัดส่วนไว้ หากขนาดที่ระบุไม่ตรงกับสัดส่วนวิดีโอ ก็จะมีแถบสีเข้มตามด้านบนและ/หรือขอบด้านข้างของวิดีโอ ดังนั้นเมื่อตั้งค่าพารามิเตอร์เหล่านี้ ขอแนะนำให้เลือกอัตราส่วนให้เหมือนกับวิดีโอที่กำลังเล่น หรือตั้งค่าเฉพาะความกว้าง จากนั้นโปรแกรมเล่นจะปรับความสูงเอง
• หากไม่ได้ระบุพารามิเตอร์อย่างใดอย่างหนึ่งหรือทั้งสองอย่าง พารามิเตอร์ที่ไม่ระบุจะถูกนำมาจากขนาดรูปภาพที่เกี่ยวข้องซึ่งระบุไว้ในแอตทริบิวต์โปสเตอร์
• หากไม่มีแอตทริบิวต์โปสเตอร์ พารามิเตอร์เหล่านี้จะถูกตั้งค่าดังนี้: สำหรับความกว้าง = 300 px และสำหรับความสูง = 150px เพื่อไม่ให้คำนวณและประสานขนาดของพื้นที่วิดีโอตามสัดส่วนของคลิป ฉันขอแนะนำให้ตั้งค่าพารามิเตอร์ความกว้างเพียงตัวเดียว จากนั้นความสูง (ความสูง) ของพื้นที่เล่นจะถูกเลือกโดยอัตโนมัติตามสัดส่วนวิดีโอ .
• นอกจากนี้ ขนาดและการออกแบบของโปรแกรมเล่น HTML5 ยังสามารถมีอิทธิพลได้ คุณสมบัติซีเอสเอสนำไปใช้กับแท็กหรือ.

แอตทริบิวต์ปิดเสียง: อย่างใดอย่างหนึ่งหรือ

• แอตทริบิวต์ปิดเสียงจะตั้งค่าการแสดงตนในแท็กหรือเสียงเป็นสถานะปิดเสียงในโปรแกรมเล่น HTML5 โดยค่าเริ่มต้น แอตทริบิวต์จะหายไป

คุณลักษณะข้ามชาติ:

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

แอตทริบิวต์กลุ่มสื่อ: div ( ระยะขอบ: 1em อัตโนมัติ; ตำแหน่ง: สัมพันธ์; ความกว้าง: 400px; ความสูง: 300px; ) วิดีโอ ( ตำแหน่ง; สัมบูรณ์; ด้านล่าง: 0; ขวา: 0; ) วิดีโอ: ลูกคนแรก ( ความกว้าง: 100%; ความสูง : 100%; ) วิดีโอ:last-child ( ความกว้าง: 30%; )

• คุณลักษณะ Mediagroup ช่วยให้คุณสามารถรวมการควบคุมไฟล์สื่อหลายไฟล์ไว้ใน MediaController เดียวได้โดยการสร้างกลุ่มของไฟล์สื่อในตำแหน่งต่างๆ บนเพจ กลุ่มนี้จะได้รับการจัดการพร้อมกันสำหรับไฟล์ทั้งหมดที่รวมอยู่ในกลุ่ม วิธีนี้จะสะดวก เช่น หากคุณต้องการเล่นและควบคุมวิดีโอเดียวกันพร้อมกันในตำแหน่งต่างๆ ของหน้าที่มีคำบรรยายต่างกัน หรือวิดีโอต่างกัน

แท็กและต้องมีแท็กปิด

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

แท็ก:

เส้นทางไปยังไฟล์ที่กำลังเล่นสามารถระบุได้โดยใช้แท็กที่มีแอตทริบิวต์ src วางอยู่ภายในแท็ก หรือ แท็กไม่มีแท็กปิด

ในกรณีส่วนใหญ่ แท็กจะมีลักษณะดังนี้:

และจะมีแอตทริบิวต์ src และ type อยู่เสมอ ซึ่งโดยส่วนใหญ่แล้วจะมีเฉพาะประเภท MIME เท่านั้น

คุณสมบัติของแท็ก:

• แอตทริบิวต์ src= "URL" ของแท็กระบุ URL ไปยังไฟล์มัลติมีเดีย เส้นทางสามารถเป็นได้ทั้งแบบสมบูรณ์ โดยระบุโปรโตคอลและโดเมน หรือสัมพันธ์กับรูทของไซต์
• แอตทริบิวต์ type="MIME-type" ของแท็ก หรืออีกนัยหนึ่งคือ type="MIME-type; codecs="codec"" ระบุประเภท MIME และตัวแปลงสัญญาณของไฟล์ สำหรับเสียง การระบุประเภท MIME ก็เพียงพอแล้ว เช่น สำหรับ .mp3 - type="audio/mpeg" แม้ว่าตามข้อกำหนดสำหรับวิดีโอ จะต้องระบุตัวแปลงสัญญาณในแอตทริบิวต์ประเภทด้วย แต่ตอนนี้มักจะระบุเฉพาะประเภท MIME ที่ไม่มีตัวแปลงสัญญาณ ปล่อยให้เบราว์เซอร์ตัดสินใจ
• แอตทริบิวต์สื่อ ="all|braille|handheld|print|screen|speech|projection|tty|tv" ของแท็กจะระบุประเภทของอุปกรณ์ที่ควรเล่นไฟล์ ค่าเริ่มต้นคือทั้งหมด ดังนั้นในกรณีส่วนใหญ่แอตทริบิวต์นี้จะไม่ถูกระบุเลย เว้นแต่คุณต้องการระบุอุปกรณ์สำหรับการเล่นโดยเฉพาะ

แท็ก:

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

- ไม่มีแท็กปิด

แท็ก ช่วยให้คุณสามารถเชื่อมต่อไฟล์แทร็กเพิ่มเติมกับวิดีโอในรูปแบบพิเศษ WebVTT (รูปแบบแทร็กข้อความวิดีโอบนเว็บ) ซึ่งระบุเอาต์พุต ข้อความโดยอ้างอิงเวลาไปยังไฟล์วิดีโอ มาตรฐาน WebVTT ไม่เพียงแต่รองรับเอาต์พุตข้อความเท่านั้น แต่ยังมีตัวเลือกต่างๆ อีกด้วย สไตล์ CSSและตัวเลือกสำหรับตำแหน่งในพื้นที่ดูวิดีโอ ปัจจุบันไฟล์ WebVTT ส่วนใหญ่จะใช้เพื่อแนบคำบรรยายข้อความลงในวิดีโอ ซึ่งเบราว์เซอร์เกือบทั้งหมดรองรับ คุณลักษณะอื่นๆ ของมาตรฐาน WebVTT ยังไม่ได้นำมาใช้โดยเบราว์เซอร์เอง ดังนั้น เพื่อการใช้งาน WebVTT ที่สมบูรณ์ยิ่งขึ้น จึงควรใช้เครื่องเล่น JS นอกจากนี้ ไฟล์ WebVTT ยังสามารถนำมาใช้อย่างไม่เป็นมาตรฐานโดยผู้เล่น JS เพื่อถ่ายโอนข้อมูลเพิ่มเติมไปยังเครื่องเล่น JS เช่น URL ของตัวอย่างรูปภาพสำหรับเฟรมวิดีโอ ในคำถามเกี่ยวกับวิธีการแสดงตัวอย่างเฟรมวิดีโอในระดับการกรอกลับของผู้เล่น (ภาพขนาดย่อของแถบขัด) เช่นเดียวกับที่ทำบนไซต์โฮสต์วิดีโอ ต้องบอกว่าฟังก์ชันดังกล่าวยังไม่พร้อมใช้งานในเครื่องเล่นที่สร้างในเบราว์เซอร์ ดังนั้นจึงใช้งานผ่านเครื่องเล่น JS เป็นส่วนเสริม ในการดำเนินการนี้ ให้เชื่อมต่อไลบรารี JS (เครื่องเล่น js) ซึ่งจะควบคุมออบเจ็กต์วิดีโอและเสียง HTML5 และดำเนินการจัดสไตล์ ผู้เล่น JS ดังกล่าวสำหรับการแสดงตัวอย่างเฟรมวิดีโอที่ไม่ได้มาตรฐานใช้ไฟล์ WEBVTT จากแท็กเพื่อส่ง URL ของภาพตัวอย่างผ่านมัน

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

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

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

แอตทริบิวต์ src ของแท็กระบุ URL ไปยังไฟล์แทร็กด้วย ข้อมูลเพิ่มเติม. ไฟล์ที่แนบมากับแท็กมีรูปแบบ WebVTT และนามสกุล .vtt

แอตทริบิวต์ srclang ของแท็กระบุภาษาของแทร็กผ่านรหัสภาษา สำหรับภาษารัสเซียจะเท่ากับ "ru" สำหรับภาษาอังกฤษ "en"

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

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

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

1. บนโฮสติ้งที่เว็บไซต์ของคุณตั้งอยู่ ในไดเร็กทอรีราก (โฟลเดอร์ที่มีไฟล์ดัชนี) ให้สร้างโฟลเดอร์เสียง ในอนาคตคุณจะวางไฟล์เสียงทั้งหมดลงไป

3. ตอนนี้เลือก ไฟล์ที่จำเป็นดีกว่าในรูปแบบ MP3 สร้างโฟลเดอร์เสียงในรูทของไซต์แล้วอัปโหลด

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

และทุกอย่างพร้อมแล้ว! คุณสามารถดูตัวอย่างการทำงานได้

ติดตั้งอย่างไร เพลงพื้นหลังใน html ฉันใช้ความสามารถของ HTML และเบราว์เซอร์ คุณยังสามารถแทรกเพลงพื้นหลังลงในหน้าได้ คุณจะต้องมีไฟล์เสียง รูปแบบที่ต้องการ: WAV, AU, MIDI หรือ MP3 คุณสามารถใช้ไฟล์ใดก็ได้ที่มีนามสกุลที่ระบุเป็นตัวอย่าง

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

ไวยากรณ์ค่อนข้างง่าย:

ไม่จำเป็นต้องมีแท็กปิด

ตอนนี้เรามาดูตัวอย่างบันทึกที่มีแอตทริบิวต์ และด้านล่างด้วยการถอดรหัส:

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

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

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

src - เส้นทางไปยังไฟล์เสียงของคุณ
วนซ้ำ - ทำซ้ำเมโลดี้กี่ครั้ง (ถ้า -1 ให้เล่นซ้ำไม่รู้จบ)
ยอดคงเหลือ - ค่าสมดุลสเตอริโอ (ตั้งแต่ -10,000 ถึง 10,000)
ระดับเสียง - ระดับเสียงการเล่นเมโลดี้ โดยที่ 0 คือค่าสูงสุด และ -10,000 คือค่าต่ำสุด

อย่างไรก็ตาม จะไม่มีวิธีการควบคุมผู้เล่นแต่อย่างใด - ทุกครั้งที่รีเฟรชหน้า แทร็กจะถูกเล่นอีกครั้ง

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

การแทรกเสียงและเพลงใน HTML5 - แท็กเสียง
เสียง - การกำหนดแท็กที่จับคู่ เสียงพื้นหลังเพลงหรือสตรีมเสียงอื่น ๆ บนเว็บไซต์

แอตทริบิวต์แท็กเสียง

เล่นอัตโนมัติ - ไฟล์จะเล่นทันทีเมื่อโหลดหน้า (คล้ายกับเพลงพื้นหลัง bgsound)
ควบคุม - แสดงแผงควบคุมเครื่องเล่นในเบราว์เซอร์
วนซ้ำ - เล่นไฟล์อีกครั้งหลังจากสิ้นสุด
โหลดล่วงหน้า - ไฟล์เสียงจะถูกโหลดพร้อมกับการโหลดหน้า
src - เส้นทางไปยังไฟล์เสียง (mp3 หรือ ogg)

โค้ดตัวอย่างพร้อมแท็กเสียง

แท็กเสียง

เสียงในรูปแบบ HTML 5

เบราว์เซอร์ของคุณไม่รองรับแท็กเสียง
ดาวน์โหลดเพลง.

คำอธิบาย

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

รายการตัวแปลงสัญญาณที่เบราว์เซอร์รองรับนั้นมีจำกัดและแสดงไว้ในตาราง 1.

โต๊ะ 1. ตัวแปลงสัญญาณและเบราว์เซอร์

ตัวแปลงสัญญาณ	อินเทอร์เน็ตเอ็กซ์พลอเรอร์	โครเมียม	โอเปร่า	ซาฟารี	ไฟร์ฟอกซ์
ogg/วอร์บิส
คลื่น
mp3
เอเอซี

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

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

ที่จำเป็น.

HTML5 IE 8 IE 9+ Cr Op Sa Fx

เสียง

Alexander Klimenkov - สิบสี่

เบราว์เซอร์ของคุณไม่รองรับแท็กเสียง ดาวน์โหลดเพลง.

ตัวอย่างผลลัพธ์ใน เบราว์เซอร์โอเปร่าแสดงในรูปที่. 1.

ข้าว. 1. เล่นไฟล์เสียง

เบราว์เซอร์

ส่วนควบคุมการเล่นเสียงจะมีลักษณะแตกต่างกันไปในแต่ละเบราว์เซอร์ แต่องค์ประกอบพื้นฐานจะเหมือนกัน ได้แก่ปุ่มเล่น/หยุดชั่วคราว ความยาวแทร็ก เวลาเล่นที่ผ่านไปและทั้งหมด และระดับเสียง

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

เราใช้มันเพื่อแทรกไฟล์เสียงลงในหน้า ด้านล่างนี้คือ ตัวอย่างที่ง่ายที่สุดโดยใช้แท็ก มันจะดาวน์โหลดไฟล์ MP3 และเล่น สังเกตแอตทริบิวต์ autopaly ซึ่งใช้ในการเล่นเสียงโดยอัตโนมัติ อย่างไรก็ตาม คุณไม่ควรเล่นเสียงบนเว็บไซต์โดยอัตโนมัติ เนื่องจากจะรบกวนผู้ใช้ การเล่นเสียงแบบวนซ้ำ ต้องการวนซ้ำเสียงหรือไม่? คุณลักษณะ loop จะช่วยคุณทำสิ่งนี้ แต่ขอย้ำอีกครั้ง คุณไม่ควรใช้การเล่นอัตโนมัติและการเล่นวนซ้ำมากเกินไป หากคุณไม่ต้องการให้ผู้ใช้ออกจากไซต์ก่อนเวลาอันควร การแสดงส่วนควบคุม แทนที่จะให้เสียงเล่นโดยอัตโนมัติ ซึ่งเป็นแนวทางปฏิบัติที่ไม่ดีอย่างแน่นอน คุณควรอนุญาตให้แสดงส่วนควบคุมบางอย่างในเบราว์เซอร์ เช่น ปุ่มระดับเสียงและปุ่มเล่น (หยุดชั่วคราว) ทำได้ง่ายเพียงเพิ่มแอตทริบิวต์การควบคุม รูปแบบไฟล์ต่างๆ แท็กนี้รองรับโดยเบราว์เซอร์สมัยใหม่ส่วนใหญ่ แต่ปัญหาก็คือ เบราว์เซอร์ที่แตกต่างกันรองรับไฟล์รูปแบบต่างๆ ตัวอย่างเช่น Safari สามารถเล่น MP3 ได้ แต่ Firefox ไม่สามารถทำได้ และเล่นไฟล์ OGG แทน วิธีแก้ไขปัญหานี้คือการใช้ทั้งสองรูปแบบเพื่อให้ผู้เยี่ยมชมทุกคนสามารถได้ยินเสียงได้ ไม่ว่าพวกเขาจะใช้เบราว์เซอร์ใดก็ตาม การระบุประเภท MIME ของไฟล์ เมื่อใช้รูปแบบไฟล์ที่แตกต่างกัน แนวทางปฏิบัติที่ดีในการระบุประเภท MIME สำหรับแต่ละไฟล์ เพื่อช่วยให้เบราว์เซอร์แปลไฟล์ที่สนับสนุน ซึ่งสามารถทำได้ง่ายๆ โดยใช้แอตทริบิวต์ type สำหรับเบราว์เซอร์รุ่นเก่า จะเกิดอะไรขึ้นหากผู้เยี่ยมชมใช้ IE6 หรือเบราว์เซอร์ยุคก่อนประวัติศาสตร์อื่นๆ ที่ไม่สนับสนุนแท็ก ง่ายมาก: ด้านล่างนี้คือโค้ดที่จะแสดงข้อความสำหรับเบราว์เซอร์ที่ไม่รองรับแท็ก เบราว์เซอร์ของคุณไม่รองรับแท็กเสียง! การบัฟเฟอร์ไฟล์ เมื่อเล่นไฟล์ขนาดใหญ่ สามารถใช้การบัฟเฟอร์ไฟล์ได้ คุณสามารถใช้แอตทริบิวต์ preload สำหรับสิ่งนี้ สามารถรับได้ 3 ค่า:

• ไม่มี - หากคุณไม่ต้องการใช้ไฟล์บัฟเฟอร์
• อัตโนมัติ - หากคุณต้องการให้เบราว์เซอร์บัฟเฟอร์ไฟล์ทั้งหมด
• ข้อมูลเมตา - สำหรับการโหลดเฉพาะข้อมูลบริการ (ระยะเวลาเสียง ฯลฯ )

การควบคุมการเล่นผ่าน JavaScript การควบคุมเครื่องเล่นเสียง HTML5 ผ่าน JavaScript เป็นเรื่องง่ายมาก ตัวอย่างต่อไปนี้แสดงวิธีการ โดยใช้จาวาสคริปต์คุณสามารถสร้างของคุณเองได้ องค์ประกอบพื้นฐานส่วนควบคุมเครื่องเล่นเสียง: เล่นหยุดระดับเสียง + ระดับเสียง -

นั่นคือทั้งหมดสำหรับวันนี้
ฉันหวังว่าบทความนี้จะช่วยให้คุณเข้าใจ ความสามารถพื้นฐานแท็ก HTML5

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

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

ในระยะสั้นมีความสับสนเล็กน้อยที่นี่

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

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

องค์ประกอบเสียง HTML5

องค์ประกอบนี้ใช้งานง่ายมาก ในตัวอย่างของเราวันนี้ เราจะฝัง "White Christmas" ของ Bing Crosby:

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

การสนับสนุนข้ามเบราว์เซอร์

ตัวอย่างข้างต้นไม่น่าจะใช้ได้กับทุกเบราว์เซอร์ นี่คือที่มาของรูปแบบไฟล์

เบราว์เซอร์บางตัวสามารถเล่นไฟล์ .mp3 ได้ แต่ไม่สามารถเล่นไฟล์ .ogg ได้ ในขณะที่เบราว์เซอร์บางตัวเล่นตรงกันข้าม เบราว์เซอร์ส่วนใหญ่สามารถเล่นไฟล์ .wav ได้ แต่เนื่องจากมีขนาดใหญ่ จึงไม่เหมาะที่จะใช้เป็นเสียงสำหรับเว็บไซต์

นี่คือตารางเบราว์เซอร์ที่แสดงการรองรับรูปแบบเสียง:

เบราว์เซอร์ของคุณรองรับรูปแบบใดบ้าง? กำหนดได้โดย

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

แน่นอนว่านั่นหมายความว่าคุณต้องสร้างทั้งเวอร์ชัน MP3 และ OGG ของคุณ ไฟล์เสียง(ช่วยคุณได้) แต่นี่เป็นวิธีเดียวที่จะจัดระเบียบการสนับสนุนข้ามเบราว์เซอร์

Internet Explorer เวอร์ชันก่อนหน้า (เวอร์ชัน 7 และ 8) ไม่รองรับองค์ประกอบเสียงเลย อย่างไรก็ตาม ในบทความถัดไป เราจะมาดูวิธีแก้ไขปัญหานี้กัน

การเล่นเสียงอัตโนมัติ

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

การเพิ่มปุ่มควบคุม

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

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

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

การเล่นแบบวนซ้ำ

การเพิ่มแอตทริบิวต์ loop ให้กับองค์ประกอบเสียงจะทำให้เสียงเล่นได้อย่างไม่มีกำหนด

สิ่งนี้มีประโยชน์สำหรับการเปิดเพลงพื้นหลังหรือเอฟเฟกต์เสียงในเกม

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

คุณลักษณะนี้มีความหมายหลายประการ:

“ไม่มี” – เบราว์เซอร์ไม่ควรกำหนดไฟล์ที่ดาวน์โหลด เหล่านั้น. หากคุณมั่นใจว่าผู้ใช้ส่วนใหญ่จะไม่เล่นไฟล์ ให้ใช้ตัวเลือกนี้ หรือใช้เมื่อคุณต้องการบันทึกแบนด์วิธของเซิร์ฟเวอร์ให้ได้มากที่สุด

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

“อัตโนมัติ” - คุณอนุญาตให้เบราว์เซอร์ดาวน์โหลดไฟล์เสียงได้

ตัวอย่างเช่น:

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

การควบคุมการเล่นผ่านจาวาสคริปต์

สะดวกแบบไหน. องค์ประกอบจาวาสคริปต์– เนื่องจากง่ายต่อการจัดการโดยใช้จาวาสคริปต์ องค์ประกอบเสียงมีพารามิเตอร์และวิธีการควบคุมที่สะดวกมากมาย:

Play() – เริ่มเล่นจากตำแหน่งปัจจุบัน

Pause() – หยุดเล่นที่ตำแหน่งปัจจุบัน

canPlayType(type) – กำหนดว่าเบราว์เซอร์รองรับการเล่นหรือไม่ ประเภทนี้สื่อ;

ระยะเวลา – ระยะเวลาของแทร็กเป็นวินาที

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

การใช้ตัวเลือกและวิธีการที่แนะนำข้างต้น เราสามารถสร้างปุ่มควบคุมพื้นฐานบางปุ่มได้:

เล่นเพลง
หยุดเพลงชั่วคราว
หยุดเพลง
ดูการสาธิต: http://www.elated.com/res/File/articles/authoring/html/html5-audio/javascript-control.html

รองรับ Internet Explorer เวอร์ชันก่อนหน้า

ในกรณีส่วนใหญ่ เบราว์เซอร์ของผู้ใช้จะสนับสนุนองค์ประกอบ HTML5 แต่น่าเสียดายที่เบราว์เซอร์ IE เวอร์ชัน 7 และแม้แต่ 8 ไม่รองรับองค์ประกอบนี้ (แม้ว่าเวอร์ชัน 9 จะรองรับแล้วก็ตาม) สิ่งสำคัญคือต้องพิจารณาเวอร์ชันย้อนกลับสำหรับผู้ใช้ที่ยังคงอยู่ในปี 2551

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

เล่นเพลง
หยุดเพลงชั่วคราว
หยุดเพลง

document.getElementById("playButton").onclick = function() ( document.getElementById("myTuneObj").play() );
document.getElementById("pauseButton").onclick = function() ( document.getElementById("myTuneObj").pause() );
document.getElementById("stopButton").onclick = function() ( document.getElementById("myTuneObj").stop() );

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

อีกวิธีในการย้อนกลับคือการฝัง Flash Player ลงในเพจ ที่นี่ซึ่งพูดถึงการย้อนกลับในรูปแบบของโปรแกรมเล่น Flash

บทสรุป

ในบทความของเราวันนี้ เราได้เรียนรู้วิธีฝังไฟล์เสียงโดยใช้ HTML5 องค์ประกอบเสียงไม่เพียงแต่ใช้งานง่าย แต่เรายังปรับแต่งและควบคุมการเล่นผ่านจาวาสคริปต์ได้อีกด้วย

ต้องการเรียนรู้เพิ่มเติมเกี่ยวกับองค์ประกอบเสียงใน HTML5 หรือไม่ จากนั้นตรวจสอบ

แม้ว่าในปัจจุบันเบราว์เซอร์บางรุ่นจะรองรับการใช้งานไม่ได้ (เช่น IE เวอร์ชันเก่า) แต่คุณสามารถย้อนกลับได้อย่างง่ายดายหากจำเป็น ซึ่งในปัจจุบันนี้พบเห็นได้น้อยลงเรื่อยๆ