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