จะฝังวิดีโอด้วยแท็ก HTML5 ` ` อย่างไร?

การฝังวิดีโอด้วยแท็ก HTML5 ` ` ให้ใส่องค์ประกอบ ` ` ในไฟล์ HTML และเพิ่มแท็ก ` ` เพื่อระบุไฟล์วิดีโอ ตัวอย่างเช่น `

Tutorials

คู่มือฝังวิดีโอเพลเยอร์: HTML5, Video.js และเพลเยอร์กำหนดเอง

คู่มือฝังวิดีโอเพลเยอร์ ครอบคลุม HTML5 แบบ native การผสาน Video.js และการแลกเปลี่ยนเรื่องสถาปัตยกรรมเพลเยอร์กำหนดเองสำหรับเว็บแอปจริง

dcast Team

7 กุมภาพันธ์ 2569

อ่าน 6 นาที

แชร์:

คู่มือฝังวิดีโอเพลเยอร์: HTML5, Video.js และเพลเยอร์กำหนดเอง บน dcast.tv

On this page

รู้จักวิดีโอเพลเยอร์

วิดีโอเพลเยอร์เป็นองค์ประกอบสำคัญในการส่งคอนเทนต์มัลติมีเดียบนเว็บ ช่วยให้ผู้ใช้รับชมวิดีโอได้อย่างลื่นไหล ยกระดับประสบการณ์และการมีส่วนร่วมของผู้ใช้ คู่มือนี้ครอบคลุมพื้นฐานการฝังวิดีโอเพลเยอร์ด้วย HTML5 การผสานไลบรารียอดนิยม Video.js และการสร้างเพลเยอร์กำหนดเองให้เข้ากับความต้องการเฉพาะ

ภาพรวมของ HTML5 Video, Video.js และตัวเลือกเพลเยอร์กำหนดเอง

HTML5 video เป็นฟีเจอร์ native ของเบราว์เซอร์ที่เล่นวิดีโอได้โดยไม่ต้องใช้ปลั๊กอินเพิ่ม รองรับหลายฟอร์แมตและมีแท็ก <video> สำหรับฝังวิดีโอลงหน้าเว็บโดยตรง ส่วน Video.js เป็นไลบรารี JavaScript ยอดนิยมที่ยกระดับการเล่น HTML5 video ด้วยอินเทอร์เฟซที่สม่ำเสมอข้ามเบราว์เซอร์และอุปกรณ์ ขณะที่เพลเยอร์กำหนดเองให้อิสระในการสร้างประสบการณ์เฉพาะตัว โดยนักพัฒนากำหนดคอนโทรล สไตล์ และฟังก์ชันได้เอง

เปรียบเทียบข้อดีและกรณีใช้งานอย่างย่อ

HTML5 Video: เรียบง่าย เบา และรองรับทั่วทุกที่ เหมาะกับความต้องการเล่นวิดีโอพื้นฐาน
Video.js: มีฟีเจอร์ขั้นสูงอย่าง adaptive streaming การรองรับซับไตเติล และการปรับแต่ง เหมาะกับโปรเจกต์ที่ต้องควบคุมฟังก์ชันเพลเยอร์อย่างละเอียด
เพลเยอร์กำหนดเอง: ปรับแต่งได้สูงและออกแบบให้ตรงกับดีไซน์และฟังก์ชันเฉพาะได้ เหมาะกับโปรเจกต์ที่เพลเยอร์มาตรฐานยังไม่ตอบโจทย์

ตั้งค่าสภาพแวดล้อมการพัฒนา

ก่อนฝังวิดีโอเพลเยอร์ สิ่งสำคัญคือการตั้งค่าสภาพแวดล้อมการพัฒนาพร้อมเครื่องมือและไลบรารีที่จำเป็น หัวข้อนี้อธิบายขั้นตอนการตั้งค่าพื้นฐานสำหรับ HTML, CSS และ JavaScript

การตั้งค่า HTML, CSS และ JavaScript พื้นฐาน

เริ่มจากสร้างไฟล์ HTML ใหม่ ใส่ส่วน <head> พร้อม meta tag ลิงก์ไปยังไฟล์ CSS และแท็ก script สำหรับ JavaScript ใช้โปรแกรมแก้ไขข้อความอย่าง Visual Studio Code หรือ Sublime Text ในการเขียนโค้ด

เครื่องมือและไลบรารีที่ต้องใช้ในการพัฒนา

HTML: ภาษามาร์กอัปโครงสร้างสำหรับหน้าเว็บ
CSS: ภาษาสำหรับจัดสไตล์องค์ประกอบ HTML
JavaScript: ภาษาโปรแกรมสำหรับเพิ่มองค์ประกอบอินเทอร์แอกทีฟ
Video.js: ไลบรารี JavaScript สำหรับการเล่นวิดีโอขั้นสูง

หากต้องการใช้ Video.js ในโปรเจกต์ คุณสามารถใช้ CDN หรือดาวน์โหลดไฟล์ไลบรารี เพิ่มแท็ก script และ style ต่อไปนี้ลงใน <head> ของ HTML:

<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.11.4/video.js"></script>

ฝัง HTML5 Video Player

แท็ก <video> ของ HTML5 เป็นวิธีตรงไปตรงมาในการฝังวิดีโอลงหน้าเว็บ หัวข้อนี้ครอบคลุมพื้นฐานการใช้แท็ก <video> และการเพิ่มแอตทริบิวต์ต่างๆ เพื่อเสริมฟังก์ชัน

การใช้แท็ก HTML `<video>` พื้นฐาน

แท็ก <video> ใช้ฝังคอนเทนต์วิดีโอ ตัวอย่างพื้นฐาน:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

เพิ่มคอนโทรล แหล่งวิดีโอ และซับไตเติล

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

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
  Your browser does not support the video tag.
</video>

ตัวอย่าง: ฝังวิดีโอที่มีหลายฟอร์แมต

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

<video width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

ผสาน Video.js Player

Video.js เป็นไลบรารีทรงพลังที่ให้ฟีเจอร์ขั้นสูงและปรับแต่งได้ หัวข้อนี้ครอบคลุมขั้นตอนการติดตั้งและการตั้งค่าพื้นฐาน

ติดตั้งและใส่ Video.js ในโปรเจกต์

ใส่ Video.js ในโปรเจกต์ผ่าน CDN หรือไฟล์ในเครื่อง เพิ่มแท็ก script และ style ต่อไปนี้ลงใน <head> ของ HTML:

<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.11.4/video.js"></script>

การตั้งค่าและปรับแต่งพื้นฐาน

เริ่มต้นเพลเยอร์ด้วย JavaScript ตั้งค่าตัวเลือกอย่าง autoplay, loop และ controls:

<video id="my-video" class="video-js" controls preload="auto" width="640" height="360" data-setup="{}">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>.</p>
</video>

<script>
  var player = videojs('my-video');
  player.play();
  player.loop(true);
</script>

ตัวอย่าง: ฝัง Video.js Player พร้อมคอนโทรลกำหนดเอง

ปรับแต่งคอนโทรลของเพลเยอร์ด้วยการเพิ่มปุ่มและฟังก์ชันเอง เช่น สร้างปุ่มเล่นแบบกำหนดเอง:

<div class="video-js-custom-controls">
  <button id="play-button">Play</button>
  <button id="pause-button">Pause</button>
</div>

<script>
  var player = videojs('my-video');
  document.getElementById('play-button').addEventListener('click', function() {
    player.play();
  });
  document.getElementById('pause-button').addEventListener('click', function() {
    player.pause();
  });
</script>

สร้างเพลเยอร์กำหนดเอง

การสร้างวิดีโอเพลเยอร์กำหนดเองตั้งแต่ต้นให้คุณควบคุมหน้าตาและพฤติกรรมของเพลเยอร์ได้เต็มที่ หัวข้อนี้อธิบายขั้นตอนสร้างเพลเยอร์กำหนดเองด้วย JavaScript และ CSS

ภาพรวมการสร้างเพลเยอร์กำหนดเองตั้งแต่ต้น

เริ่มจากตั้งโครงสร้างพื้นฐานของเพลเยอร์ด้วย HTML:

<div id="custom-player">
  <video id="custom-video" width="640" height="360" controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <div id="controls">
    <button id="play-pause">Play</button>
    <input type="range" id="seek-bar" value="0">
  </div>
</div>

ใช้ JavaScript และ CSS ในการปรับแต่ง

ใช้ JavaScript จัดการอีเวนต์และตรรกะของเพลเยอร์ เพิ่ม event listener ให้ปุ่มและสไลเดอร์:

<script>
  var video = document.getElementById('custom-video');
  var playPauseButton = document.getElementById('play-pause');
  var seekBar = document.getElementById('seek-bar');

  playPauseButton.addEventListener('click', function() {
    if (video.paused || video.ended) {
      video.play();
      playPauseButton.textContent = 'Pause';
    } else {
      video.pause();
      playPauseButton.textContent = 'Play';
    }
  });

  seekBar.addEventListener('input', function() {
    video.currentTime = seekBar.value;
  });
</script>

จัดสไตล์เพลเยอร์ด้วย CSS:

#custom-player {
  width: 640px;
  height: 360px;
}

#controls {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
}

#controls button,
#seek-bar {
  color: white;
  background: none;
  border: none;
  padding: 10px;
}

ตัวอย่าง: ปรับแต่งหน้าตาและพฤติกรรมของเพลเยอร์

ยกระดับหน้าตาเพลเยอร์ด้วยการเพิ่มสไตล์และพฤติกรรมกำหนดเอง เช่น เพิ่มแถบความคืบหน้า (progress bar):

<div id="controls">
  <button id="play-pause">Play</button>
  <div id="progress-container">
    <div id="progress-bar"></div>
    <input type="range" id="seek-bar" value="0">
  </div>
</div>

<script>
  var progressBar = document.getElementById('progress-bar');
  var seekBar = document.getElementById('seek-bar');

  video.addEventListener('timeupdate', function() {
    seekBar.value = (video.currentTime / video.duration) * 100;
    progressBar.style.width = (video.currentTime / video.duration) * 100 + '%';
  });
</script>

<style>
  #progress-container {
    width: 100%;
    height: 10px;
    background: #ccc;
  }

  #progress-bar {
    width: 0;
    height: 100%;
    background: #007bff;
  }
</style>

จัดสไตล์วิดีโอเพลเยอร์

การจัดสไตล์สำคัญต่อการทำให้วิดีโอเพลเยอร์ดูสวยงามและเข้ากับดีไซน์เว็บไซต์ หัวข้อนี้ครอบคลุมเทคนิค CSS ในการจัดสไตล์วิดีโอเพลเยอร์และทำให้ตอบสนอง (responsive)

เทคนิค CSS สำหรับจัดสไตล์เพลเยอร์

ใช้ CSS จัดสไตล์คอนเทนเนอร์ คอนโทรล และองค์ประกอบอื่นๆ ของเพลเยอร์ เช่น เพิ่มสีพื้นหลังและเส้นขอบกำหนดเอง:

#custom-player {
  width: 640px;
  height: 360px;
  border: 2px solid #007bff;
  border-radius: 10px;
}

#controls {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

#controls button,
#seek-bar {
  color: white;
  background: none;
  border: none;
  padding: 10px;
}

ข้อพิจารณาด้านการออกแบบที่ตอบสนอง

ทำให้เพลเยอร์ responsive ด้วยการใช้ CSS media query และเทคนิคเลย์เอาต์ที่ยืดหยุ่น เช่น ใช้ความกว้างและความสูงแบบเปอร์เซ็นต์:

#custom-player {
  width: 100%;
  height: auto;
  max-width: 640px;
  border: 2px solid #007bff;
  border-radius: 10px;
}

@media (max-width: 768px) {
  #custom-player {
    max-width: 100%;
    height: auto;
  }
}

ตัวอย่าง: ทำให้วิดีโอเพลเยอร์ responsive ด้วย CSS

สร้างวิดีโอเพลเยอร์ที่ responsive โดยตั้งคอนเทนเนอร์เป็น position: relative และองค์ประกอบวิดีโอเป็น position: absolute พร้อม width: 100% และ height: auto:

<div id="custom-player">
  <video id="custom-video" width="100%" height="auto" controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

<style>
  #custom-player {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  }

  #custom-player video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

ปรับให้เหมาะสมด้านประสิทธิภาพและการเข้าถึง

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

แนวปฏิบัติที่ดีในการปรับประสิทธิภาพ

ลดจำนวนคำขอ HTTP: ใช้ไฟล์เดียวสำหรับแอสเซตวิดีโอเพื่อลดจำนวนคำขอ HTTP
ใช้ Adaptive Bitrate Streaming: ส่งสตรีมวิดีโอหลายบิตเรตเพื่อปรับการเล่นตามสภาพเครือข่าย
Lazy Loading: โหลดวิดีโอเฉพาะเมื่ออยู่ในวิวพอร์ตเพื่อลดเวลาโหลดหน้าครั้งแรก
ปรับคุณภาพวิดีโอ: ใช้ codec และเทคนิคบีบอัดที่มีประสิทธิภาพเพื่อลดขนาดไฟล์โดยไม่เสียคุณภาพ

ทำให้เป็นไปตามมาตรฐานการเข้าถึง

การนำทางด้วยคีย์บอร์ด: ตรวจให้แน่ใจว่าคอนโทรลของเพลเยอร์ทุกตัวเข้าถึงได้ผ่านคีย์บอร์ด
รองรับ Screen Reader: ใช้ ARIA role และ label เพื่อให้เพลเยอร์เข้าถึงได้ผ่านโปรแกรมอ่านหน้าจอ
คำบรรยาย (Captioning): ใส่คำบรรยายปิด (closed caption) ในทุกวิดีโอเพื่อรองรับผู้ใช้ที่มีความบกพร่องทางการได้ยิน
คอนทราสต์และขนาดตัวอักษร: ให้มีคอนทราสต์และขนาดตัวอักษรเพียงพอตามหลักเกณฑ์ WCAG

ตัวอย่าง: ทำการนำทางด้วยคีย์บอร์ดในเพลเยอร์กำหนดเอง

เพิ่มการนำทางด้วยคีย์บอร์ดให้เพลเยอร์กำหนดเองเพื่อการเข้าถึง:

<div id="custom-player">
  <video id="custom-video" width="640" height="360" controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <div id="controls">
    <button id="play-pause">Play</button>
    <input type="range" id="seek-bar" value="0">
  </div>
</div>

<script>
  var video = document.getElementById('custom-video');
  var playPauseButton = document.getElementById('play-pause');
  var seekBar = document.getElementById('seek-bar');

  document.addEventListener('keydown', function(event) {
    if (event.key === 'Space') {
      if (video.paused || video.ended) {
        video.play();
        playPauseButton.textContent = 'Pause';
      } else {
        video.pause();
        playPauseButton.textContent = 'Play';
      }
    }
    if (event.key === 'ArrowLeft') {
      video.currentTime -= 5;
    }
    if (event.key === 'ArrowRight') {
      video.currentTime += 5;
    }
  });

  seekBar.addEventListener('input', function() {
    video.currentTime = seekBar.value;
  });
</script>

แก้ปัญหาที่พบบ่อย

ปัญหาที่พบบ่อยเมื่อฝังวิดีโอเพลเยอร์ ได้แก่ ปัญหาการเล่น ความเข้ากันได้ และคอขวดด้านประสิทธิภาพ หัวข้อนี้ครอบคลุมปัญหาที่พบบ่อยพร้อมเคล็ดลับการดีบัก

ปัญหาการฝังและปรับแต่งที่พบบ่อย

ปัญหาการเล่น: วิดีโอไม่เล่นในบางเบราว์เซอร์หรืออุปกรณ์
ปัญหาประสิทธิภาพ: เวลาโหลดช้าหรือการเล่นกระตุก
ปัญหาการปรับแต่ง: คอนโทรลกำหนดเองไม่ทำงานตามที่คาด

เคล็ดลับและแหล่งข้อมูลในการดีบัก

ตรวจ Browser Console: ใช้ developer tools ของเบราว์เซอร์ตรวจหาข้อผิดพลาด JavaScript
ตรวจสอบฟอร์แมตวิดีโอ: ตรวจให้แน่ใจว่าเบราว์เซอร์เป้าหมายรองรับฟอร์แมตวิดีโอนั้น
ประสิทธิภาพเครือข่าย: ใช้เครื่องมือมอนิเตอร์เครือข่ายเพื่อระบุแอสเซตที่โหลดช้า
เอกสารและฟอรัม: ปรึกษาเอกสารทางการและฟอรัมชุมชนในการแก้ปัญหา

ตัวอย่าง: แก้ปัญหาการเล่นวิดีโอในเบราว์เซอร์ต่างๆ

ระบุและแก้ปัญหาการเล่นด้วยการตรวจความเข้ากันได้ของเบราว์เซอร์และฟอร์แมตวิดีโอ:

<video width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

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

ฟีเจอร์ขั้นสูงและการผสานระบบ

ฟีเจอร์ขั้นสูงของวิดีโอเพลเยอร์อย่างโฆษณาวิดีโอ analytics และการแชร์โซเชียล ช่วยเพิ่มการมีส่วนร่วมของผู้ใช้และให้ข้อมูลเชิงลึกอันมีค่า หัวข้อนี้ครอบคลุมการผสานฟีเจอร์เหล่านี้เข้ากับวิดีโอเพลเยอร์

ฝังโฆษณาวิดีโอและ Analytics

โฆษณาวิดีโอ: ใช้ ad server อย่าง Google Ad Manager ฝังโฆษณาวิดีโอก่อน ระหว่าง หรือหลังวิดีโอหลัก
Analytics: ผสานเครื่องมือ analytics อย่าง Google Analytics เพื่อติดตามยอดชม การมีส่วนร่วม และเมตริกอื่นๆ

ผสานวิดีโอเพลเยอร์เข้ากับแพลตฟอร์มอื่น

การแชร์โซเชียล: เพิ่มปุ่มแชร์โซเชียลให้ผู้ใช้แชร์วิดีโอบนโซเชียลมีเดียได้
ฝังในแพลตฟอร์มอื่น: ฝังวิดีโอเพลเยอร์ในแพลตฟอร์มภายนอกอย่าง WordPress, YouTube หรือโซเชียลมีเดีย

ตัวอย่าง: เพิ่มปุ่มแชร์โซเชียลให้ Video.js Player

เพิ่มปุ่มแชร์โซเชียลให้ Video.js player ด้วย HTML และ JavaScript:

<video id="my-video" class="video-js" controls preload="auto" width="640" height="360" data-setup="{}">
  <source src="movie.mp4" type="video/mp4">
  <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>.</p>
</video>

<div id="social-sharing">
  <button id="share-facebook">Share on Facebook</button>
  <button id="share-twitter">Share on Twitter</button>
</div>

<script>
  var player = videojs('my-video');
  document.getElementById('share-facebook').addEventListener('click', function() {
    window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.location.href), '_blank');
  });
  document.getElementById('share-twitter').addEventListener('click', function() {
    window.open('https://twitter.com/intent/tweet?url=' + encodeURIComponent(window.location.href), '_blank');
  });
</script>

บทสรุปและก้าวต่อไป

คู่มือนี้ครอบคลุมพื้นฐานการฝังและปรับแต่งวิดีโอเพลเยอร์ด้วย HTML5, Video.js และเพลเยอร์กำหนดเอง เมื่อทำตามขั้นตอนที่อธิบายไว้ คุณจะสร้างประสบการณ์การเล่นวิดีโอที่ลื่นไหลและน่าติดตามให้ผู้ใช้ได้

สรุปประเด็นสำคัญ

HTML5 Video: พื้นฐาน เบา และรองรับทั่วทุกที่
Video.js: ฟีเจอร์ขั้นสูงและปรับแต่งได้
เพลเยอร์กำหนดเอง: ควบคุมหน้าตาและฟังก์ชันได้เต็มที่
การจัดสไตล์และการตอบสนอง: ทำให้เพลเยอร์สวยงามและ responsive
ประสิทธิภาพและการเข้าถึง: ปรับให้มีประสิทธิภาพและเป็นไปตามมาตรฐานการเข้าถึง

แหล่งเรียนรู้เพิ่มเติม

HTML5 Video: MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
Video.js: Video.js Documentation: https://docs.videojs.com/
เพลเยอร์กำหนดเอง: GitHub: https://github.com/videojs/videojs-contrib-hls
การปรับประสิทธิภาพ: Google Web Fundamentals: https://developers.google.com/web/fundamentals/performance
การเข้าถึง: W3C Web Accessibility Initiative: https://www.w3.org/WAI/

คำถามที่พบบ่อย

จะฝังวิดีโอด้วยแท็ก HTML5 `<video>` อย่างไร?

การฝังวิดีโอด้วยแท็ก HTML5 <video> ให้ใส่องค์ประกอบ <video> ในไฟล์ HTML และเพิ่มแท็ก <source> เพื่อระบุไฟล์วิดีโอ:

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

หาแหล่งข้อมูลเพิ่มเติมได้ที่ไหน?

เยี่ยมชม dcast.tv เพื่อดูคู่มือและเครื่องมือเพิ่มเติม

คำถามที่พบบ่อย

จะฝังวิดีโอด้วยแท็ก HTML5 `<video>` อย่างไร?

การฝังวิดีโอด้วยแท็ก HTML5 `<video>` ให้ใส่องค์ประกอบ `<video>` ในไฟล์ HTML และเพิ่มแท็ก `<source>` เพื่อระบุไฟล์วิดีโอ ตัวอย่างเช่น `<video width="640" height="360" controls><source src="movie.mp4" type="video/mp4"></video>

