วิธีการทำงานกับวิดีโอ HTML

Sep 11, 2025
วิธีการ

ย้ายไปที่ YouTube ... ด้วย & lt; วีดีโอและ gt; องค์ประกอบและเล็กน้อย จาวาสคริปต์ คุณสามารถเริ่มสร้างเว็บไซต์วิดีโอของคุณเอง องค์ประกอบวิดีโอค่อนข้างตรงไปตรงมาเพื่อใช้งาน แต่พลังที่แท้จริงเกิดขึ้นเมื่อคุณรวมเข้ากับ JavaScript ซึ่งให้การควบคุมพฤติกรรมของผู้เล่นในระดับสูง

ในบทช่วยสอนนี้เราครอบคลุมการตั้งค่าพื้นฐานของวิดีโอการเลือกไฟล์เพื่อเล่นและสร้างภาพขนาดย่อ

01. สร้างหน้าพื้นฐาน

เริ่มต้นด้วยโครงร่างหน้า HTML เราต้องการโครงสร้าง DIV ที่เรียบง่าย CSS บางอย่างสำหรับการจัดแต่งทรงผมและวิกฤตส่วนใหญ่ไฟล์สคริปต์ คุณจะสังเกตเห็นว่าแท็กวิดีโอว่างเปล่าในขณะนี้ดังนั้นจะไม่ทำอะไรเลยเมื่อคุณโหลดหน้า อย่างไรก็ตามเราให้มัน id ดังนั้นเราสามารถควบคุมได้ด้วย JavaScript 

 & lt;! Doctype HTML & GT;
& lt; html & gt;
  & lt; หัว & gt;
  & lt; Meta Charset = 'UTF-8' / & GT;
  & lt; ชื่อ & gt; เครื่องเล่นวิดีโอ HTML ของฉัน & lt; / ชื่อ & gt;
  & lt; link rel = 'stylesheet' href = 'custom.css' / & gt;
  & lt; สคริปต์ SRC = "player.js" & gt; & lt; / script & gt;
  & lt; / head & gt;
  & lt; ร่างกาย & gt;
  & lt; div id = "ชื่อ" & gt;
  & lt; h1 & gt; ยินดีต้อนรับสู่ห้องสมุดวิดีโอของฉัน! & lt; / h1 & gt;
เลื่อนดูวิดีโอด้านล่างแล้วคลิกที่ที่คุณต้องการเล่น
  & lt; / div & gt;
  & lt; div id = "thumbnail-container" & gt;
  & lt; / div & gt;
  & lt; div id = "player-container" & gt;
  & lt; id id = "ผู้เล่น" & gt;
  & lt; / video & gt;
  & lt; div id = "การควบคุม" & gt;
  & lt; / div & gt;
  & lt; / div & gt;
  & lt; / body & gt;
  & lt; / html & gt;

02. สไตล์หน้า

ต่อไปเราจะเริ่มเพิ่มการจัดแต่งทรงผมลงในหน้า ก่อนที่เราจะพยายามทำอะไรที่ฉลาดเกินไปเริ่มต้นด้วยการเพิ่มสไตล์พื้นฐานให้กับองค์ประกอบ DIV สองสามของเราดังนั้นสิ่งที่ดูน่านับถือเล็กน้อย 

 ร่างกาย {
  พื้นหลังสี: #CCCCCC;
  ตัวอักษรตระกูล: Sans-Serif;
}
# ผู้เล่นภาชนะ {
  ระยะขอบซ้าย: อัตโนมัติ;
  Margin-Right: Auto;
  ความกว้าง: 640px;
  ความสูง: 480px;
  พื้นหลังสี: # 538C99;
  รัศมีชายแดน: 20px;
}
#title {
  ระยะขอบซ้าย: อัตโนมัติ;
  Margin-Right: Auto;
  ความกว้าง: 640px;
  จัดเรียงข้อความ: กึ่งกลาง;
  Padding-Top: 30px;
  Padding-Bottom: 50px;
  พื้นหลังสี: # 538C99;
  สี: # 333333;
  รัศมีชายแดน: 20px; }

03. เพิ่มสไตล์มากขึ้น

สิ่งต่าง ๆ ที่น่าสนใจยิ่งขึ้นเมื่อเรามาสไตล์ DIV Thumbnail-Container เราจะเติมเต็มนี้ด้วย ไอเอ็ม องค์ประกอบซึ่งจะเป็นรูปขนาดย่อที่สร้างขึ้นจากวิดีโอของเรา ดังนั้นเราต้องการให้มันแสดงแถบเลื่อนแนวนอนหากเรามีรูปขนาดย่อมากกว่าที่สามารถแสดงได้ในครั้งเดียว เราสามารถทำสิ่งนี้ได้โดยใช้ overflow-x คุณสมบัติ. 

 # thumbnail-container {
  พื้นหลังสี: #CCCCCC;
  อัตรากำไรขั้นต้น: 30px;
  ระยะขอบซ้าย: อัตโนมัติ;
  Margin-Right: Auto;
  ความกว้าง: 640px;
  ความสูง: 120px;
  Overflow-X: เลื่อน;
  overflow-y: ซ่อน;
  พื้นที่สีขาว: ตอนนี้;
  รัศมีชายแดน: 20px; }

