ผู้ใช้ชอบสื่อ โดยเฉพาะวิดีโอ เนื่องจากสื่อมีความสนุกและสาระความรู้ วิดีโอเป็นวิธีรับข้อมูลได้ง่ายกว่าข้อความในอุปกรณ์เคลื่อนที่ วิดีโอไม่ควรใช้แบนด์วิดท์มากกว่าที่มีให้เพื่อมอบประสบการณ์การใช้งานที่ดีแก่ผู้ใช้ ผู้ใช้ควรใช้แอปได้ไม่ว่าจะดูบนอุปกรณ์ใดก็ตาม ผู้ใช้ไม่ควรต้องรอให้สื่อดาวน์โหลด ไม่มีใครชอบเมื่อกดเล่นแล้วไม่มีอะไรเกิดขึ้น
คุณคงเคยดูวิดีโอในอุปกรณ์ของคุณเองแล้ว ซึ่งหมายความว่าไม่มีอะไรในย่อหน้าสุดท้ายที่ทำให้คุณประหลาดใจ ตอนนี้คุณต้องดูวิธีใส่วิดีโอหรือไฟล์สื่ออื่นๆ ในเว็บไซต์ของคุณเอง ข้อกำหนดทางเทคนิคในการเพิ่มสื่อควรส่งเสริมประสบการณ์ของผู้ใช้
ข้อกำหนดทางเทคนิค
- ไฟล์สื่อเวอร์ชันต่างๆ อยู่ในรูปแบบที่เว็บรองรับโดยทั่วไปซึ่งมีทั้งสตรีมเสียงและสตรีมวิดีโอ
- ความละเอียดเหมาะสมกับอุปกรณ์ของผู้ใช้
- อัตราบิตไม่ทำให้แบนด์วิดท์เครือข่ายของผู้ใช้ทำงานหนักเกินไป
- ผลลัพธ์จะดูได้ในเบราว์เซอร์หลักทุกรุ่นที่ใช้เทคโนโลยีที่เหมาะสม
- ไฟล์ได้รับการเข้ารหัส (ไม่บังคับ)
ส่วนสื่อของเว็บไซต์นี้จะช่วยให้คุณปฏิบัติตามข้อกำหนดทางเทคนิคเหล่านี้ได้ ไม่ต้องกังวลหากแนวคิดเหล่านี้ยังดูเข้าใจยากอยู่ เราจะอธิบายข้อมูลเหล่านี้ไปเรื่อยๆ ในบทความทั้งหมด ในส่วนแรก คุณจะได้เรียนรู้เกี่ยวกับแนวคิดพื้นฐานของสื่อ จากนั้นจะดูวิธีเพิ่มสื่อลงในเว็บในส่วนที่ 2 และในส่วนสุดท้าย คุณจะได้ดูการใช้งานจริงพร้อมเทคนิคขั้นสูงบางอย่างในการใช้สื่อบนเว็บ
การแสดงวิดีโอบนเว็บ
คุณใช้แนวทางต่อไปนี้ได้เมื่อแสดงวิดีโอในเว็บไซต์
- อัปโหลดวิดีโอไปยังผู้ให้บริการโฮสติ้งสื่อ เช่น YouTube หรือ Vimeo ตัวเลือกเหล่านี้กำหนดให้คุณฝังโปรแกรมเล่นภายในเว็บไซต์
- การฝังแบบโฮสต์เองขั้นพื้นฐานโดยใช้องค์ประกอบ
<video>และ<audio>ของ HTML - การฝังที่สมบูรณ์ยิ่งขึ้นโดยใช้คลังวิดีโอ เช่น Shaka Player, JW Player หรือ Video.js
- การสร้างเซิร์ฟเวอร์สื่อและแอปพลิเคชันสตรีมมิงของคุณเอง
เว็บไซต์นี้ครอบคลุมข้อมูลเบื้องต้นเกี่ยวกับการฝังสื่อเป็นหลัก อย่างไรก็ตาม เราจะกล่าวถึงหัวข้อขั้นสูงบางอย่างเพื่อช่วยให้คุณเริ่มต้นเส้นทางการสร้างแอปพลิเคชันสตรีมมิงสื่อของคุณเอง การสร้าง PWA ประเภทนี้ไม่ใช่เรื่องง่าย เราจึงสร้าง Media PWA ที่รองรับการทำงานแบบออฟไลน์ไว้ใช้เป็นข้อมูลอ้างอิง ซึ่งจะแสดงทั้งวิธีดำเนินการและระดับความยาก แอปพลิเคชันนี้ไม่ใช่ข้อเสนอที่พร้อมใช้งานจริงหรือเป็นคู่แข่งกับบริการอย่าง YouTube หรือ Vimeo แต่จะเป็นจุดเริ่มต้นให้คุณได้เรียนรู้สิ่งใหม่ๆ ที่ท้าทาย
ความจริงแล้ว การสร้างบริการสื่อที่โฮสต์ซึ่งแข่งขันกับบริการที่มีอยู่ต้องใช้ทีมวิศวกรผู้เชี่ยวชาญและเวลาทำงานหลายพันชั่วโมง เว้นแต่เป้าหมายของคุณจะมุ่งเข้าสู่ตลาดนั้นในฐานะคู่แข่ง คุณควรใช้วิธีอื่น คุณควรทำความเข้าใจเทคโนโลยีนี้ แม้ว่าจะไม่ได้เปิดตัวแอปพลิเคชันหรือวิดีโอเพลเยอร์ของคุณเอง แต่การสำรวจและทดลองใช้การรองรับเบราว์เซอร์ที่ทันสมัยก็มีประโยชน์ หรืออย่างน้อยก็ใช้คลังวิดีโอที่มีอยู่
สิ่งที่เราจะได้เรียนรู้
คอลเล็กชัน media ประกอบด้วย 3 ส่วน ในส่วนแรกนี้ เราจะอธิบายแนวคิดและข้อมูลเบื้องต้นเกี่ยวกับการเพิ่มสื่อลงในเว็บไซต์ ซึ่งรวมถึงการอธิบายวิธีรวมไฟล์สื่อเข้าด้วยกัน ข้อมูลเบื้องต้นเกี่ยวกับแอปพลิเคชันที่คุณจะต้องเตรียมไฟล์สำหรับเว็บ และแนวคิดสตรีมมิง ส่วนที่สองจะอธิบายวิธีเตรียมไฟล์และแปลงไฟล์เป็นรูปแบบต่างๆ รวมถึงวิธีเพิ่มการเข้ารหัส (ไม่บังคับ) ในส่วนสุดท้าย เราจะแสดงวิธีฝังไฟล์สื่อในหน้าเว็บ พูดคุยเกี่ยวกับแนวทางปฏิบัติแนะนำสำหรับการเล่นอัตโนมัติ การใช้เฟรมเวิร์กสื่อ การนำวิดีโอไปใช้แบบออฟไลน์ และการทำให้วิดีโอเข้าถึงได้
ข้อมูลมีมากมาย ดังนั้นเรามาเริ่มกันที่ข้อมูลเบื้องต้นเกี่ยวกับไฟล์สื่อ