หาแหล่งข้อมูลเพิ่มเติมได้ที่ไหน?

เยี่ยมชม dcast.tv เพื่อดูคู่มือและเครื่องมือเพิ่มเติม

สตรีมมิ่งHLSวิดีโอ

dcast Team

Professional video streaming experts helping creators succeed.

เริ่มต้นธุรกิจวิดีโอของคุณวันนี้

เข้าร่วมกับครีเอเตอร์นับพันที่สร้างรายได้จากคอนเทนต์ด้วย DCAST

เริ่มต้นใช้งานฟรี

กลับไปที่บล็อก

Tutorials

คู่มือฝังวิดีโอเพลเยอร์: HTML5, Video.js และเพลเยอร์กำหนดเอง

dcast Team

7 กุมภาพันธ์ 2569

อ่าน 6 นาที

แชร์:

On this page

รู้จักวิดีโอเพลเยอร์

ภาพรวมของ HTML5 Video, Video.js และตัวเลือกเพลเยอร์กำหนดเอง

เปรียบเทียบข้อดีและกรณีใช้งานอย่างย่อ

HTML5 Video: เรียบง่าย เบา และรองรับทั่วทุกที่ เหมาะกับความต้องการเล่นวิดีโอพื้นฐาน
Video.js: มีฟีเจอร์ขั้นสูงอย่าง adaptive streaming การรองรับซับไตเติล และการปรับแต่ง เหมาะกับโปรเจกต์ที่ต้องควบคุมฟังก์ชันเพลเยอร์อย่างละเอียด
เพลเยอร์กำหนดเอง: ปรับแต่งได้สูงและออกแบบให้ตรงกับดีไซน์และฟังก์ชันเฉพาะได้ เหมาะกับโปรเจกต์ที่เพลเยอร์มาตรฐานยังไม่ตอบโจทย์

