ข้อมูลเบื้องต้นเกี่ยวกับการสตรีมสื่อ

Derek Herman

Jaroslav Polakovič

ในบทความนี้ คุณจะได้ทราบแนวคิดขั้นสูงยิ่งขึ้นเกี่ยวกับสื่อ สตรีมมิง และในตอนท้าย ควรมีความเข้าใจเป็นอย่างดีถึง กรณีการใช้งาน โปรโตคอล และส่วนขยายสตรีมมิง เรามาเริ่มที่ ให้คำอธิบายว่าสตรีมมิงคืออะไรกันแน่

สตรีมมิงสื่อเป็นวิธีหนึ่งในการส่งและเล่นเนื้อหาสื่อโดย ส่วน แทนที่จะโหลดไฟล์เดียว ซึ่งอาจทำงานช้าถ้าไม่ได้รับการปรับให้เหมาะสม เครือข่าย โปรแกรมเล่นจะอ่านไฟล์ Manifest ที่อธิบายว่าสื่อเป้าหมายมีการ ที่แบ่งออกเป็นส่วนๆ ชิ้นส่วนสื่อต่างๆ จะเย็บต่อกันแบบไดนามิกในภายหลัง กลับมาพร้อมกันที่รันไทม์ ซึ่งอาจจะเป็นอัตราบิตที่ต่างกัน ซึ่งคุณจะได้เรียนรู้ ไว้ทีหลัง

โปรดทราบว่าหากต้องการให้บริการสตรีมมิงบนเว็บไซต์ เซิร์ฟเวอร์ ต้องรองรับส่วนหัวของคำขอ HTTP Range ดูข้อมูลเพิ่มเติมเกี่ยวกับAccept-Ranges ส่วนหัวใน<video> และ <source> แท็กบทความ

กรณีการใช้งานสตรีมมิง

การสร้างกลุ่มสื่อและไฟล์ Manifest ที่จำเป็นซึ่งอธิบายถึงสตรีมนั้นไม่ใช่ ตรงไปตรงมา แต่สตรีมมิงช่วยปลดล็อกกรณีการใช้งานที่น่าสนใจ ไม่สามารถทำได้เพียงแค่ชี้เอลิเมนต์ <video> ไปยังชุดไฟล์ต้นฉบับแบบคงที่ คุณจะได้ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธี เพิ่มสื่อลงในหน้าเว็บในส่วนถัดไป อย่างแรก คุณควรทราบเกี่ยวกับ กรณีการใช้งานบางอย่างสำหรับการสตรีมมัลติมีเดีย หากคุณต้องการก้าวไปไกลกว่าแค่ กำลังโหลดหลายไฟล์ลงในองค์ประกอบ <video>

• สตรีมมิงแบบปรับอัตโนมัติคือการเข้ารหัสกลุ่มสื่อในหลายๆ รูปแบบ อัตราบิต และเนื้อหาสื่อที่มีคุณภาพสูงสุด ซึ่งเหมาะสมกับ แบนด์วิดท์ที่ใช้ได้ในปัจจุบันจะถูกส่งคืนไปยังมีเดียเพลเยอร์
• การถ่ายทอดสดคือรูปแบบการเข้ารหัสเนื้อหาสื่อและทำให้ใช้งานได้ใน แบบเรียลไทม์
• การแทรกสื่อ คือการแทรกสื่ออื่นๆ เช่น โฆษณา ลงไป สตรีมโดยที่โปรแกรมเล่นไม่ต้องเปลี่ยนแหล่งที่มาของสื่อ

โปรโตคอลสตรีมมิง

โปรโตคอลสตรีมมิงที่ใช้กันโดยทั่วไปมากที่สุด 2 รายการบนเว็บคือไดนามิก Adaptive Streaming ผ่าน HTTP (DASH) และ HTTP Live Streaming (HLS) โปรแกรมเล่นที่รองรับโปรโตคอลเหล่านี้จะดึงไฟล์ Manifest ที่สร้างขึ้น คิดหากลุ่มสื่อที่จะขอ แล้วรวมเข้าเป็นขั้นสุดท้าย ประสบการณ์สื่อ