04. ขนาดเครื่องเล่นวิดีโออย่างเหมาะสม

มีการจัดแต่งทรงผมอีกครั้งที่เราต้องทำ ตามที่เราเริ่มเล่นวิดีโอพวกเขาจะแสดงความละเอียดดั้งเดิมของพวกเขา นี่จะไม่ดูดีในหน้า ลองสไตล์องค์ประกอบวิดีโอเพื่อกำหนดว่าควรมีขนาดใหญ่แค่ไหน หากเราตั้งค่าความกว้างและความสูงถึง 100% มันจะกรอกข้อมูลที่มี div 

 วิดีโอ {
  ความกว้าง: 100%;
  ความสูง: 100%; }

05. ตั้งค่าสคริปต์

ได้เวลาลงไปที่ JavaScript แล้ว มาเตรียมรายการไฟล์วิดีโอในอาร์เรย์เพื่อทำงานกับ (เราจะยากสำหรับตอนนี้ แต่คุณสามารถลองกำหนดค่าเพื่อดึงข้อมูลผ่าน JSON จากบริการ HTTP)

เราจะกำหนดตัวแปรสองสามตัวที่เราจะใช้ในภายหลัง: ' ผู้เล่น 'จะเป็นองค์ประกอบวิดีโอ; ' ผู้เล่นของเรา 'จะเป็นองค์ประกอบต้นทางที่สร้างขึ้นใหม่ที่จะกลายเป็นลูกของผู้เล่นวัตถุในภายหลังและชี้ไปที่ไฟล์ต้นฉบับ เราจะวางแผนที่จะขอให้มี domcontentloaded กิจกรรมเพื่อให้แน่ใจว่าสคริปต์รอให้หน้าโหลดก่อนที่จะเตะสู่การทำงาน 

 var varofiles = ["1.mp4", "2.mp4", "3.mp4", "4.Mp4", "5.mp4"];
Var Player;
Var Playersource = Document.createelement ("แหล่งที่มา");
document.addeventlistener ("domcontentloaded", ฟังก์ชั่น () {informise ();}, เท็จ);

โปรดทราบว่าการเล่นวิดีโอในเบราว์เซอร์อาศัยการปรากฏตัวของตัวแปลงสัญญาณที่สามารถอ่านรูปแบบวิดีโอที่คุณใช้ เพื่อให้แน่ใจว่าวิดีโอของคุณทำงานข้ามเบราว์เซอร์การเดิมพันที่ปลอดภัยที่สุดคือไฟล์ MP4 โดยใช้ตัวแปลงสัญญาณ H.264

06. สร้างภาพขนาดย่อ

ต่อไปเรามาสร้างฟังก์ชั่นที่จะสร้างภาพขนาดย่อของรูปภาพจากไฟล์วิดีโอ เราต้องการให้สิ่งนี้ใช้ในวัตถุวิดีโอและส่งคืนวัตถุรูปภาพ ภายในวิธีที่เราจะบรรลุเป้าหมายนี้ ผ้าใบ HTML . 

 ฟังก์ชั่น generatethnail (วิดีโอ) {
  var canvas = document.createelement ("canvas");
  var container = document.getElementbyid ("thumbnail-container");
  var width = container.clientwidth;
  var height = container.clientHeight;
  canvas.width = (กว้าง / 3);
  Canvas.Height = ความสูง;
  Canvas.getContext ("2D") Drawimage (วิดีโอ, 0, 0, canvas.width, canvas.Height);
  var image = document.createelement ("img");
  image.src = canvas.todataurl ();
  ส่งคืนภาพ; }

07. สร้างภาพขนาดย่อโดยอัตโนมัติเป็นวิดีโอที่โหลด

ตอนนี้เราสามารถใช้ฟังก์ชั่น generatethumbnail และใช้งานในแต่ละไฟล์วิดีโอในรายการของเรา มาทำสิ่งนี้ด้วยการใช้งาน เริ่มต้น () ฟังก์ชั่น. ฟังก์ชั่นนี้จะเพิ่มอ็อบเจ็กต์ผู้เล่นเป็นลูกขององค์ประกอบวิดีโอจากนั้นทำซ้ำทุกไฟล์ในรายการให้โหลดลงในวัตถุวิดีโอชั่วคราวและโหลดครั้งเดียวสร้างภาพขนาดย่อและเพิ่มลงในคอนเทนเนอร์ขนาดย่อ 

 ฟังก์ชั่นเริ่มต้น () {
  ผู้เล่น = Document.GetElementByID ("ผู้เล่น");
  ผู้เล่น. Appendchild (ผู้เล่น);
  ผู้เล่น. controls = false;
  videofiles.foreach (ฟังก์ชั่น (ไฟล์) {
  var thumbsource = document.createelement ("แหล่งที่มา");
  thumbsource.src = ไฟล์;
  var thumbvideo = document.createelement ("วิดีโอ");
  thumbvideo.addeventristener ("loadeddata", ฟังก์ชั่น () {
  var container = document.getElementbyid ("thumbnail-container")
  var image = generatethnail (thumbvideo);
  container.ephendchild (ภาพ);
  }, เท็จ);
  thumbvideo.appendchild (thumbsource);
  }); }