ตั้งค่าสภาพแวดล้อมการพัฒนา

การตั้งค่า HTML, CSS และ JavaScript พื้นฐาน

เครื่องมือและไลบรารีที่ต้องใช้ในการพัฒนา

HTML: ภาษามาร์กอัปโครงสร้างสำหรับหน้าเว็บ
CSS: ภาษาสำหรับจัดสไตล์องค์ประกอบ HTML
JavaScript: ภาษาโปรแกรมสำหรับเพิ่มองค์ประกอบอินเทอร์แอกทีฟ
Video.js: ไลบรารี JavaScript สำหรับการเล่นวิดีโอขั้นสูง

<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.11.4/video.js"></script>

ฝัง HTML5 Video Player

การใช้แท็ก HTML `<video>` พื้นฐาน

แท็ก <video> ใช้ฝังคอนเทนต์วิดีโอ ตัวอย่างพื้นฐาน:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

เพิ่มคอนโทรล แหล่งวิดีโอ และซับไตเติล

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
  Your browser does not support the video tag.
</video>

ตัวอย่าง: ฝังวิดีโอที่มีหลายฟอร์แมต

<video width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

ผสาน Video.js Player

ติดตั้งและใส่ Video.js ในโปรเจกต์

<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.11.4/video.js"></script>

