การใส่คลิปวีดีโอใน 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

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

HTML5 Semantic : aside tag

<aside>
tag aside หมายถึง เน้อหาที่อาจจะไม่ใช่ประเด็นหลักของหน้านั้นๆ เราจึงนำมันมาอยู่ในภายใต้ tag aside เช่น sidebar ด้านขวามือของเว็บ ซึ่งส่วนใหญ่ด้านขวามือของเว็บไซต์นั้นจะเป็นพวก ติดต่อเราผ่าน Social media พวกติดต่อเราทาง facebook, twitter, บุคมาร์กต่างๆ แต่ aside ก็ไม่ได้มีความหมายแค่นั้น อาจจะวางไว้ตรงอื่นที่ไม่ใช่ sidebar ของเว็บก็ได้เช่น

<article>
  <h1>aside ใช้ทำอะไร</h1>
  <p>aside มีหน้าที่แบ่งแยกเนื้อหาที่ไม่ใช่เนื้อหาหลักของหน้าเพจนั้นๆ</p>
  <aside>แชร์หน้านี้ :: ตอบกลับ </aside>
</article>

ด้านบนนี้ aside ใช้ทำหน้าที่ใน article ซึ่งบ่งบอกว่า การแชร์หน้านี้ หรือการกดเพื่อตอบกลับ ไม่ใช่เนื้อหาที่แท้จริงของตัว article นั้นๆ ครับ

Html5 Semantic Tag Article วิธีการใช้งาน

แท็ก article

<article>
Tag นี้มีไว้เพื่อหุ้มเนื้อความหลักในเพจ โดยทั่วไปอาจจะมี section อยู่ใน article อีกทีก็ได้
อีกทั้ง article ยังใช้งานเกี่ยวกับพวก comment  news blog  post forum ของเว็บอีกด้วย

ตัวอย่าง การใช้ Article เพื่อบ่งบอกเนื้อความหลัก

<article>
  <h1>Article มีไว้เพื่อ</h1>
  <p>Tag นี้มีไว้เพื่อหุ้มเนื้อความหลักในเพจ โดยทั่วไปอาจจะมี section อยู่ใน article อีกทีก็ได้
อีกทั้ง article ยังใช้งานเกี่ยวกับพวก comment  news blog  post forum ของเว็บอีกด้วย
  </p>
</article>

ตัวอย่างการใช้ Article ร่วมกับ Section

<article>
  <h1>Article มีไว้เพื่อ</h1>
  <p>Tag นี้มีไว้เพื่อหุ้มเนื้อความหลักในเพจ โดยทั่วไปอาจจะมี section อยู่ใน article อีกทีก็ได้
อีกทั้ง article ยังใช้งานเกี่ยวกับพวก comment  news blog  post forum ของเว็บอีกด้วย หลักๆ แบ่งวิธีใช้เป็นสองประเภทดังนี้
  </p>
    <section>
            <h2>Article ใชักับเนื้อความหลักของเพจ</h2>
            <p>ส่วนใหญ่เนื้อความหลักของหน้านั้นๆ ควรคุมไว้ด้วย Article อยู่แล้ว</p>
   </section>
   <section>
            <h2>Article ใชักับคอมเมนท์ของเพจนั้นๆ</h2>
            <p>เช่น พวกการโพสคอมเมนท์ในเว็บ 2.0 เป็นต้น</p>
   </section>
</article>

ดังนั้น ก็ขึ้นอยู่กับเราด้วยครับว่าใช้แบบไหนจะเหมาสมที่สุด ซึ่งตัวอย่างที่ผมกล่าวมา เป็นตัวอย่างที่ใชักันมากสุดครับ