ในบทความนี้ คุณจะได้ทราบแนวคิดขั้นสูงยิ่งขึ้นเกี่ยวกับการสตรีมสื่อ และเมื่อจบหลักสูตรแล้ว คุณควรเข้าใจลักษณะการใช้งาน โปรโตคอล และส่วนขยายต่างๆ ของสตรีมมิงเป็นอย่างดี เรามาเริ่มต้นด้วยการอธิบายว่า สตรีมมิงคืออะไรกันแน่
การสตรีมสื่อเป็นวิธีหนึ่งในการส่งและเล่นเนื้อหาสื่อทีละอย่าง แทนที่จะโหลดไฟล์เดียว ซึ่งอาจทำได้ช้าถ้าไม่ได้เพิ่มประสิทธิภาพสำหรับเครือข่าย โปรแกรมเล่นจะอ่านไฟล์ Manifest ที่อธิบายว่าสื่อเป้าหมายถูกแบ่งเป็นข้อมูลแต่ละส่วนได้อย่างไร ชิ้นส่วนสื่อจะต่อกันแบบไดนามิกในภายหลังตามรันไทม์ ซึ่งอาจเป็นไปได้ว่าอยู่ที่อัตราบิตต่างๆ ซึ่งคุณจะได้เรียนรู้ในภายหลัง
โปรดทราบว่าเพื่อให้บริการสตรีมมิงในเว็บไซต์ของคุณ เซิร์ฟเวอร์ต้องรองรับส่วนหัวของคำขอ HTTP Range ดูข้อมูลเพิ่มเติมเกี่ยวกับส่วนหัว Accept-Ranges ในบทความแท็ก <video> และ <source>
กรณีการใช้งานสตรีมมิง
การสร้างกลุ่มสื่อและไฟล์ Manifest ที่จำเป็นซึ่งอธิบายสตรีมนั้นไม่ใช่รูปแบบง่ายๆ แต่การสตรีมช่วยปลดล็อก Use Case ที่น่าสนใจบางประการ ซึ่งเป็นไปไม่ได้ด้วยการชี้เอลิเมนต์ <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 วินาทีแรกของวิดีโอตอนที่จะเผยแพร่ไว้ล่วงหน้า และบางคนอาจต้องการใช้ตรรกะของตนเองสำหรับสตรีมมิงแบบปรับอัตโนมัติ ตรงนี้คือจุดที่คุณจะต้องมีฟีเจอร์เบราว์เซอร์ในตัว เพื่อสร้างสตรีมสื่อสำหรับเล่น ซึ่งจริงๆ แล้วก็คือมีอยู่ 1 อย่าง
ส่วนขยายแหล่งที่มาของสื่อ
โชคดีที่ 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 เป็นต้น
อย่างไรก็ตาม เราได้สร้าง PWA ของ Media รุ่นเดโมที่เรียกว่า Kino ซึ่งแสดงให้เห็นว่าคุณจะพัฒนาเว็บไซต์สื่อสตรีมมิงขั้นพื้นฐานของคุณเองที่ให้คุณเล่นสื่อแบบออฟไลน์ได้อย่างไรโดยใช้เพียงองค์ประกอบ <video> แบบง่าย เรามีแผนในแผนกลยุทธ์ที่จะสนับสนุนเฟรมเวิร์ก การจัดการสิทธิ์ดิจิทัล ตลอดจนฟีเจอร์อื่นๆ โปรดกลับมาดูข้อมูลอัปเดตเป็นครั้งคราว หรือขอฟีเจอร์
อ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในบทความ PWA พร้อมสตรีมมิงแบบออฟไลน์
รูปแบบกลุ่มสื่อ
DASH และ HLS จําเป็นต้องใช้กลุ่มสื่อเพื่อเข้ารหัสในรูปแบบที่แตกต่างกันเป็นเวลานาน แต่ในปี 2016 ได้มีการเพิ่มการรองรับไฟล์ FMP4 (fMP4) มาตรฐานแบบแบ่งเป็น 2 ส่วนลงใน HLS ซึ่งเป็นรูปแบบที่ DASH รองรับเช่นกัน
กลุ่มวิดีโอที่ใช้คอนเทนเนอร์ fMP4 และตัวแปลงรหัส H.264 รองรับโดยโปรโตคอลทั้งสองและผู้เล่นส่วนใหญ่ก็เล่นได้ ซึ่งช่วยให้ผู้ผลิตเนื้อหาเข้ารหัสวิดีโอเพียงครั้งเดียวได้ จึงประหยัดเวลาและพื้นที่ในดิสก์
เพื่อให้ได้คุณภาพที่ดีขึ้นและลดขนาดไฟล์ลง คุณอาจต้องเลือกเข้ารหัสกลุ่มสื่อหลายๆ ชุดโดยใช้รูปแบบที่มีประสิทธิภาพมากขึ้น เช่น VP9 แต่ก่อนที่จะดำเนินการต่อ คุณจะต้องดูวิธีเตรียมไฟล์สื่อสำหรับเว็บก่อน แล้วค่อยดูว่าจะอย่างไรต่อไป