การตั้งค่าและปรับแต่งพื้นฐาน

เริ่มต้นเพลเยอร์ด้วย JavaScript ตั้งค่าตัวเลือกอย่าง autoplay, loop และ controls:

<video id="my-video" class="video-js" controls preload="auto" width="640" height="360" data-setup="{}">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>.</p>
</video>

<script>
  var player = videojs('my-video');
  player.play();
  player.loop(true);
</script>

ตัวอย่าง: ฝัง Video.js Player พร้อมคอนโทรลกำหนดเอง

<div class="video-js-custom-controls">
  <button id="play-button">Play</button>
  <button id="pause-button">Pause</button>
</div>

<script>
  var player = videojs('my-video');
  document.getElementById('play-button').addEventListener('click', function() {
    player.play();
  });
  document.getElementById('pause-button').addEventListener('click', function() {
    player.pause();
  });
</script>

สร้างเพลเยอร์กำหนดเอง

ภาพรวมการสร้างเพลเยอร์กำหนดเองตั้งแต่ต้น

เริ่มจากตั้งโครงสร้างพื้นฐานของเพลเยอร์ด้วย HTML:

<div id="custom-player">
  <video id="custom-video" width="640" height="360" controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <div id="controls">
    <button id="play-pause">Play</button>
    <input type="range" id="seek-bar" value="0">
  </div>