กำลังใช้ <video> เพื่อเล่นสตรีม

เบราว์เซอร์จำนวนมากจะไม่เล่นสตรีมของคุณแบบดั้งเดิม แม้ว่าจะมีบางส่วน รองรับการเล่น HLS แบบดั้งเดิม เบราว์เซอร์โดยทั่วไปจะไม่รองรับ DASH แบบเนทีฟ การเล่นสตรีม ซึ่งหมายความว่าบ่อยครั้งการชี้ <source> เพียงอย่างเดียวก็ไม่เพียงพอ ในเอลิเมนต์ <video> ไปยังไฟล์ Manifest

<video controls>
  <source src="manifest.mpd" type="application/dash+xml">
</video>

ข้อควรระวัง: HTML นี้ถูกต้อง แต่ใช้งานจริงไม่ได้ เบราว์เซอร์จะไม่รองรับการเล่นไฟล์ Manifest ของ DASH ที่เพิ่มลงในพร็อพเพอร์ตี้ src ตั้งแต่แรก

สิ่งที่อาจดูขาดแคลนคือความเข้มแข็งในการแฝงตัว สตรีม ที่มีประสิทธิภาพและแอปพลิเคชันที่ใช้สตรีมจะมีความต้องการแตกต่างกัน

ไฟล์ 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 ของสื่อการสาธิตที่เรียกว่า Kino เพื่อแสดงให้เห็นว่า การพัฒนาเว็บไซต์สื่อสตรีมมิงขั้นพื้นฐาน ซึ่ง การเล่นสื่อแบบออฟไลน์โดยใช้เพียงองค์ประกอบ <video> แบบง่าย มีแพ็กเกจ ในแผนกลยุทธ์ของเราในการสนับสนุนเฟรมเวิร์ก การจัดการสิทธิ์ดิจิทัล และอื่นๆ ใหม่ๆ โปรดกลับมาดูข้อมูลอัปเดตเป็นครั้งคราว หรือขอฟีเจอร์ อ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในบทความ PWA พร้อมสตรีมมิงแบบออฟไลน์

รูปแบบกลุ่มสื่อ

DASH และ HLS จําเป็นต้องใช้กลุ่มสื่อเพื่อเข้ารหัสเนื้อหาที่แตกต่างกันเป็นเวลานาน รูปแบบ อย่างไรก็ตาม ในปี 2016 จะรองรับไฟล์ FMP4 มาตรฐานแบบ Fragment (fMP4) แบบมาตรฐาน เพิ่มลงใน HLS ซึ่งเป็นรูปแบบที่ DASH รองรับเช่นกัน

รองรับกลุ่มวิดีโอที่ใช้คอนเทนเนอร์ fMP4 และตัวแปลงรหัส H.264 โดยใช้โปรโตคอลทั้ง 2 รูปแบบ และผู้เล่นส่วนใหญ่เล่นได้ วิธีนี้ช่วยให้ ผู้ผลิตเนื้อหาให้เข้ารหัสวิดีโอเพียงครั้งเดียว ซึ่งทำให้ประหยัดเวลา และพื้นที่ในดิสก์

เพื่อให้ได้คุณภาพที่ดีกว่าและขนาดไฟล์เล็กลง คุณอาจต้องเลือก เข้ารหัสกลุ่มสื่อหลายๆ ชุดโดยใช้รูปแบบที่มีประสิทธิภาพมากขึ้น เช่น VP9 แต่ก่อนที่เราจะไปให้ไกลขึ้น คุณจะต้องเรียนรู้วิธี เตรียมไฟล์สื่อสำหรับเว็บ เพียงเท่านี้ก็เรียบร้อย