การใส่วีดีโอในเว็บไซต์ที่สร้างจากภาษา HTML5 นั้น ไม่จำเป็นต้องพึ่ง Adobe Flash และ plugin ใดๆ เพราะใน HTML5 สามารถใช้แท็ก <video> ได้ และไม่ต้อง embed โค้ดยาว ๆ แค่ใส่แท็ก HTML5 สั้น ๆ ไปก็เรียบร้อย

ตอนนี้ web browserจะใช้ได้กับวีดีโออยู่ video 3 format ดังข้อมูลในตารางด้านล่าง ซึ่งในแต่ละ web browser จะรองรับ Video Format ไม่เหมือนกัน

Browser   MP4   WebM   Ogg
Internet Explorer 9   สนับสนุน   ไม่สนับสนุน   ไม่สนับสนุน
Firefox 4.0   ไม่สนับสนุน   สนับสนุน   สนับสนุน
Google Chrome 6   สนับสนุน   สนับสนุน   สนับสนุน
Apple Safari 5   สนับสนุน   ไม่สนับสนุน   ไม่สนับสนุน
Opera 10.6   ไม่สนับสนุน   สนับสนุน   สนับสนุน

Video Element
เราสามารถใส่วิดีโอลงในหน้าเว็บได้อย่างง่ายดายด้วย video element สมมติว่าเรามีไฟล์วิดีโอชื่อ “video.mp4″ ซึ่งมีขนาด 320×180 ให้เราเขียน 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>

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 ก็จะเห็นข้อความ “วิดีโอเริ่มเล่นแล้ว” ในตอนที่วิดีโอเริ่มเล่น และ “วิดีโอเล่นจบแล้ว” หลังจากที่วิดีโอเล่นจบ

http://www.softmelt.com/article.php?id=413