การใส่ไฟล์ออดิโอลงในเว็บเพจ
เราสามารถใช้แท็กคำสั่ง <audio> ในการใส่ไฟล์ออดิโอลงในหน้าเว็บเพจได้โดยมีรูปแบบดังนี้

รูปแบบ

<audio src="ชื่อไฟล์เสียง" ตัวควบคุม>ข้อความ</audio>

โดยที่

ตัวอย่าง การใส่ไฟล์ออดิโอลงในหน้าเว็บเพจ

1) เมื่อไม่มีตัวควบคุมใด ๆ

- การสั่งแบบนี้จะไม่มีผลใดๆ

2) เมื่อให้แสดงแผงควบคุมการเล่น

ถ้าเบราว์เซอร์เล่นไฟล์นั้นจะได้แสดงแผงควบคุมการเล่นบนหน้าจอด้วย เช่น

หากเป็นไฟล์ที่เบราว์เซอร์ไม่รองรับ จะแสดงคำเตือนให้ทราบเช่น Internet Explorer เล่นไฟล์.ogg นี้ไม่ได้ จะปรากฏ

เมื่อใช้คำสั่ง preload เพื่อให้เบราว์เซอร์ทำการดาวน์โหลดข้อมูลที่จำเป็นมาไว้ก่อนที่จะโหลดทั้งไฟล์

เมื่อสั่งให้เล่นไฟล์ทันทีที่โหลดเสร็จ (autoplay) และให้เล่นแบบวนซ้ำ (loop)

การกำหนดไฟล์ออดิโอให้ใช้ได้กับทุกเบราว์เซอร์

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

<audio controls>
<source src ="sound.ogg" type="audio/ogg">
< source src ="sound.wav" type="audio/x-wav">
< source src ="sound.mp3" type="audio/mpeg">
No audio support
</audio>

โดยทั่วไปเมื่อไม่มีการระบุคำสั่ง src ไว้ในแท็ก <audio> ไฟล์ที่ระบุไว้ในแท็ก<source> อันแรกสุดจะถูกเล่นเมื่อเบราว์เซอร์นั้นรองรับ HTML5 หากเล่นไม่ก็จะเลื่อนไปยังไฟล์ในแท็ก<source> ถัดไปเรื่อย ๆ
แต่ถ้าหากเล่นไม่ได้เลยก็จะไม่เกิดเสียงใดๆและแสดงข้อความที่เรากำหนดไว้เช่น No audio support! เป็นต้น
แต่ทันที่เบราว์เซอร์พบตัวเล่นไฟล์ที่ตรงกับชนิดของไฟล์ที่กำหนด ก็จะเล่นไฟล์นั้นแล้วข้ามไปทำคำสั่งที่อยู่ถัดจาก
</audio> ต่อไป

ส่วนของ type จะเป็นส่วนที่ช่วยให้เบราว์เซอร์รู้ว่าไฟล์ที่เรากำหนดนั้น เป็นไฟล์ชนิดใดซึ่งจะไม่ใส่ก็ได้ หากจะใส่ให้ดูได้จากตารางข้างล่างนี้

การใส่ไฟล์วิดีโอลงในเว็บเพจ

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

รูปแบบ

<video src="ชื่อไฟล์วิดีโอ" ตัวควบคุม > ข้อความ </video>

โดยที่

ตัวอย่างการใส่ไฟล์วิดีโอลงในหน้าเว็บเพจ

1) เมื่อใส่แท็ก <video> โดยไม่มีตัวควบคุมใดๆ <video src="myvideo.mp4"> </video>
การสั่งแบบนี้ไม่มีประโยชน์อะไร เพราะจะได้ชมเฉพาะเฟรมแรกของวิดีโอนั้นเท่านั้น

2) การให้แสดงแผงควบคุมการเล่น<video src ="myvideo.mp4"controls></video>
แผงควบคุมจะถูกซ่อนไว้เมื่อวิดีโอเริ่มเล่นให้เลื่อนเมาส์เข้าไปที่กรอบวิดีโอก็จะแสดงออกมา

3) การใช้คำสั่ง preload เพื่อให้เบราว์เซอร์ทำการดาวน์โหลดข้อมูลที่จำเป็นมาไว้ก่อนที่จะดาวน์โหลด
ทั้งไฟล์

4) เมื่อสั่งให้เล่นไฟล์ทันทีที่โหลดเสร็จ (autoplay) และเล่นแบบวนซ้ำ (loop)

5) การใช้คำสั่ง Poster ในการกำหนดภาพเบื้องต้นเมื่อวิดีโอนั้นยังไม่ถูกเล่น

6) การกำหนดขนาดของกรอบวิดีโอด้วยคำสั่ง width และ height

เราไม่สามารถกำหนดขนาดของภาพได้โดยตรงเพราะ โปรแกรมจะคงสัดส่วนของภาพไว้เสมอ