</div>

ใช้ JavaScript และ CSS ในการปรับแต่ง

<script>
  var video = document.getElementById('custom-video');
  var playPauseButton = document.getElementById('play-pause');
  var seekBar = document.getElementById('seek-bar');

  playPauseButton.addEventListener('click', function() {
    if (video.paused || video.ended) {
      video.play();
      playPauseButton.textContent = 'Pause';
    } else {
      video.pause();
      playPauseButton.textContent = 'Play';
    }
  });

  seekBar.addEventListener('input', function() {
    video.currentTime = seekBar.value;
  });
</script>

จัดสไตล์เพลเยอร์ด้วย CSS:

#custom-player {
  width: 640px;
  height: 360px;
}

#controls {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
}

#controls button,
#seek-bar {
  color: white;
  background: none;
  border: none;
  padding: 10px;
}

ตัวอย่าง: ปรับแต่งหน้าตาและพฤติกรรมของเพลเยอร์

<div id="controls">
  <button id="play-pause">Play</button>
  <div id="progress-container">
    <div id="progress-bar"></div>
    <input type="range" id="seek-bar" value="0">
  </div>
</div>

<script>
  var progressBar = document.getElementById('progress-bar');
  var seekBar = document.getElementById('seek-bar');

  video.addEventListener('timeupdate', function() {
    seekBar.value = (video.currentTime / video.duration) * 100;
    progressBar.style.width = (video.currentTime / video.duration) * 100 + '%';
  });
