พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน Video

ใน HTML5 มีการรองรับการใช้งานวิดีโอผ่านแท็ก <video> โดยไม่ต้องพึ่งปลั๊กอินภายนอกเช่น Flash ซึ่งการใช้งานแท็ก <video> ใน HTML5 มีรูปแบบการใช้งานที่หลากหลาย สามารถประยุกต์ใช้งานได้ตามต้องการ รูปแบบพื้นฐานและตัวอย่างการใช้งานมีดังนี้

การใช้งานเบื้องต้น

การใช้งาน <video> ขั้นพื้นฐานคือการแสดงวิดีโอพร้อมกำหนดแหล่งไฟล์วิดีโอผ่านแอตทริบิวต์ src

HTML
<video src="movie.mp4" width="600" controls></video>
  • src: แหล่งที่มาของไฟล์วิดีโอ (เช่น movie.mp4)
  • width: กำหนดความกว้างของวิดีโอ
  • controls: แสดงปุ่มควบคุมการเล่น เช่น ปุ่มเล่น/หยุด ปุ่มปรับเสียง

การรองรับหลายรูปแบบของวิดีโอ (Multiple Video Sources)

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

HTML
<video width="600" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    <source src="movie.ogv" type="video/ogg">
    Your browser does not support the video tag.
</video>

เบราว์เซอร์จะเลือกเล่นไฟล์วิดีโอที่สามารถรองรับได้จากไฟล์ที่ระบุไว้

การเล่นวิดีโออัตโนมัติ (Autoplay)

หากต้องการให้วิดีโอเล่นอัตโนมัติเมื่อโหลดหน้าเว็บ สามารถใช้แอตทริบิวต์ autoplay

HTML
<video src="movie.mp4" width="600" autoplay controls></video>

วิดีโอจะเริ่มเล่นทันทีที่หน้าเว็บโหลดเสร็จ

การวนซ้ำวิดีโอ (Loop)

สามารถใช้แอตทริบิวต์ loop เพื่อให้วิดีโอเล่นซ้ำเมื่อจบการเล่น

HTML
<video src="movie.mp4" width="600" loop controls></video>

วิดีโอจะเล่นซ้ำอย่างต่อเนื่อง

การซ่อนปุ่มควบคุม (No Controls)

สามารถซ่อนปุ่มควบคุมโดยการไม่ใช้แอตทริบิวต์ controls

HTML
<video src="movie.mp4" width="600" autoplay loop></video>

เหมาะสำหรับการแสดงผลวิดีโอในแบบที่ไม่ต้องการให้ผู้ใช้ควบคุมการเล่นเอง

การแสดงคำบรรยาย (Captions)

สามารถเพิ่มไฟล์คำบรรยายลงในวิดีโอโดยใช้แท็ก <track>

HTML
<video width="600" controls>
    <source src="movie.mp4" type="video/mp4">
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
    <track src="subtitles_th.vtt" kind="subtitles" srclang="th" label="Thai">
</video>
  • kind=”subtitles”: ระบุว่าเป็นคำบรรยาย
  • srclang: ภาษาเช่น en หรือ th

การตั้งภาพเริ่มต้น (Poster)

สามารถกำหนดภาพนิ่งที่จะแสดงก่อนที่วิดีโอจะเล่นได้โดยใช้แอตทริบิวต์ poster

HTML
<video src="movie.mp4" width="600" poster="poster.jpg" controls></video>

ภาพนิ่ง poster.jpg จะถูกแสดงเป็นภาพเริ่มต้นจนกว่าผู้ใช้จะเล่นวิดีโอ

การใช้งานร่วมกับ JavaScript

สามารถควบคุมวิดีโอด้วย JavaScript เพื่อให้เกิดความยืดหยุ่น เช่น การเล่น/หยุดวิดีโอจากปุ่ม

HTML
<video id="myVideo" width="600" controls>
    <source src="movie.mp4" type="video/mp4">
</video>

<button onclick="playVideo()">Play</button>
<button onclick="pauseVideo()">Pause</button>

<script>
function playVideo() {
    document.getElementById("myVideo").play();
}

function pauseVideo() {
    document.getElementById("myVideo").pause();
}
</script>

ใช้ JavaScript เพื่อควบคุมการเล่น/หยุดของวิดีโอได้อย่างง่ายดาย

สรุป

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

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