สอนวิธีใช้ HTML5 Video

วันนี้เราจะมาพูดถึงความสามารถของ html ที่จะช่วยให้เราสามารถเล่นไฟล์วิดีโอได้โดยไม่ต้องพึ่ง plugin เสริมอีกต่อไป ลองมาดูว่าการจะทำให้ไฟล์วิดีโอสามารถเล่นได้ในทุกๆ web browser นั้น เราจะต้องมีการเตรียมพร้อมอย่างไรกันบ้าง

Video Element

เราสามารถใส่วิดีโอลงในหน้าเว็บได้อย่างง่ายดายด้วย video element สมมติว่าเรามีไฟล์วิดีโอชื่อ “video.mp4” ซึ่งมีขนาด 320x180 ให้เราเขียน markup แบบนี้

<video src="video.mp4" width="320" height="240"></video>

หากสังเกตดีๆ จะเห็น video element นั้น มีวิธีใช้งานคล้ายกับ img element มาก

เมื่อแต่ละ Browser รองรับไฟล์วิดีโอไม่เหมือนกัน

จริงๆ แล้ว การใช้งาน video element น่าจะจบเพียงแค่ในหัวข้อแรก แต่ปัญหามันอยู่ตรงที่แต่ละ web browsers ยังไม่ได้ใช้มาตรฐานในการเล่นไฟล์วิดีโอแบบเดียวกัน ทำให้เราต้องจัดเตรียมไฟล์วิดีโอมาถึง 3 format ไม่ว่าจะเป็น MP4, WebM และ OGG จึงจะสามารถเล่นได้ในทุกๆ web browser (หากไม่ต้องการรองรับ web browser เก่าๆ แล้ว สามารถตัด OGG ออกได้)

หลังจากที่เราได้เตรียมไฟล์วิดีโอมาพร้อมแล้ว ขั้นตอนต่อไปก็คือการกำหนด src ของไฟล์วิดีโอเหล่านั้น ให้กับ video element แต่เนื่องจาก video element สามารถใส่ src ได้ที่เดียว เราจึงต้องใช้ source element เข้ามาช่วย ลองดูตัวอย่างนี้

<video width="320" height="240">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">	
    <source src="video.ogg" type="video/ogg">
    <p>Web Browser นี้ยังไม่รองรับ HTML Video</p>
</video>

ให้เราใส่ source element ไว้ข้างใน video element โดยระบุ src ให้เป็นไฟล์วิดีโอ format ต่างๆ ที่เราได้เตรียมไว้ พร้อมกับกำหนด type ให้ตรงตาม format เพราะ web browser จะได้เลือกไฟล์วิดีโอมาเล่นได้อย่างถูกต้อง จะเห็นว่าในตัวอย่าง เราได้ใส่ p element เอาไว้ด้วย โดยมันจะแสดงผลออกมาก็ต่อเมื่อ web browser นั้น ยังไม่รองรับ video element

Browsers Compatibility

เราสามารถใช้ html video element ได้แล้ววันนี้ เพราะว่า web browser หลักๆ นั้นรองรับหมดแล้ว จะมีก็แต่ Internet Explorer ที่เพิ่งรองรับตั้งแต่เวอร์ชัน 9 เป็นต้นมา

อย่างไรก็ตาม หากต้องการให้ web browser เก่าๆ ยังแสดงผลวิดีโอได้ด้วย ให้เราเปลี่ยน p element มาเป็น object element เหมือนสมัยที่เรายังใช้ flash แทน เพียงเท่านี้ web browser ที่ยังไม่รองรับ video element ก็ยังสามารถเล่นวิดีโอของเราได้อยู่

<video width="320" height="240">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogg" type="video/ogg">
    <object type="application/x-shockwave-flash" data="video.swf" width="320" height="240"> 
        <param name="movie" value="video.swf">
    </object>
</video>

ขอบคุณวิดีโอจาก w3schools.com

Attribute ของ Video Element

นอกจาก src, width และ height แล้ว video element ยังมี attribute อื่นๆ อีก ดังนี้