7) การปิดเสียงวิดีโอด้วยคำสั่ง muted

5.1 การกำหนดไฟล์วิดีโอให้ใช้ได้กับทุกเบราว์เซอร์

เช่นดียวกับการใส่ไฟล์ออดิโอ หากต้องการให้ไฟล์วิดีโอของเราใช้ได้กับเว็บเบราว์เซอร์ที่หลากหลาย เราจำเป็นต้องใส่ไฟล์วิดีโอหลายๆชนิด เพื่อให้ครอบคลุมการรองรับของเว็บเบราว์เซอร์เหล่านั้น โดยการใช้แท็กคำสั่ง
<source> เข้ามาช่วย ตัวอย่างเช่น

<video width="320" height ="240" controls>
<source src ="myvideo.mp4" type="video/mp4">
<source src ="myvideo.ogv" type="video/.ogv">
<source src ="myvideo.wedm" type="video/.wedm">
No audio support!
</video> <video src="ชื่อไฟล์วิดีโอ" ตัวควบคุม> ข้อความ </video>

เมื่อเราใส่ไฟล์ให้เลือกแบบนี้ Internet Explorer และ Safari จะเล่นไฟล์ mp4, Firefox และ Chrome จะเล่นไฟล์ ogv,และเบราว์เซอร์อื่นๆ จะเล่นไฟล์ wedm
ส่วนของ type จะเป็นส่วนที่ช่วยบอกให้เบราว์เซอร์รู้ว่าไฟล์ที่เรากำหนดนั้นเป็นไฟล์ชนิดใดซึ่งจะไม่ใส่ก็ได้ หากจะใส่ให้ดูได้จากตารางข้างล่างนี้

6. การเตรียมการสำหรับเบราว์เซอร์รุ่นเก่า
ใน HTML รุ่นก่อนหน้า HTML5 นั้นจะใช้แท็กคำสั่ง <object> หรือ <embed> ในการจัดการกับไฟล์ออดิโอ
และวิดีโอ ในหน้าเว็บเพจ แต่ใน HTML5 ได้เพิ่มแท็กคำสั่ง <audio> และ <video> มาใช้แทนแต่อย่างไรก็ตาม
ใช่ว่า ทุกเว็บเบราว์เซอร์จะรองรับแท็กคำสั่ง <audio> และ <video> นี้ได้ ซึ่งเว็บเบราว์เซอร์ที่สามารถรองรับได้
จะมีดังนี้

Internet Explorer 9+ Firefox3.5+ safari 3+
Chrome 3+ Opera 10.5+ iphone 1+
Android 2+

หากเว็บเบราว์เซอร์ใดไม่รองรับก็จะข้ามแท็กคำสั่งนี้ไปเอง ดังนั้นหากเราต้องการให้ได้กับเว็บเบราว์เซอร์ทั้ง
เก่า และ ใหม่ ควรใช้แท็กคำสั่ง <embed> ร่วมด้วย

6.1 การใสไฟล์ออดิโอด้วยแท็กคำสั่ง <embed>

เมื่อใช้แท็กคำสั่ง <embed> กับไฟล์ออดิโอ เราสามารถใส่คำสั่งเสริมได้ 2 คำสั่ง คือ src และ autostart
เมื่อ src ใช้กำหนดชื่อไฟล์ออดิโอ และ autostart เพื่อเล่นไฟล์นั้นทันทีหรือไม่ ซึ่งโดยปกติแล้วไฟล์นั้นจะถูกเล่นทันที
แต่ถ้ายังไม่ต้องการให้เล่นให้ระบุคำสั่ง autostart =" false" ดังนี้

เราจะวางแท็กคำสั่ง <embed> ไว้แท็กใน <audio> ก็เพราะว่าเมื่อไฟล์ที่เราระบุไว้ก่อนหน้าแท็กคำสั่งนี้
สามารถเล่นได้เบราว์เซอร์จะข้ามคำสั่ง <embed> นี้ไป แต่ถ้าหากเบราว์เซอร์นั้นไม่รับรองแท็ก <audio> คำสั่ง
<embed> นี้จึงจะผล

6.2 การใส่ไฟล์วิดีโอด้วยแท็กคำสั่ง<embed>
และเช่นเดียวกับไฟล์ออดิโอ เราก็สามารถใช้แท็กคำสั่ง <embed> เพื่อให้ผู้เยี่ยมชมที่ใช้เบราว์เซอร์
ที่ไม่รองรับแท็ก <video> ยังสามารถชมวิดีโอของเราได้ ดังตัวอย่าง

<video width="320"height="240" controls>
<source src ="myvideo.mp4" type="video/mp4">
<source src ="myvideo.ogg" type="video/.ogg">
<source src ="myvideo.wedm" type="video/.wedm">
<embed src ="myvideo.mp4" type="application/x-shockwave-flash"

width ="320"height="240" >
</video>