วันอังคารที่ 5 สิงหาคม พ.ศ. 2557

การใส่คลิปวีดีโอใน HTML5

ทั่วไปการใส่คลิปวีดีโอในเว็บ หรือไฟล์หนังทั่วไปในเว็บไซต์นั้น ต้องใช้ปลักอินช่วยเสมอๆ เช่น adobe flash player หรือไม่ก็ shockwave ฯลฯ เยอะแยะไม่หวาดไม่ไหว แต่ถ้าเป็น HTML5 นั้น เพียงไม่กี่บรรทัดคุณก็สามารถมีวีดีโอส่วนตัวมาไว้ในเว็บไซต์ได้แล้วละครับ



HTML5 นั้นใช้ tag <video>

บราวเซอร์ที่รองรับมี
Internet Explorer 9+
Firefox
Opera
Chrome
and Safari
จะเห็นได้ว่ามีบราวเซอร์รองรับมากมายครับ เลยทำให้คำสั่งนี้น่าใช้ฝุดๆ


ตัวอย่างโค๊ดเล่นไฟล์หนัง โดยใช้แท็ก <video>

<video width="640" height="450" controls>
  <source src="movie1.mp4" type="video/mp4">
<source src="movie1.ogg" type="video/ogg">
  Your browser does not support the video tag.

</video>

ตรง your browser does not support the video tag. จะใส่ text ว่าอะไรก็ได้ จะแสดงก็ต่อเมื่อไม่สามารถเปิดไฟล์วีดีโอนั้นได้ และเราสามารถปรับความกว้างความสูงของ การแสดงผลได้โดยการเปลี่ยนเลข width height ได้เช่นเคย
และบรรทัดที่เป็นไฟล์ ogg จะได้ใช้ก็ต่อเมื่อเปิด mp4 ไมไ่ด้ครับ 

ดูง่ายๆ คือมันจะไล่บรรทัดไปเรื่อยๆ จนกว่าจะได้แสดงผลครับ
ตอนนี้มีไฟล์วีดีโอ 3 นามสกุลที่ใช้ได้ครับคือ .mp4 .ogg .WebM

เดี๋ยวต่อไปจะบอกลูกเล่นอื่นๆนะครับ