• controlsแสดงแผงควบคุมวิดีโอ(ปุ่ม play, pause ฯลฯ)
• autoplayกำหนดให้วิดีโอเล่นโดยอัตโนมัติ
• loopเมื่อวิดีโอเล่นจบแล้วให้เริ่มเล่นใหม่
• mutedปิดเสียงวิดีโอ
• posterกำหนด src ของรูปที่จะนำมาแสดงก่อนที่วิดีโอจะเล่น

สมมติเราอยากให้วิดีโอของเรามีแผงควบคุม และเริ่มเล่นโดยอัตโนมัติ ให้เราใส่ attribute ที่ชื่อว่า controls และ autoplay ให้กับ video element แบบนี้

<video controls="controls" autoplay="autoplay">
    <!-- ระบุ src ของวิดีโอ -->
</video>

แต่ถ้าเราไม่อยากให้เล่นวิดีโอโดยอัตโนมัติ ให้เราเอา attribute ที่ชื่อว่า autoplay ออก หากเราต้องการใส่รูปที่จะแสดงก่อนที่วิดีโอจะเล่น ให้เราใช้ attribute ที่ชื่อว่า poster โดยกำหนด value ให้เป็น src ของรูป แบบนี้

<video controls="controls" poster="poster.jpg">
    <!-- ระบุ src ของวิดีโอ -->
</video>

หมายเหตุ — autoplay, controls, loop และ muted เป็น attribute ที่ไม่จำเป็นต้องใส่ value ก็ได้

Media API และ Media Event

เราสามารถควบคุมการเล่นวิดีโอได้อย่างละเอียดมากขึ้นโดยอาศับสิ่งที่เรียกว่า media API และ media event ของ HTML5 Video ลองมาดูว่า method, property และ event ที่สำคัญๆ มีอะไรบ้าง

Methods

• play()เริ่มเล่นวิดีโอ / เล่นวิดีโอต่อจากจุดล่าสุด
• pause()หยุดเล่นวิดีโอชั่วคราว
• load()โหลดวิดีโอใหม่พร้อมกับปรับจุดเริ่มเล่นวิดีโอให้เป็นจุดเริ่มต้น

ทีนี้ลองมาดูตัวอย่างการสร้างปุ่ม Play และ Pause โดยไม่ต้องพึ่ง controls แบบ default ให้เราใช้ html สร้างปุ่มขึ้นมา 2 ปุ่ม ก่อน โดยกำหนด id ให้เป็น “play” และ “pause” ตามลำดับ

<video id="vdo">
    <!-- ระบุ src ของวิดีโอ -->
</video>
<div class="controls">
    <button id="play">Play</button>
    <button id="pause">Pause</button>
</div>

ต่อมาให้เราสั่งให้ method play() ทำงานเมื่อ click ที่ปุ่ม play ส่วนปุ่ม pause ก็ทำในทำนองเดียวกัน เพียงแต่เปลี่ยน method ให้เป็น pause()
(ขออนุญาตใช้ jQuery เพื่อความสะดวก)

jQuery(function($){
    var vdo = $('#vdo')[0];
    $('#play').click(function(){
        vdo.play();
    });
    $('#pause').click(function(){
        vdo.pause();
    });
});

Properties

• pausedดึงค่าสถานะ paused ของวิดีโอ (true / false)
• currentTimeดึงค่า / กำหนดค่า ของตำแหน่งเวลาที่เล่นวิดีโอ (หน่วยเป็นวินาที)
• volumeดึงค่า / กำหนดค่า ของระดับเสียงในขณะนั้น
• mutedดึงค่า / กำหนดค่า ของสถานะ Mute (ปิดเสียง)
• playbackRateดึงค่า / กำหนดค่า ของความเร็วในการเล่นวิดีโอ (ความเร็วปกติ = 1)
• currentSrcดึงค่า src ของไฟล์วิดีโอที่กำลังเล่นอยู่ (เพื่อที่จะได้ทราบว่า web browser เลือกไฟล์ไหนมาเล่น)
• videoWidthดึงค่าความกว้างจริงๆ ของตัวไฟล์วิดีโอ (ไม่ใช่ความกว้างที่แสดงผล)
• videoHeightดึงค่าความสูงจริงๆ ของตัวไฟล์วิดีโอ (ไม่ใช่ความกว้างที่แสดงผล)

