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