ในบทความนี้ คุณจะได้เรียนรู้เกี่ยวกับแนวคิดขั้นสูงของการสตรีมสื่อ และในตอนท้าย คุณควรเข้าใจกรณีการใช้งาน สตรีม โปรโตคอล และส่วนขยายต่างๆ เป็นอย่างดี มาเริ่มกันที่คำอธิบายว่าสตรีมมิงคืออะไรกัน
สตรีมมิงสื่อเป็นวิธีหนึ่งในการส่งและเล่นเนื้อหาสื่อทีละอย่าง แทนที่จะโหลดไฟล์เดียว ซึ่งอาจช้าหากไม่ได้เพิ่มประสิทธิภาพสำหรับเครือข่าย เครื่องเล่นจะอ่านไฟล์ Manifest ที่อธิบายวิธีแยกสื่อเป้าหมายออกเป็นกลุ่มข้อมูลแต่ละกลุ่ม ระบบจะต่อข้อมูลของกลุ่มสื่อกลับเข้าด้วยกันแบบไดนามิกในภายหลังขณะรันไทม์ ซึ่งอาจใช้อัตราบิตที่แตกต่างกัน ซึ่งคุณจะได้ทราบในภายหลัง
โปรดทราบว่าเซิร์ฟเวอร์ต้องรองรับส่วนหัวคำขอ HTTP Range จึงจะสตรีมบนเว็บไซต์ได้ ดูข้อมูลเพิ่มเติมเกี่ยวกับAccept-Rangesหัวข้อในบทความแท็ก <video> และ <source>
กรณีการใช้งานสตรีมมิง
การสร้างข้อมูลโค้ดสื่อและไฟล์ Manifest ที่จำเป็นซึ่งอธิบายสตรีมนั้นไม่ใช่เรื่องง่าย แต่การสตรีมจะปลดล็อกกรณีการใช้งานที่น่าสนใจบางอย่างที่ทำได้เพียงชี้องค์ประกอบ <video> ไปยังชุดไฟล์ต้นฉบับแบบคงที่ คุณดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีเพิ่มสื่อลงในหน้าเว็บได้ในส่วนถัดไป ก่อนอื่น คุณควรรู้กรณีการใช้งานบางอย่างสำหรับการสตรีมมัลติมีเดียหากต้องการดำเนินการที่มากกว่าแค่การโหลดไฟล์หลายไฟล์ลงในองค์ประกอบ <video>
- การสตรีมมิงแบบปรับอัตราบิตคือระบบจะเข้ารหัสข้อมูลโค้ดของสื่อเป็นอัตราบิตหลายอัตรา แล้วส่งข้อมูลโค้ดของสื่อที่มีคุณภาพสูงสุดซึ่งเหมาะกับแบนด์วิดท์ที่พร้อมใช้งานของไคลเอ็นต์ไปยังโปรแกรมเล่นสื่อ
- การออกอากาศสดคือรูปแบบที่มีการเข้ารหัสข้อมูลโค้ดของสื่อและทำให้พร้อมใช้งานแบบเรียลไทม์
- การแทรกสื่อคือการแทรกสื่ออื่นๆ เช่น โฆษณา ลงในสตรีมโดยที่ผู้เล่นไม่ต้องเปลี่ยนแหล่งที่มาของสื่อ
โปรโตคอลสตรีมมิง
โปรโตคอลสตรีมมิงที่ใช้กันมากที่สุด 2 รายการบนเว็บคือ Dynamic Adaptive Streaming over HTTP (DASH) และ HTTP Live Streaming (HLS) โปรแกรมเล่นที่รองรับโปรโตคอลเหล่านี้จะดึงข้อมูลไฟล์ Manifest ที่สร้างขึ้น หาข้อมูลว่าต้องขอข้อมูลสื่อส่วนใด แล้วรวมข้อมูลเหล่านั้นเข้าด้วยกันเพื่อประสบการณ์การรับชมสื่อขั้นสุดท้าย
การใช้ <video> เพื่อเล่นสตรีม
เบราว์เซอร์จำนวนมากจะไม่เล่นสตรีมของคุณโดยค่าเริ่มต้น แม้ว่าเบราว์เซอร์บางรุ่นจะรองรับการเล่น HLS ในตัว แต่โดยทั่วไปแล้วไม่รองรับการเล่นสตรีม DASH ในตัว ซึ่งหมายความว่าการชี้ <source> ในองค์ประกอบ <video> ไปยังไฟล์ Manifest เพียงอย่างเดียวนั้นไม่เพียงพอ
<video controls>
<source src="manifest.mpd" type="application/dash+xml">
</video>
สิ่งที่ดูเหมือนจะเป็นข้อเสียนั้นอาจกลายเป็นข้อดีในท้ายที่สุด สตรีมมีประสิทธิภาพมากและแอปพลิเคชันที่ใช้สตรีมจะมีความต้องการแตกต่างกัน
ไฟล์ Manifest มักจะอธิบายสื่อรายการเดียวในหลายรูปแบบ ลองนึกถึงอัตราบิตที่แตกต่างกัน แทร็กเสียงหลายๆ แทร็ก และแม้แต่สื่อเดียวกันที่เข้ารหัสในรูปแบบที่ต่างกัน
แอปพลิเคชันบางรายการอาจต้องการเก็บวิดีโอไว้จำนวนมากในบัฟเฟอร์ ส่วนแอปพลิเคชันอื่นๆ อาจต้องการโหลดวิดีโอ 2-3 วินาทีแรกจากตอนที่จะเผยแพร่ล่วงหน้า และบางแอปพลิเคชันอาจต้องการใช้ตรรกะของตนเองสำหรับการสตรีมมิงแบบปรับเปลี่ยนได้ นี่เป็นกรณีที่คุณควรมีฟีเจอร์บางอย่างของเบราว์เซอร์ในตัวเพื่อสร้างสตรีมสื่อสำหรับการเล่น และเราก็มีฟีเจอร์ดังกล่าว
ส่วนขยายแหล่งที่มาของสื่อ
แต่โชคดีที่ W3C ได้กำหนดสิ่งที่เรียกว่า Media Source Extensions (MSE) ซึ่งจะช่วยให้ JavaScript สร้างสตรีมสื่อได้ กล่าวโดยย่อคือ MSE ช่วยให้นักพัฒนาแอปแนบออบเจ็กต์ MediaSource กับองค์ประกอบ <video> และเล่นข้อมูลสื่อที่ส่งไปยังบัฟเฟอร์ที่แนบอยู่กับอินสแตนซ์ MediaSource ได้
ตัวอย่างพื้นฐาน
const videoEl = document.querySelector('video');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener(
'sourceopen',
() => {
const mimeString = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
const buffer = mediaSource.addSourceBuffer(mimeString);
buffer.appendBuffer( /* Video data as `ArrayBuffer` object. */ )
}
);
ตัวอย่างที่เข้าใจง่ายด้านบนแสดงข้อมูลต่อไปนี้
<video>จะถือว่ากำลังรับข้อมูลสื่อจาก URL- URL ที่สร้างขึ้นเป็นเพียงตัวชี้ไปยังอินสแตนซ์
MediaSource - อินสแตนซ์
MediaSourceจะสร้างอินสแตนซ์SourceBufferอย่างน้อย 1 รายการ - จากนั้นเราจะใส่ข้อมูลสื่อไบนารีลงในบัฟเฟอร์ เช่น การใช้
fetch
แม้ว่าแนวคิดพื้นฐานเหล่านี้จะเข้าใจง่ายและเขียนโปรแกรมเล่นวิดีโอที่ใช้งานร่วมกับ DASH และ HLS ขึ้นใหม่ได้ แต่คนส่วนใหญ่มักจะเลือกโซลูชันโอเพนซอร์สที่ใช้งานได้จริงอยู่แล้ว เช่น Shaka Player, JW Player หรือ Video.js เป็นต้น
อย่างไรก็ตาม เราได้สร้าง Media PWA สาธิตชื่อ Kino ซึ่งแสดงวิธีพัฒนาเว็บไซต์สตรีมมิงสื่อพื้นฐานของคุณเองที่ให้บริการการเล่นสื่อแบบออฟไลน์โดยใช้องค์ประกอบ <video> ที่เรียบง่าย เรามีแผนในแผนกลยุทธ์ที่จะสนับสนุนเฟรมเวิร์ก การจัดการสิทธิ์ดิจิทัล ตลอดจนฟีเจอร์อื่นๆ ดังนั้นโปรดกลับมาดูข้อมูลอัปเดตเป็นครั้งคราวหรือขอฟีเจอร์
อ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในบทความ PWA พร้อมสตรีมมิงแบบออฟไลน์
รูปแบบข้อมูลโค้ดของสื่อ
เป็นเวลานานที่ DASH และ HLS กำหนดให้ต้องเข้ารหัสข้อมูลโค้ดสื่อในรูปแบบที่แตกต่างกัน อย่างไรก็ตาม ในปี 2016 ได้มีการเพิ่มการรองรับไฟล์ MP4 ที่มีการแบ่งส่วน (fMP4) มาตรฐานลงใน HLS ซึ่งเป็นรูปแบบที่ DASH รองรับเช่นกัน
กลุ่มวิดีโอที่ใช้คอนเทนเนอร์ fMP4 และตัวแปลงรหัส H.264 รองรับโดยโปรโตคอลทั้งสองและผู้เล่นส่วนใหญ่ก็เล่นได้ ซึ่งช่วยให้ผู้ผลิตเนื้อหาสามารถเข้ารหัสวิดีโอเพียงครั้งเดียว ซึ่งจะประหยัดเวลาและพื้นที่ในดิสก์
หากต้องการให้คุณภาพดีขึ้นและไฟล์มีขนาดเล็กลง คุณอาจต้องเลือกที่จะเข้ารหัสกลุ่มสื่อหลายชุดโดยใช้รูปแบบที่มีประสิทธิภาพมากขึ้น เช่น VP9 แต่ก่อนที่จะดำเนินการต่อ คุณจะต้องดูวิธีเตรียมไฟล์สื่อสำหรับเว็บก่อน