08. เพิ่มลิงค์ไปยังรูปขนาดย่อ

มีบางอย่างที่ขาดหายไป ภาพขนาดย่อของเราแสดงในตู้คอนเทนเนอร์ แต่ไม่มีใครสามารถคลิกได้ เราต้องพันภาพใน & lt; a & gt; องค์ประกอบที่ต้องการดำเนินการจาวาสคริปต์บางอย่างเมื่อคลิก ลองปรับฟังก์ชั่นที่ติดกับ โหลดดาต้า เหตุการณ์เพื่อสร้างลิงค์เช่นกันแทนที่จะเป็นเพียงแค่ ไอเอ็ม องค์ประกอบ 

 thumbvideo.addeventristener ("loadeddata", ฟังก์ชั่น () {
  var container = document.getElementbyid ("thumbnail-container")
  var image = generatethnail (thumbvideo);
  Var Link = Document.createelement ("A");
  Link.href = "JavaScript: เล่น (\" "+ thumbsource.src +" \ ")";
  Link.ephendchild (รูปภาพ);
  คอนเทนเนอร์. Appendchild (ลิงก์);
  },
เท็จ);

09. เล่นวิดีโอ

ตอนนี้เรากำลังสร้างภาพขนาดย่อที่มีลิงก์ที่คลิกได้ซึ่งตั้งค่าให้เรียกใช้ เล่น (Thumbsource.src) ที่ไหน thumbsource.src ชี้ไปที่ชื่อไฟล์ของไฟล์วิดีโอที่เกี่ยวข้อง สิ่งที่เหลืออยู่คือการใช้ฟังก์ชั่นการเล่นเพื่อตั้งค่าผู้เล่นของเรา (ซึ่งคุณจะจำได้ว่าเราเชื่อมโยงกับองค์ประกอบเครื่องเล่นวิดีโอ) เพื่อชี้ไปที่ไฟล์ที่ถูกต้องและเริ่มเล่น 

 เล่นฟังก์ชั่น (URL)
{
  Playersource.src = URL;
  ผู้เล่น. controls = true;
  ผู้เล่นโหลด ();
  ผู้เล่นเล่น ();
}

บทความนี้ปรากฏในฉบับที่ 266 ของนักออกแบบเว็บไซต์นิตยสาร Creative Web Design - เสนอแบบฝึกหัดผู้เชี่ยวชาญแนวโน้มที่ทันสมัยและทรัพยากรฟรี ซื้อปัญหา 266 ที่นี่ หรือ สมัครสมาชิกกับนักออกแบบเว็บไซต์ที่นี่ .

บทความที่เกี่ยวข้อง:

  • วิธีการเปิดเมนูของคุณด้วยภาพเคลื่อนไหว CSS
  • ตัวอย่าง HTML ที่น่าทึ่ง 16
  • 9 ของแหล่งข้อมูลที่ดีที่สุดสำหรับการเรียนรู้ HTML และ CSS

วิธีการ - บทความยอดนิยม

Adobe Fresco Tutorial: สร้างภาพเหมือนในแอปภาพวาด

วิธีการ Sep 11, 2025

(เครดิตรูปภาพ: Phil Galloway) สำหรับการกวดวิชา Adobe Fresco �..

เริ่มต้นด้วย Artrage

วิธีการ Sep 11, 2025

(เครดิตรูปภาพ: Steve Goad) เริ่มต้นด้วย Artrage ..

วิธีการวาดหมาป่า

วิธีการ Sep 11, 2025

หากคุณเชี่ยวชาญ วิธีการวาดสุนัข คุณจะได้รับการอภ..

วิธีการวาดแมว

วิธีการ Sep 11, 2025

ต้องการทราบวิธีการวาดแมว? คุณมาถูกที่แล้ว การ..

วิธีการปรับปรุงศิลปะตัวละครของคุณ

วิธีการ Sep 11, 2025

เมื่อคุณมอบหมายการสร้าง การออกแบบตัวละคร ..

ทาสีเกม Sci-Fi ใน Photoshop

วิธีการ Sep 11, 2025

ฉันมักจะคิดว่าความคิดริเริ่มนั้นพบที่ไหนสัก..

วิธีการทำงานของ Snapping ในแอป 3D

วิธีการ Sep 11, 2025

หนึ่งในสิ่งสำคัญที่ทำงานใน CGI ควรให้ความแม่นย�..

วิธีการเข้ารหัสเครื่องหมายความจริงเพิ่ม

วิธีการ Sep 11, 2025

หน้า 1 จาก 2: หน้า 1 หน้า 1 ..

หมวดหมู่