</script>

<style>
  #progress-container {
    width: 100%;
    height: 10px;
    background: #ccc;
  }

  #progress-bar {
    width: 0;
    height: 100%;
    background: #007bff;
  }
</style>

จัดสไตล์วิดีโอเพลเยอร์

เทคนิค CSS สำหรับจัดสไตล์เพลเยอร์

#custom-player {
  width: 640px;
  height: 360px;
  border: 2px solid #007bff;
  border-radius: 10px;
}

#controls {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

#controls button,
#seek-bar {
  color: white;
  background: none;
  border: none;
  padding: 10px;
}

ข้อพิจารณาด้านการออกแบบที่ตอบสนอง

#custom-player {
  width: 100%;
  height: auto;
  max-width: 640px;
  border: 2px solid #007bff;
  border-radius: 10px;
}

@media (max-width: 768px) {
  #custom-player {
    max-width: 100%;
    height: auto;
  }
}

ตัวอย่าง: ทำให้วิดีโอเพลเยอร์ responsive ด้วย CSS

<div id="custom-player">
  <video id="custom-video" width="100%" height="auto" controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

<style>
  #custom-player {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  }

  #custom-player video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

ปรับให้เหมาะสมด้านประสิทธิภาพและการเข้าถึง

แนวปฏิบัติที่ดีในการปรับประสิทธิภาพ

ลดจำนวนคำขอ HTTP: ใช้ไฟล์เดียวสำหรับแอสเซตวิดีโอเพื่อลดจำนวนคำขอ HTTP
ใช้ Adaptive Bitrate Streaming: ส่งสตรีมวิดีโอหลายบิตเรตเพื่อปรับการเล่นตามสภาพเครือข่าย
Lazy Loading: โหลดวิดีโอเฉพาะเมื่ออยู่ในวิวพอร์ตเพื่อลดเวลาโหลดหน้าครั้งแรก
ปรับคุณภาพวิดีโอ: ใช้ codec และเทคนิคบีบอัดที่มีประสิทธิภาพเพื่อลดขนาดไฟล์โดยไม่เสียคุณภาพ

ทำให้เป็นไปตามมาตรฐานการเข้าถึง

การนำทางด้วยคีย์บอร์ด: ตรวจให้แน่ใจว่าคอนโทรลของเพลเยอร์ทุกตัวเข้าถึงได้ผ่านคีย์บอร์ด
รองรับ Screen Reader: ใช้ ARIA role และ label เพื่อให้เพลเยอร์เข้าถึงได้ผ่านโปรแกรมอ่านหน้าจอ
คำบรรยาย (Captioning): ใส่คำบรรยายปิด (closed caption) ในทุกวิดีโอเพื่อรองรับผู้ใช้ที่มีความบกพร่องทางการได้ยิน
คอนทราสต์และขนาดตัวอักษร: ให้มีคอนทราสต์และขนาดตัวอักษรเพียงพอตามหลักเกณฑ์ WCAG

ตัวอย่าง: ทำการนำทางด้วยคีย์บอร์ดในเพลเยอร์กำหนดเอง

เพิ่มการนำทางด้วยคีย์บอร์ดให้เพลเยอร์กำหนดเองเพื่อการเข้าถึง:

<div id="custom-player">
  <video id="custom-video" width="640" height="360" controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <div id="controls">
    <button id="play-pause">Play</button>
    <input type="range" id="seek-bar" value="0">
  </div>
</div>

<script>
  var video = document.getElementById('custom-video');
  var playPauseButton = document.getElementById('play-pause');
  var seekBar = document.getElementById('seek-bar');

  document.addEventListener('keydown', function(event) {
    if (event.key === 'Space') {
      if (video.paused || video.ended) {
        video.play();
        playPauseButton.textContent = 'Pause';
      } else {
        video.pause();
        playPauseButton.textContent = 'Play';
      }
    }
    if (event.key === 'ArrowLeft') {
      video.currentTime -= 5;
    }
    if (event.key === 'ArrowRight') {
      video.currentTime += 5;
    }
  });

  seekBar.addEventListener('input', function() {
    video.currentTime = seekBar.value;
  });
</script>

แก้ปัญหาที่พบบ่อย

ปัญหาการฝังและปรับแต่งที่พบบ่อย

ปัญหาการเล่น: วิดีโอไม่เล่นในบางเบราว์เซอร์หรืออุปกรณ์
ปัญหาประสิทธิภาพ: เวลาโหลดช้าหรือการเล่นกระตุก
ปัญหาการปรับแต่ง: คอนโทรลกำหนดเองไม่ทำงานตามที่คาด

เคล็ดลับและแหล่งข้อมูลในการดีบัก