ลองมาดูตัวอย่างที่ซับซ้อนขึ้นอีกนิด หลังจากที่เราได้ใช้ปุ่ม Play กับ Pause แยกกัน ในตัวอย่างที่แล้ว คราวนี้เราจะเปลี่ยนมาใช้เพียงแค่ปุ่มเดียวเท่านั้นในการทำหน้าที่ทั้ง Play และ Pause เริ่มด้วยการสร้างปุ่มใหม่ขึ้นมา แล้วกำหนด id ให้เป็น “button”

<video id="vdo">
    <!-- ระบุ src ของวิดีโอ -->
</video>
<div class="controls">
    <button id="button">Play/Pause</button>
</div>

เมื่อมีการ click ที่ปุ่ม Play/Pause เราจะต้องเช็คว่าในขณะนั้น วิดีโอกำลังหยุดเล่นอยู่หรือไม่ ซึ่งเราสามารถเช็คได้โดยการดูค่าของ property ที่มีชื่อว่า pause หากเราพบว่าค่าของ pause เป็น true ก็ให้เราใช้ method play() แต่ถ้าค่าของ pause เป็น false ก็ให้ใช้ method pause() แทน ลองดูตัวอย่างโค้ดด้านล่างนี้

jQuery(function($){
    var vdo = $('#vdo')[0];
    $('#button').click(function(){
        if(vdo.paused == true){
            vdo.play();
        }else{
            vdo.pause();
        }
    });
});

Events

• playingเกิดขึ้นเมื่อวิดีโอถูกเล่น ไม่ว่าจะเป็นการเล่นตั้งแต่เริ่ม หรือการเล่นหลังจากที่ถูกหยุดไปชั่วคราว
• endedเกิดขึ้นเมื่อวิดีโอเล่นจบแล้ว
• errorเกิดขึ้นเมื่อมีข้อผิดพลาดบางอย่างเกิดขึ้น
• canplaythroughเกิดขึ้นเมื่อ web browser โหลดไฟล์วิดีโอมามากพอที่จะสามารถเล่นวิดีโอจนจบได้โดยไม่กระตุก

ตัวอย่างที่ง่ายที่สุดคงเป็นการดัก event playing กับ ended ให้เราลองเพิ่มโค้ด JavaScript ด้านล่างนี้เข้าไปต่อท้ายโค้ด JavaScript จากตัวอย่างก่อนหน้า

jQuery(function($){
    /*
        โค้ดเดิม
    */
    vdo.addEventListener('playing', function(){
        console.log('วิดีโอเริ่มเล่นแล้ว');
    });
    vdo.addEventListener('ended', function(){
        console.log('วิดีโอเล่นจบแล้ว');
    });
});

เมื่อเราดูที่ console ก็จะเห็นข้อความ “วิดีโอเริ่มเล่นแล้ว” ในตอนที่วิดีโอเริ่มเล่น และ “วิดีโอเล่นจบแล้ว” หลังจากที่วิดีโอเล่นจบ

จริงๆ แล้ว เนื้อหาในส่วนของ media API และ media event ยังมีอีกหลายอย่างที่บทความนี้ยังไม่ได้พูดถึง เราสามารถดูรายละเอียดทั้งหมดได้ที่ The video element — HTML5 และดูตัวอย่างการใช้งานเพิ่มเติมได้ที่ HTML5 Video Events and API

ทางเลือก

หากเรารู้สึกว่าการใส่วิดีโอลงในหน้าเว็บโดยใช้ video element ค่อนข้างจะยุ่งยากไปสักหน่อย เราก็อาจใช้ YouTube เข้ามาช่วยโดยการอัพโหลดไฟล์วิดีโอของเราไปที่ YouTube ก่อน แล้วค่อยเอาวิดีโอมาใส่โดยใช้โค้ด iFrame หรือ Embeded จาก YouTube วิธีนี้จะช่วยให้เราไม่ต้องเตรียมไฟล์วิดีโอหลายๆ format และไม่ต้องมาตรวจสอบว่าวิดีโอของเราสามารถเล่นได้ในทุกๆ web browser หรือไม่ เพราะ YouTube จะทำแทนเราทั้งหมด

DemoSource