HTML5 และ CSS3 ตอน จุดเด่นของ HTML5 (ตอนที่ 2)
3.การเล่นวีดีโอ และ เสียง
HTML5 สนับสนุนการเล่น VDO ระดับ HD บนเว็บไซต์เลยครับ ถึงแม้ว่าฟร์แมตที่สนับสนุนจะน้อยไปหน่อย และยังแตกต่างกันในแต่ละบราวเซอร์ ดังตารางด้านล่าง
| Format | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
| MPEG 4 | 9.0+ | No | No | 5.0+ | 3.0+ |
| WebM | No | 4.0+ | 10.6+ | 6.0+ | No |
- Ogg = Ogg files with Theora video codec and Vorbis audio codec
- MPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec
- WebM = WebM files with VP8 video codec and Vorbis audio codec
4.Canvas สำหรับแสดงรูป วาดรูป แสดงกราฟ หรือ โฆษณาเคลื่อนไหวอื่นๆ ที่สามารถตควบคุมได้โดย Javascript
อันนี้จะมาทดแทนการแสดงผลด้วยแฟลชโดยตรง เนื่องจาก HTML5 สามารถแสดงผลกราฟฟิคต่างๆได้อย่างรวดเร็วและลื่นไหล โดยใช้ Canvas ทำให้ในอนาคตเว็บไซต์สามารถตอบสนองกับผู้ใช้ได้อย่างกว้างขวางยิ่งขึ้น เช่น การวาดรูป การตกแต่งภาพ การออกแบบเกี่ยวกับกราฟฟิคบนเว็บไซต์ การแสดงผลโฆษณาแบบเดียวกับแฟลชแต่ใช้พลังน้อยกว่า รวมถึงการออกแบบเกมส์บนเว็บไซต์
<canvas id="demo"></canvas>
<script>
var canvas=document.getElementById('demo');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,80);
</script>
เป็นการวาดรูปสี่เหลียมจตุรัสสีแดงด้วย Canvas ครับ
5.ContentEditable เป็นการอนุญาติให้มีการแก้ไขเนื้อหาเฉพาะส่วนบนหน้าเว็บได้เลย
ก็ตามชื่อของมันแหละครับ คือเป็นการอนุญาติให้มีการแก้ไขเนื้อหาบนเว็บได้ โดยปกติจะต้องใช้ร่วมกับ Javascript เพื่อส่งกลับไปบันทึกบนเว็บไซต์ (Ajax) หรือใช้ร่วมกับ Persistent Data Storage เพื่อการบันทึกบนเครื่องผู้ใช้เอง
6.Drag and Drop สำหรับการลากและวางซึ่งแต่ก่อนจะทำได้ก็ต้องอาศัย Javascript
เป็นการสนับสนุนการลากและวางทั้งการลาก element ไปมาบนบราวเซอร์ จนกระทั้งถึงการลากไฟล์เพื่อการอัปโหลด
7.Persistent Data Storage เป็นการเก็บข้อมูลบนเครื่องของ User ที่สามารถทำได้มากกว่าการเก็บด้วย Cookie
เป็นการอนุญาติให้เก็บข้อมูลบนเครื่องผู้ใช้เอง เพื่อใช้งานแบบออฟไลน์ ซึ่งสามารถเก็บได้ถึงระดับฐานข้อมูลเลยทีเดียว