แอนดิว
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 ตอนนี้เบราว์เซอร์ทั้งหมดสามารถเล่นไฟล์ในรูปแบบเหล่านี้ได้ นอกจากนี้ เบราว์เซอร์ Firefox, Chrome และ Opera ยังได้ตกลงที่จะสนับสนุนมาตรฐาน WEBM ในรูปแบบวิดีโอทั่วไป จากมุมมองของฉัน ตัวเลือกที่ดีที่สุดสำหรับการใช้วิดีโอและเสียง HTML5 ในตอนนี้จะเป็นรูปแบบตามการใช้ไฟล์มัลติมีเดียไฟล์เดียวในรูปแบบ MP4 ( H.264) สำหรับวิดีโอและ m4a สำหรับเสียงและเครื่องเล่น JS HTML5 มีเพียงไฟล์เดียวในรูปแบบที่ระบุเท่านั้นที่เชื่อมต่อกับคอนเทนเนอร์เสียงหรือวิดีโอ ปัจจุบันเบราว์เซอร์ส่วนใหญ่สามารถเล่นไฟล์ MP4 ได้ ไลบรารี JS ที่เชื่อมต่อจะจัดรูปแบบเครื่องเล่นที่สร้างไว้ในเบราว์เซอร์ หากเบราว์เซอร์ไม่รองรับรูปแบบ mp4 / m4a ในกรณีนี้เครื่องเล่น JS จะใช้การเชื่อมต่อของเครื่องเล่น Flash เพื่อเล่นไฟล์มัลติมีเดีย เมื่อพิจารณาว่ารูปแบบ mp4 ได้รับความนิยมอย่างมาก เราหวังว่าจะมีโอกาสเกิดปัญหาในการเล่นในเบราว์เซอร์ต่ำ รูปแบบนี้ต้องการไฟล์มัลติมีเดียเพียงไฟล์เดียวในรูปแบบที่ระบุซึ่งช่วยประหยัดพื้นที่ดิสก์และทรัพยากรสำหรับการประมวลผลไฟล์ นอกจากนี้ โครงการดังกล่าวจะมีความถูกต้องเชิงกลยุทธ์มากขึ้น เนื่องจากมีแนวโน้มว่าเบราว์เซอร์จะใช้งานวิดีโอและเสียง HTML5 ได้ดีขึ้นมากขึ้นเรื่อยๆ
หากต้องการระบุไฟล์ที่จะเล่นให้ผู้เล่น HTML5 ทราบ นอกเหนือจาก URL ของไฟล์แล้ว คุณต้องส่งประเภท 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 เหมาะสำหรับครอบครัว = true uploaddate = 31-12-2558 description = คำอธิบายโดยย่อสำหรับวิดีโอ... url href = URL ไปยัง file.mp4 text = ชื่อผู้แต่งวิดีโอ itemType = http://schema.org/Person url href = URL ไปยังผู้เขียน ข้อความหน้าเว็บ = ชื่อผู้เขียน name = ชื่อผู้เขียน image = 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 ของแท็ก หรืออนุญาตให้คุณกำหนดเส้นทางไปยังไฟล์มัลติมีเดียในแท็กได้ทันที เส้นทางสามารถเป็นได้ทั้งแบบสมบูรณ์ โดยระบุโปรโตคอลและโดเมน หรือสัมพันธ์กับรูทของไซต์ปัจจุบัน คุณยังสามารถระบุเส้นทางไปยังไฟล์ในแท็กที่ฝังอยู่ในคอนเทนเนอร์เสียงหรือวิดีโอได้< source src=" URL"> .
- แอตทริบิวต์โปสเตอร์จะใช้เฉพาะในแท็ก และระบุ URL ของรูปภาพ (gif, PNG, jpeg ฯลฯ) ที่จะแสดงในขณะที่วิดีโอไม่พร้อมใช้งาน หากไม่ได้ตั้งค่าแอตทริบิวต์โปสเตอร์ โปรแกรมเล่นเบราว์เซอร์จะพยายามแสดงเฟรมแรกของวิดีโอ
- แอตทริบิวต์ความกว้างและความสูงจะใช้กับแท็กเท่านั้น และตั้งค่าความกว้างและความสูงของพื้นที่เล่นของเครื่องเล่นวิดีโอตามลำดับ ค่านี้คาดว่าจะเป็นจำนวนเต็มบวก ซึ่งระบุเป็นพิกเซลหรือเปอร์เซ็นต์ การตั้งค่าแอตทริบิวต์เหล่านี้จะส่งผลต่อขนาดการแสดงผลของวิดีโอ แต่จะไม่เปลี่ยนอัตราส่วนภาพของวิดีโอ วิดีโอจะปรับตามขนาดที่ระบุโดยยังคงสัดส่วนไว้ หากขนาดที่ระบุไม่ตรงกับสัดส่วนวิดีโอ ก็จะมีแถบสีเข้มตามด้านบนและ/หรือขอบด้านข้างของวิดีโอ ดังนั้นเมื่อตั้งค่าพารามิเตอร์เหล่านี้ ขอแนะนำให้เลือกอัตราส่วนให้เหมือนกับวิดีโอที่กำลังเล่น หรือตั้งค่าเฉพาะความกว้าง จากนั้นโปรแกรมเล่นจะปรับความสูงเอง
- หากไม่ได้ระบุพารามิเตอร์อย่างใดอย่างหนึ่งหรือทั้งสองอย่าง พารามิเตอร์ที่ไม่ระบุจะถูกนำมาจากขนาดรูปภาพที่เกี่ยวข้องซึ่งระบุไว้ในแอตทริบิวต์โปสเตอร์
- หากไม่มีแอตทริบิวต์โปสเตอร์ พารามิเตอร์เหล่านี้จะถูกตั้งค่าดังนี้: สำหรับความกว้าง = 300 px และสำหรับความสูง = 150px
- เพื่อไม่ให้คำนวณและประสานขนาดของพื้นที่วิดีโอตามสัดส่วนของคลิป ฉันขอแนะนำให้ตั้งค่าพารามิเตอร์ความกว้างเพียงตัวเดียว จากนั้นความสูง (ความสูง) ของพื้นที่เล่นจะถูกเลือกโดยอัตโนมัติตามสัดส่วนของวิดีโอ .
- แอตทริบิวต์ปิดเสียง: อย่างใดอย่างหนึ่งหรือ
- แอตทริบิวต์ crossorigin บอกให้เบราว์เซอร์ดำเนินการคำขอ CORS สำหรับองค์ประกอบนี้ ตามค่าเริ่มต้น ไม่มีแอตทริบิวต์ ซึ่งหมายความว่าไม่ได้ใช้คำขอ CORS เลย หากมีแอตทริบิวต์อยู่ ค่าที่เป็นไปได้จะเป็นแบบไม่ระบุชื่อและ use-credentials CORS () เป็นเทคโนโลยีในเบราว์เซอร์สมัยใหม่ที่ช่วยให้คุณจัดการสิทธิ์ในการโหลดทรัพยากรบนหน้าเว็บปัจจุบันจากโดเมนอื่นนอกเหนือจากโดเมนของหน้าปัจจุบัน การสนับสนุนเบราว์เซอร์สำหรับมาตรฐาน CORS ช่วยให้คุณสามารถใช้การแลกเปลี่ยนข้อมูลข้ามโดเมนที่ปลอดภัยโดยดำเนินการคำขอพิเศษ (ส่วนหัว) ไปยังโดเมนของหน้าปัจจุบันเพื่อพิจารณาว่าทรัพยากรจากโดเมนอื่นที่ระบุได้รับอนุญาตให้โหลดบนหน้านี้หรือไม่ เพื่อตอบสนองต่อคำขอดังกล่าว เซิร์ฟเวอร์จะต้องระบุโดเมนที่อนุญาตให้ดาวน์โหลดทรัพยากรได้
- คุณลักษณะ 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"
แอตทริบิวต์ป้ายกำกับของแท็กระบุชื่อแทร็กที่จะแสดงในเครื่องเล่น หากไม่ได้ตั้งค่าแอตทริบิวต์ เบราว์เซอร์จะแสดงชื่อบริการ
แอตทริบิวต์เริ่มต้นของแท็กจะระบุการเลือกแทร็กนี้ตามค่าเริ่มต้น หากมีแทร็กอื่นในคอนเทนเนอร์วิดีโอ มีเพียงแท็กเดียวเท่านั้นที่สามารถมีแอตทริบิวต์เริ่มต้นได้ ควรวางแทร็กเริ่มต้นก่อนจากแทร็กอื่นๆ ที่เชื่อมต่ออยู่จนกระทั่งเมื่อไม่นานมานี้ การฝังเสียงลงในเว็บเพจไม่ใช่เรื่องง่าย โดยทั่วไป มีบางอย่างที่ให้การใช้งานที่ชาญฉลาดและดีกว่า แต่วิธีการส่วนใหญ่จะจำกัดให้คุณใช้เบราว์เซอร์และปลั๊กอินบางตัวเท่านั้น
ด้วยการถือกำเนิดของเทคโนโลยี Flash ในตลาดงานนี้จึงง่ายขึ้นมากเนื่องจากปลั๊กอิน Flash ช่วยให้คุณสามารถฝังภาพเคลื่อนไหวหรือเสียงลงในเพจได้และเทคโนโลยีนี้ได้รับการสนับสนุนโดยเบราว์เซอร์ส่วนใหญ่ แต่ความต้องการแฟลชก็ค่อยๆ หายไปหลังจากการเปิดตัวอุปกรณ์นวัตกรรมจาก Apple ได้แก่ iPhone และ iPad ดังที่คุณทราบโดยพื้นฐานแล้ว Apple ไม่ได้จัดเตรียมอุปกรณ์ที่รองรับ Flash และจำนวนผู้ใช้ผลิตภัณฑ์ก็เพิ่มขึ้นอย่างรวดเร็ว
ในระยะสั้นมีความสับสนเล็กน้อยที่นี่
โชคดีที่ 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 เวอร์ชันเก่า) แต่คุณสามารถย้อนกลับได้อย่างง่ายดายหากจำเป็น ซึ่งในปัจจุบันนี้พบเห็นได้น้อยลงเรื่อยๆ
เนื่องจากมีการเชื่อมต่ออินเทอร์เน็ตที่รวดเร็วเพียงพอ Flash จึงเป็นเพียงเครื่องมือเดียวสำหรับเล่นเสียงบนเว็บไซต์ แต่ HTML5 จะเปลี่ยนวิธีการเล่นเสียงบนอินเทอร์เน็ตโดยพื้นฐาน ในบทความนี้ ฉันต้องการอธิบายรายละเอียดเกี่ยวกับวิธีใช้แท็กในไซต์ของคุณ
เราใช้มันเพื่อแทรกไฟล์เสียงลงในเพจ ด้านล่างนี้คือตัวอย่างที่ง่ายที่สุดของการใช้แท็ก โดยจะโหลดไฟล์ MP3 และเล่นมัน สังเกตแอตทริบิวต์ autopaly ซึ่งใช้ในการเล่นเสียงโดยอัตโนมัติ อย่างไรก็ตาม คุณไม่ควรเล่นเสียงบนเว็บไซต์โดยอัตโนมัติ เนื่องจากจะรบกวนผู้ใช้- การเล่นเสียงแบบวนซ้ำ ต้องการวนซ้ำเสียงหรือไม่? คุณลักษณะ loop จะช่วยให้คุณทำสิ่งนี้ได้ แต่ขอย้ำอีกครั้ง คุณไม่ควรใช้การเล่นอัตโนมัติและการเล่นวนซ้ำมากเกินไป หากคุณไม่ต้องการให้ผู้ใช้ออกจากไซต์ก่อนเวลาอันควร
- การแสดงส่วนควบคุม แทนที่จะให้เสียงเล่นโดยอัตโนมัติ ซึ่งเป็นแนวทางปฏิบัติที่ไม่ดีอย่างแน่นอน คุณควรอนุญาตให้แสดงส่วนควบคุมบางอย่างในเบราว์เซอร์ เช่น ปุ่มระดับเสียงและปุ่มเล่น (หยุดชั่วคราว) ทำได้ง่ายเพียงเพิ่มแอตทริบิวต์การควบคุม
- รูปแบบไฟล์ที่แตกต่างกัน แท็กได้รับการสนับสนุนโดยเบราว์เซอร์สมัยใหม่ส่วนใหญ่ แต่ปัญหาคือเบราว์เซอร์ที่ต่างกันรองรับรูปแบบไฟล์ที่แตกต่างกัน ตัวอย่างเช่น Safari สามารถเล่น MP3 ได้ แต่ Firefox ไม่สามารถทำได้ และเล่นไฟล์ OGG แทน วิธีแก้ไขปัญหานี้คือการใช้ทั้งสองรูปแบบเพื่อให้ผู้เยี่ยมชมทุกคนสามารถได้ยินเสียงได้ ไม่ว่าพวกเขาจะใช้เบราว์เซอร์ใดก็ตาม
นั่นคือทั้งหมดสำหรับวันนี้
ฉันหวังว่าบทความนี้จะช่วยให้คุณเข้าใจความสามารถพื้นฐานของแท็ก HTML5
1. บนโฮสติ้งที่เว็บไซต์ของคุณตั้งอยู่ ในไดเร็กทอรีราก (โฟลเดอร์ที่มีไฟล์ดัชนี) ให้สร้างโฟลเดอร์เสียง ในอนาคตคุณจะวางไฟล์เสียงทั้งหมดลงไป
3. ตอนนี้เลือกไฟล์ที่คุณต้องการ โดยควรอยู่ในรูปแบบ MP3 สร้างโฟลเดอร์เสียงในรูทของไซต์แล้วอัปโหลด
4. สิ่งที่เหลืออยู่คือการใส่รหัสการเชื่อมต่อเครื่องเล่น เหมาะสำหรับไซต์ใด ๆ ในตำแหน่งที่ถูกต้องคุณเพียงแค่ต้องระบุเส้นทางไปยังไฟล์เครื่องเล่นและไฟล์เสียงตามลำดับโดยแทนที่คำว่า your_domain และชื่อไฟล์เสียง:
และทุกอย่างพร้อมแล้ว! คุณสามารถดูตัวอย่างการทำงานได้
วิธีแรกคือแท็กฝัง องค์ประกอบที่ฝังไว้ใช้ในการโหลดและแสดงออบเจ็กต์ (เช่น ไฟล์วิดีโอ ภาพยนตร์แฟลช ไฟล์เสียงบางไฟล์ ฯลฯ) ที่เบราว์เซอร์ไม่เข้าใจในตอนแรก
ไวยากรณ์ค่อนข้างง่าย:
ไม่จำเป็นต้องมีแท็กปิด
ตอนนี้ดูตัวอย่างบันทึกที่มีคุณลักษณะและด้านล่างด้วยการถอดรหัส:
ฝังแอตทริบิวต์แท็กสำหรับการเล่นเสียงในรูปแบบ html
ความกว้าง - ความกว้างของแผงเป็นพิกเซล (หรือเปอร์เซ็นต์)
ความสูง - ความสูงของแผงเป็นพิกเซล (หรือเปอร์เซ็นต์)
align - ตำแหน่งของแผงที่สัมพันธ์กับข้อความ ค่าที่เป็นไปได้คือซ้าย, ขวา, กึ่งกลาง
ซ่อนเร้น - อนุญาตให้คุณซ่อนพาเนล ค่าแอตทริบิวต์: จริง - พาเนลถูกซ่อน, เท็จ - มองเห็นพาเนลได้ (ค่าเริ่มต้น)
เริ่มอัตโนมัติ - จริง - โปรแกรมเล่นจะเริ่มโดยอัตโนมัติเมื่อโหลดหน้า, เท็จ - รอให้กดปุ่มเล่น
loop - loop, true - แทร็กจะเล่นเป็นวงกลมและหากเป็นเท็จ - เพียงครั้งเดียว
วิธีที่สอง.
เก่ามาก แต่ใช้งานได้จริง) เพิ่มทำนองลงในโฟลเดอร์ (ไดเร็กทอรี) เดียวกับที่ไฟล์ของคุณตั้งอยู่ และในส่วนเนื้อหาให้เขียนโค้ดต่อไปนี้:
ด้วยเหตุนี้ หลังจากโหลดเพจแล้ว ทำนองที่คุณระบุในแท็ก bgsound จะส่งเสียง ตอนนี้เรามาดูคุณสมบัติของแท็กกันดีกว่า:
src - เส้นทางไปยังไฟล์เสียงของคุณ
วนซ้ำ - ทำซ้ำเมโลดี้กี่ครั้ง (ถ้า -1 ให้เล่นซ้ำไม่รู้จบ)
ยอดคงเหลือ - ค่าสมดุลสเตอริโอ (ตั้งแต่ -10,000 ถึง 10,000)
ระดับเสียง - ระดับเสียงการเล่นเมโลดี้ โดยที่ 0 คือค่าสูงสุด และ -10,000 คือค่าต่ำสุด
อย่างไรก็ตาม จะไม่มีวิธีการควบคุมผู้เล่นแต่อย่างใด - ทุกครั้งที่รีเฟรชหน้า แทร็กจะถูกเล่นอีกครั้ง
หลังจากอธิบายวิธีการแทรกเพลงพื้นหลังแล้ว ฉันอยากจะห้ามคุณจากสิ่งนี้ เนื่องจากตามกฎแล้วผู้ใช้ส่วนใหญ่มักจะฟังเพลงอยู่แล้วเมื่อพวกเขาเยี่ยมชมเว็บไซต์ต่างๆ ดังนั้นเพลงประกอบจึงทำได้เพียงบังคับให้เขาปิดแท็บกับเว็บไซต์เท่านั้นการแทรกเสียงและเพลงใน HTML5 - แท็กเสียง
เสียง - แท็กคู่ที่กำหนดเสียงพื้นหลัง เพลง หรือสตรีมเสียงอื่น ๆ บนไซต์
แอตทริบิวต์แท็กเสียง
เล่นอัตโนมัติ - ไฟล์จะเล่นทันทีเมื่อโหลดหน้า (คล้ายกับเพลงพื้นหลัง bgsound)
ควบคุม - แสดงแผงควบคุมเครื่องเล่นในเบราว์เซอร์
วนซ้ำ - เล่นไฟล์อีกครั้งหลังจากสิ้นสุด
โหลดล่วงหน้า - ไฟล์เสียงจะถูกโหลดพร้อมกับการโหลดหน้า
src - เส้นทางไปยังไฟล์เสียง (mp3 หรือ ogg)
โค้ดตัวอย่างพร้อมแท็กเสียง
แท็กเสียง
เสียงในรูปแบบ HTML 5
เบราว์เซอร์ของคุณไม่รองรับแท็กเสียง
ดาวน์โหลดเพลง
ก่อนหน้านี้เบราว์เซอร์ไม่มีความสามารถในตัวเพื่อรองรับเนื้อหาเสียงและวิดีโอ แต่ด้วยการพัฒนาอินเทอร์เน็ต การรองรับองค์ประกอบมัลติมีเดียเนื่องจากคุณสมบัติของเบราว์เซอร์สมัยใหม่จึงกลายเป็นสิ่งจำเป็น HTML5 เปิดตัวองค์ประกอบใหม่และ ซึ่งได้รับการสนับสนุนในเบราว์เซอร์สมัยใหม่ทั้งหมด วัตถุประสงค์หลักของแท็กคือการเพิ่มเนื้อหาเสียงลงในเพจ
| เบราว์เซอร์ MP3 Wav Ogg | เบราว์เซอร์ MP3 Wav Ogg | เบราว์เซอร์ MP3 Wav Ogg |
| เบราว์เซอร์ MP3 Wav Ogg | เบราว์เซอร์ MP3 Wav Ogg | เบราว์เซอร์ MP3 Wav Ogg |
| เบราว์เซอร์ MP3 Wav Ogg | เบราว์เซอร์ MP3 Wav Ogg | เบราว์เซอร์ MP3 Wav Ogg |
| เบราว์เซอร์ MP3 Wav Ogg | เบราว์เซอร์ MP3 Wav Ogg | โอเปร่า |
| เบราว์เซอร์ MP3 Wav Ogg | โอเปร่า | โอเปร่า |
| เบราว์เซอร์ MP3 Wav Ogg | เบราว์เซอร์ MP3 Wav Ogg | โอเปร่า |
- ขอบ
- รูปแบบ MP3 เป็นตัวแปลงสัญญาณและคอนเทนเนอร์ในเวลาเดียวกัน มีการใช้กันอย่างแพร่หลายทุกที่เพื่อโฮสต์เพลงที่ดาวน์โหลด
- คอนเทนเนอร์ Ogg + ตัวแปลงสัญญาณเสียง Vorbis โดยทั่วไปเขาจะถูกเรียกว่า "Ogg Vorbis" ได้รับการพัฒนาโดยชุมชน Xiph เพื่อแทนที่ MP3, AAC และ WMA ที่เป็นกรรมสิทธิ์
ประเภท MIME สำหรับเสียง:
| เสียง/mpeg |
| เสียง/ogg |
| เสียง/wav |
| 4.0 | 3.5 | 10.5 | 4.0 | 9.0 | 12.0 |
| เล่นอัตโนมัติ | เล่นอัตโนมัติ | ระบุว่าเสียงจะเริ่มโดยอัตโนมัติทันทีที่พร้อม |
| การควบคุม | การควบคุม | แสดงส่วนควบคุมไฟล์สื่อในตัว (ปุ่มเล่น/หยุดชั่วคราว แถบเลื่อนที่ให้คุณข้ามไปยังส่วนใดส่วนหนึ่งของวิดีโอ และตัวควบคุมระดับเสียง) |
| วนซ้ำ | วนซ้ำ | เล่นไฟล์วนซ้ำ (เพลงของเราดี - เริ่มใหม่).. |
| ปิดเสียง | ปิดเสียง | แสดงว่าเสียงจะถูกปิด (ไม่มีเสียง) |
| โหลดล่วงหน้า | อัตโนมัติ ข้อมูลเมตา ไม่มี | ระบุวิธีการโหลดเสียงเมื่อโหลดเพจ แอ็ตทริบิวต์จะถูกละเว้นหากมีแอ็ตทริบิวต์เล่นอัตโนมัติอยู่ |
| src | URL | ระบุ URL ของไฟล์เสียง |
องค์ประกอบใช้แอตทริบิวต์เดียวกันกับองค์ประกอบ ยกเว้นแอตทริบิวต์ความกว้าง ความสูง และโปสเตอร์ เช่นเดียวกับการใช้องค์ประกอบ คุณสามารถมีตัวเลือกรูปแบบเสียงได้หลายรูปแบบโดยใช้องค์ประกอบ ดังที่แสดงในตัวอย่างด้านล่าง:
เสียงใน HTML5 เสียงใน HTML5 เบราว์เซอร์ของคุณไม่รองรับรูปแบบเสียงนี้คุณสามารถดาวน์โหลดไฟล์นี้ได้จากลิงค์ด้านล่าง:
ดาวน์โหลด
ในตัวอย่างนี้ เรา:
