แท็ก <วิดีโอ> และ <แหล่งที่มา>

Derek Herman

Joe Medley

Sam Dutton

คุณได้เตรียมไฟล์วิดีโอสำหรับเว็บอย่างถูกต้องแล้ว โดยระบุขนาดและค่าความละเอียดที่ถูกต้อง รวมถึงสร้างไฟล์ WebM และ MP4 แยกกันสำหรับเบราว์เซอร์ต่างๆ

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

ระบุไฟล์เดียว

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

<video src="chrome.webm" type="video/webm">
    <p>Your browser cannot play the provided video file.</p>
</video>

ระบุรูปแบบไฟล์หลายรูปแบบ

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

ตัวอย่างด้านล่างจะสร้างวิดีโอที่ฝังไว้ซึ่งใช้เป็นตัวอย่างในส่วนหลังของบทความนี้

<video controls>
  <source src="chrome.webm" type="video/webm">
  <source src="chrome.mp4" type="video/mp4">
  <p>Your browser cannot play the provided video file.</p>
</video>

ลองใช้ใน Glitch

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

วิธีนี้มีข้อดีหลายประการเมื่อเทียบกับการแสดง HTML หรือสคริปต์ฝั่งเซิร์ฟเวอร์ที่แตกต่างกัน โดยเฉพาะอย่างยิ่งในอุปกรณ์เคลื่อนที่

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

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

คุณสามารถดูรายละเอียดได้หลายวิธี โปรดดูข้อมูลเบื้องต้นเกี่ยวกับสื่อดิจิทัลสำหรับผู้ที่สนใจ A Digital Media Primer for Geeks เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของวิดีโอและเสียง บนเว็บ นอกจากนี้ คุณยังใช้ การแก้ไขข้อบกพร่องระยะไกล ในเครื่องมือสำหรับนักพัฒนาเว็บเพื่อเปรียบเทียบ กิจกรรมเครือข่าย กับแอตทริบิวต์ประเภท และ ไม่มีแอตทริบิวต์ประเภทได้ด้วย

ระบุเวลาเริ่มต้นและเวลาสิ้นสุด

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

หากต้องการใช้ส่วนของสื่อ ให้เพิ่ม #t=[start_time][,end_time] ลงใน URL ของสื่อ เช่น หากต้องการเล่นวิดีโอตั้งแต่ 5 ถึง 10 วินาที ให้ระบุดังนี้

<source src="chrome.webm#t=5,10" type="video/webm">

นอกจากนี้ คุณยังระบุเวลาในรูปแบบ <hours>:<minutes>:<seconds> ได้ด้วย เช่น #t=00:01:05 จะเริ่มวิดีโอที่ 1 นาที 5 วินาที หากต้องการเล่นวิดีโอเฉพาะ 1 นาทีแรก ให้ระบุ #t=,00:01:00

คุณสามารถใช้ฟีเจอร์นี้เพื่อแสดงวิดีโอเดียวกันหลายๆ มุมมอง เช่น จุดคิวในดีวีดี โดยไม่ต้องเข้ารหัสและแสดงไฟล์หลายไฟล์

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

โชคดีที่คุณสามารถทำได้ในเครื่องมือสำหรับนักพัฒนาเว็บของเบราว์เซอร์ เช่น ใน Chrome จะอยู่ในแผงเครือข่าย มองหาส่วนหัว Accept-Ranges และตรวจสอบว่ามีค่าเป็น bytes ในรูปภาพ ฉันได้วาดกรอบสีแดงรอบๆ ส่วนหัวนี้ หากไม่เห็น bytes เป็นค่า คุณจะต้องติดต่อผู้ให้บริการโฮสติ้ง

ใส่ภาพโปสเตอร์

เพิ่มแอตทริบิวต์โปสเตอร์ลงในองค์ประกอบ video เพื่อให้ผู้ชมทราบเนื้อหาทันทีที่องค์ประกอบโหลดขึ้น โดยไม่ต้องดาวน์โหลดวิดีโอหรือเริ่มเล่น

<video poster="poster.jpg" ...>
  …
</video>

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

ไม่ควรทำ

หากไม่มีภาพโปสเตอร์สำรอง วิดีโอจะดูเสีย

ควรทำ

ภาพโปสเตอร์สำรองจะทำให้ดูเหมือนว่ามีการจับภาพเฟรมแรก

ตรวจสอบว่าวิดีโอไม่ล้นคอนเทนเนอร์

เมื่อองค์ประกอบวิดีโอมีขนาดใหญ่เกินไปสำหรับวิวพอร์ต องค์ประกอบดังกล่าวอาจล้นคอนเทนเนอร์ ทำให้ผู้ใช้ดูเนื้อหาหรือใช้ตัวควบคุมไม่ได้

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