ตรวจ Browser Console: ใช้ developer tools ของเบราว์เซอร์ตรวจหาข้อผิดพลาด JavaScript
ตรวจสอบฟอร์แมตวิดีโอ: ตรวจให้แน่ใจว่าเบราว์เซอร์เป้าหมายรองรับฟอร์แมตวิดีโอนั้น
ประสิทธิภาพเครือข่าย: ใช้เครื่องมือมอนิเตอร์เครือข่ายเพื่อระบุแอสเซตที่โหลดช้า
เอกสารและฟอรัม: ปรึกษาเอกสารทางการและฟอรัมชุมชนในการแก้ปัญหา

ตัวอย่าง: แก้ปัญหาการเล่นวิดีโอในเบราว์เซอร์ต่างๆ

<video width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

ฟีเจอร์ขั้นสูงและการผสานระบบ

ฝังโฆษณาวิดีโอและ Analytics

โฆษณาวิดีโอ: ใช้ ad server อย่าง Google Ad Manager ฝังโฆษณาวิดีโอก่อน ระหว่าง หรือหลังวิดีโอหลัก
Analytics: ผสานเครื่องมือ analytics อย่าง Google Analytics เพื่อติดตามยอดชม การมีส่วนร่วม และเมตริกอื่นๆ

ผสานวิดีโอเพลเยอร์เข้ากับแพลตฟอร์มอื่น

การแชร์โซเชียล: เพิ่มปุ่มแชร์โซเชียลให้ผู้ใช้แชร์วิดีโอบนโซเชียลมีเดียได้
ฝังในแพลตฟอร์มอื่น: ฝังวิดีโอเพลเยอร์ในแพลตฟอร์มภายนอกอย่าง WordPress, YouTube หรือโซเชียลมีเดีย

ตัวอย่าง: เพิ่มปุ่มแชร์โซเชียลให้ Video.js Player

เพิ่มปุ่มแชร์โซเชียลให้ Video.js player ด้วย HTML และ JavaScript:

<video id="my-video" class="video-js" controls preload="auto" width="640" height="360" data-setup="{}">
  <source src="movie.mp4" type="video/mp4">
  <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>.</p>
</video>

<div id="social-sharing">
  <button id="share-facebook">Share on Facebook</button>
  <button id="share-twitter">Share on Twitter</button>
</div>

<script>
  var player = videojs('my-video');
  document.getElementById('share-facebook').addEventListener('click', function() {
    window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.location.href), '_blank');
  });
  document.getElementById('share-twitter').addEventListener('click', function() {
    window.open('https://twitter.com/intent/tweet?url=' + encodeURIComponent(window.location.href), '_blank');
  });
</script>

บทสรุปและก้าวต่อไป

สรุปประเด็นสำคัญ

HTML5 Video: พื้นฐาน เบา และรองรับทั่วทุกที่
Video.js: ฟีเจอร์ขั้นสูงและปรับแต่งได้
เพลเยอร์กำหนดเอง: ควบคุมหน้าตาและฟังก์ชันได้เต็มที่
การจัดสไตล์และการตอบสนอง: ทำให้เพลเยอร์สวยงามและ responsive
ประสิทธิภาพและการเข้าถึง: ปรับให้มีประสิทธิภาพและเป็นไปตามมาตรฐานการเข้าถึง

แหล่งเรียนรู้เพิ่มเติม

HTML5 Video: MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
Video.js: Video.js Documentation: https://docs.videojs.com/
เพลเยอร์กำหนดเอง: GitHub: https://github.com/videojs/videojs-contrib-hls
การปรับประสิทธิภาพ: Google Web Fundamentals: https://developers.google.com/web/fundamentals/performance
การเข้าถึง: W3C Web Accessibility Initiative: https://www.w3.org/WAI/

คำถามที่พบบ่อย

จะฝังวิดีโอด้วยแท็ก HTML5 `<video>` อย่างไร?

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

หาแหล่งข้อมูลเพิ่มเติมได้ที่ไหน?

เยี่ยมชม dcast.tv เพื่อดูคู่มือและเครื่องมือเพิ่มเติม

คำถามที่พบบ่อย

จะฝังวิดีโอด้วยแท็ก HTML5 `<video>` อย่างไร?

หาแหล่งข้อมูลเพิ่มเติมได้ที่ไหน?

เยี่ยมชม dcast.tv เพื่อดูคู่มือและเครื่องมือเพิ่มเติม

สตรีมมิ่งHLSวิดีโอ

dcast Team

Professional video streaming experts helping creators succeed.

เริ่มต้นธุรกิจวิดีโอของคุณวันนี้

เข้าร่วมกับครีเอเตอร์นับพันที่สร้างรายได้จากคอนเทนต์ด้วย DCAST

เริ่มต้นใช้งานฟรี

รู้จักวิดีโอเพลเยอร์

ภาพรวมของ HTML5 Video, Video.js และตัวเลือกเพลเยอร์กำหนดเอง

เปรียบเทียบข้อดีและกรณีใช้งานอย่างย่อ

ตั้งค่าสภาพแวดล้อมการพัฒนา

การตั้งค่า HTML, CSS และ JavaScript พื้นฐาน

เครื่องมือและไลบรารีที่ต้องใช้ในการพัฒนา

ฝัง HTML5 Video Player

การใช้แท็ก HTML <video> พื้นฐาน

เพิ่มคอนโทรล แหล่งวิดีโอ และซับไตเติล

ตัวอย่าง: ฝังวิดีโอที่มีหลายฟอร์แมต

ผสาน Video.js Player

ติดตั้งและใส่ Video.js ในโปรเจกต์

