ทำแบบทดสอบก่อนเรียน
การออกแบบเว็บไซต์
ภาษา html
การจัดรูปแบบเอกสาร
การจัดรูปแบบตัวอักษร
การใส่รูปภาพลงในเว็บเพจ
การสร้างตาราง
การเชื่อมโยงเว็บเพจ
การใส่ไฟล์มัลติมีเดีย
แบบทดสอบหลังเรียน


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

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


รูปแบบ
<video src="ชื่อไฟล์วิดีโอ" ตัวควบคุม > ข้อความ </video>
โดยที่
ชื่อไฟล์วิดีโอ จะต้องระบุชนิดของไฟล์ และ ตำแหน่งที่เก็บไฟล์นั้นด้วย เช่น
src ="myvideo.ogg" หรือ src="c\html\myvideo.mp4"

ตัวควบคุม



     
       
         

                           

 

 

 

 

 

 

เป็นส่วนที่ใช้ระบุคำสั่งเสริมสำหรับควบคุมการแสดงผล ได้แก่
   -autoplay   ให้เบราว์เซอร์เล่นวิดีโอนั้นทันทีที่โหลดเสร็จ เช่น autoplay
   -controls    ให้แสดงแผงควบคุมการเล่น เช่น controls
   -loop           ให้วนกลับมาเริ่มต้นใหม่เมื่อแสดงผลจบเช่น loop หรือ loop=" loop"
   -muted       กำหนดการเปิด-ปิดเสียงเมื่อเล่นวิดีโอ ถ้าระบุไว้จะเป็นการปิด เสียง
                       เช่น muted
   -poster       กำหนดรูปภาพที่ให้แสดงแทน เมื่อวิดีโอนั้นยังไม่ถูกโหลด เช่น  poster
   -width         กำหนดความกว้างของกรอบแสดงวิดีโอ มีหน่วยเป็นพิกเซล
                       เช่น Width="640"
   -height       กำหนดความสูงของกรอบแสดงวิดีโอ มีหน่วยเป็นพิกเซล  
                      เช่น  height ="640"
   -preload    ให้เบราว์เซอร์ทำการโหลดไฟล์นี้ไว้ก่อนหรือไม่ โดยระบุดังนี้
                      1) None ไม่ต้องโหลด
                      2) Metadata โหลดเฉพาะข้อมูลประกอบแต่ยังไม่โหลดเนื้อหา
                      3) auto โหลดทั้งไฟล์เมื่อเข้าสู่หน้าเว็บนั้น
คำสั่งเสริม preload จะถูกข้ามไปถ้ามีการระบุ autoplay ไว้

   -mediagroup  ใช้ในการจัดกลุ่มวิดีโอ โดยกำหนดชื่อไว้ในคำสั่งนี้
                      เช่น  Mediagroup="movie" ทุกไฟล์วิดีโอที่ถูกกำหนด
                              Mediagroup เป็นชื่อเดียวกันจะถูกจัดเป็นกลุ่มเดียวกัน


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


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

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


<video src="myvideo.mp4"> </video>

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


<video src ="myvideo.mp4"controls></video>

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

      <video src ="myvideo.mp4"
               Controls preload="metadata">
      </video>