สำหรับการใช้งานง่ายๆ เช่นที่ฉันอธิบายไว้ที่นี่ ให้ใช้ CSS Media Queries เพื่อ ระบุขนาดขององค์ประกอบตามขนาดวิวพอร์ต โดย max-width: 100% จะช่วยคุณได้

สำหรับเนื้อหาสื่อใน iframe (เช่น วิดีโอ YouTube) ให้ลองใช้วิธีที่ปรับเปลี่ยนตามอุปกรณ์ (เช่น วิธีที่ John Surdakowski เสนอ)

CSS

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML

<div class="video-container">
  <iframe
    src="//www.youtube.com/embed/l-BA9Ee2XuM"
    frameborder="0"
    width="560"
    height="315"
  ></iframe>
</div>

ลองใช้

เปรียบเทียบตัวอย่างที่ปรับเปลี่ยนตามอุปกรณ์responsive sampleกับเวอร์ชันที่ไม่ปรับเปลี่ยนตามอุปกรณ์unresponsive version คุณจะเห็นว่าเวอร์ชันที่ไม่ปรับเปลี่ยนตามอุปกรณ์ไม่ได้มอบประสบการณ์การใช้งานที่ดี

การวางแนวของอุปกรณ์

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

Safari ใน iPhone ทำได้ดีในการสลับระหว่างการวางแนวตั้งและแนวนอน

การวางแนวของอุปกรณ์ใน iPad และ Chrome บน Android อาจเป็นปัญหาได้ เช่น หากไม่มีการปรับแต่งใดๆ วิดีโอที่เล่นใน iPad ในการวางแนวนอนจะมีลักษณะดังนี้

การตั้งค่า width: 100% หรือ max-width: 100% ของวิดีโอด้วย CSS สามารถแก้ปัญหาเลย์เอาต์การวางแนวของอุปกรณ์ได้หลายปัญหา

เล่นอัตโนมัติ

แอตทริบิวต์ autoplay จะควบคุมว่าเบราว์เซอร์จะดาวน์โหลดและเล่นวิดีโอทันทีหรือไม่ วิธีการทำงานที่แม่นยำจะขึ้นอยู่กับแพลตฟอร์มและเบราว์เซอร์

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

• Firefox: บล็อกวิดีโอและเสียงทั้งหมด แต่ให้ผู้ใช้สามารถผ่อนปรนข้อจำกัดเหล่านี้สำหรับเว็บไซต์ทั้งหมดหรือบางเว็บไซต์ ดูรายละเอียดได้ที่ อนุญาตหรือบล็อกการเล่นสื่ออัตโนมัติใน Firefox

• Safari: ในอดีตกำหนดให้ต้องมีท่าทางผู้ใช้ แต่ได้ผ่อนปรนข้อกำหนดดังกล่าวในเวอร์ชันล่าสุด ดูรายละเอียดได้ที่ นโยบาย <video> ใหม่สำหรับ iOS

แม้ในแพลตฟอร์มที่เล่นอัตโนมัติได้ คุณก็ต้องพิจารณาว่าการเปิดใช้ฟีเจอร์นี้เป็นความคิดที่ดีหรือไม่

• ปริมาณการใช้อินเทอร์เน็ตอาจมีค่าใช้จ่ายสูง
• การเล่นสื่อก่อนที่ผู้ใช้ต้องการอาจใช้แบนด์วิดท์และ CPU มากเกินไป ซึ่งจะทำให้การแสดงหน้าเว็บล่าช้า
• ผู้ใช้อาจอยู่ในบริบทที่การเล่นวิดีโอหรือเสียงเป็นการรบกวน

โหลดล่วงหน้า

แอตทริบิวต์ preload จะให้คำแนะนำแก่เบราว์เซอร์เกี่ยวกับปริมาณข้อมูลหรือเนื้อหาที่จะโหลดล่วงหน้า

แอตทริบิวต์ preload จะส่งผลแตกต่างกันในแพลตฟอร์มต่างๆ เช่น Chrome จะบัฟเฟอร์วิดีโอ 25 วินาทีในเดสก์ท็อป แต่ไม่บัฟเฟอร์ใน iOS หรือ Android ซึ่งหมายความว่าในอุปกรณ์เคลื่อนที่อาจมีการหน่วงเวลาในการเริ่มเล่นซึ่งจะไม่เกิดขึ้นในเดสก์ท็อป ดูรายละเอียดเพิ่มเติมได้ที่การเล่นที่รวดเร็วด้วยการโหลดเสียงและวิดีโอล่วงหน้า หรือ บล็อกของ Steve Souders

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