การตั้งค่าและปรับแต่งพื้นฐาน

ตัวอย่าง: ฝัง Video.js Player พร้อมคอนโทรลกำหนดเอง

สร้างเพลเยอร์กำหนดเอง

ภาพรวมการสร้างเพลเยอร์กำหนดเองตั้งแต่ต้น

ใช้ JavaScript และ CSS ในการปรับแต่ง

ตัวอย่าง: ปรับแต่งหน้าตาและพฤติกรรมของเพลเยอร์

จัดสไตล์วิดีโอเพลเยอร์

เทคนิค CSS สำหรับจัดสไตล์เพลเยอร์

ข้อพิจารณาด้านการออกแบบที่ตอบสนอง

ตัวอย่าง: ทำให้วิดีโอเพลเยอร์ responsive ด้วย CSS

ปรับให้เหมาะสมด้านประสิทธิภาพและการเข้าถึง

แนวปฏิบัติที่ดีในการปรับประสิทธิภาพ

ทำให้เป็นไปตามมาตรฐานการเข้าถึง

ตัวอย่าง: ทำการนำทางด้วยคีย์บอร์ดในเพลเยอร์กำหนดเอง

แก้ปัญหาที่พบบ่อย

ปัญหาการฝังและปรับแต่งที่พบบ่อย

เคล็ดลับและแหล่งข้อมูลในการดีบัก

ตัวอย่าง: แก้ปัญหาการเล่นวิดีโอในเบราว์เซอร์ต่างๆ

ฟีเจอร์ขั้นสูงและการผสานระบบ

ฝังโฆษณาวิดีโอและ Analytics

ผสานวิดีโอเพลเยอร์เข้ากับแพลตฟอร์มอื่น

ตัวอย่าง: เพิ่มปุ่มแชร์โซเชียลให้ Video.js Player

บทสรุปและก้าวต่อไป

สรุปประเด็นสำคัญ

แหล่งเรียนรู้เพิ่มเติม

คำถามที่พบบ่อย

จะฝังวิดีโอด้วยแท็ก HTML5 <video> อย่างไร?

หาแหล่งข้อมูลเพิ่มเติมได้ที่ไหน?

คำถามที่พบบ่อย

จะฝังวิดีโอด้วยแท็ก HTML5 `<video>` อย่างไร?

หาแหล่งข้อมูลเพิ่มเติมได้ที่ไหน?

เครื่องมือฟรีสำหรับหัวข้อนี้

dcast Team

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

กรีนสกรีนและพื้นหลังเสมือนสำหรับไลฟ์สตรีมมิ่ง

เช็กลิสต์ก่อนออกอากาศสำหรับเว็บบินาร์องค์กร (2026)

คู่มือการเข้าถึงวิดีโอสำหรับการเรียนออนไลน์

เริ่มต้นธุรกิจวิดีโอของคุณวันนี้

รู้จักวิดีโอเพลเยอร์

ภาพรวมของ HTML5 Video, Video.js และตัวเลือกเพลเยอร์กำหนดเอง

เปรียบเทียบข้อดีและกรณีใช้งานอย่างย่อ

ตั้งค่าสภาพแวดล้อมการพัฒนา

การตั้งค่า HTML, CSS และ JavaScript พื้นฐาน

เครื่องมือและไลบรารีที่ต้องใช้ในการพัฒนา

ฝัง HTML5 Video Player

การใช้แท็ก HTML <video> พื้นฐาน

เพิ่มคอนโทรล แหล่งวิดีโอ และซับไตเติล

ตัวอย่าง: ฝังวิดีโอที่มีหลายฟอร์แมต

ผสาน Video.js Player

ติดตั้งและใส่ Video.js ในโปรเจกต์

การตั้งค่าและปรับแต่งพื้นฐาน

ตัวอย่าง: ฝัง Video.js Player พร้อมคอนโทรลกำหนดเอง

สร้างเพลเยอร์กำหนดเอง

ภาพรวมการสร้างเพลเยอร์กำหนดเองตั้งแต่ต้น

ใช้ JavaScript และ CSS ในการปรับแต่ง

ตัวอย่าง: ปรับแต่งหน้าตาและพฤติกรรมของเพลเยอร์

จัดสไตล์วิดีโอเพลเยอร์

เทคนิค CSS สำหรับจัดสไตล์เพลเยอร์

ข้อพิจารณาด้านการออกแบบที่ตอบสนอง

ตัวอย่าง: ทำให้วิดีโอเพลเยอร์ responsive ด้วย CSS

ปรับให้เหมาะสมด้านประสิทธิภาพและการเข้าถึง

แนวปฏิบัติที่ดีในการปรับประสิทธิภาพ

ทำให้เป็นไปตามมาตรฐานการเข้าถึง

ตัวอย่าง: ทำการนำทางด้วยคีย์บอร์ดในเพลเยอร์กำหนดเอง

แก้ปัญหาที่พบบ่อย

ปัญหาการฝังและปรับแต่งที่พบบ่อย

เคล็ดลับและแหล่งข้อมูลในการดีบัก

ตัวอย่าง: แก้ปัญหาการเล่นวิดีโอในเบราว์เซอร์ต่างๆ

การใช้แท็ก HTML `<video>` พื้นฐาน

จะฝังวิดีโอด้วยแท็ก HTML5 `<video>` อย่างไร?

การใช้แท็ก HTML `<video>` พื้นฐาน

จะฝังวิดีโอด้วยแท็ก HTML5 `<video>` อย่างไร?