File Paths ใน HTML (พาธไฟล์)

File path (พาธไฟล์) ในเว็บไซต์คือตำแหน่งของไฟล์ในเว็บไซต์นั้น อาจเป็น Relative path (พาธสัมพัทธ์) อ้างอิงจากตำแหน่งปัจจุบัน หรือ Absolute path (พาธสัมบูรณ์) คือ URL เต็มของไฟล์

ไวยากรณ์ (Syntax)

1) Relative Path (พาธสัมพัทธ์)

src="ImgFolder/picture.jpg"

หรือ

src="../ImgFolder/picture.jpg"

หรือ

src="/ImgFolder/picture.jpg"

2) Absolute Path (พาธสัมบูรณ์)

src="https://www.tutorialspoint.com/html5/foo.mp4"

URL เต็ม รวม protocol, domain, path

ตัวอย่าง: HTML DOM Video src property

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video src</title>
<style>
  * { padding: 2px; margin: 5px; }
  form { width: 70%; margin: 0 auto; text-align: center; }
  input[type="button"] { border-radius: 10px; }
</style>
</head>
<body>
<form>
  <fieldset>
    <legend>HTML-DOM-Video-src</legend>
    <video id="wordPressIntro" width="320" controls src="https://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4"></video><br>
    <input type="button" onclick="getTrackDetails()" value="ดู URL">
    <input type="text" id="textSelect" placeholder="Full Name...">
    <div id="divDisplay"></div>
  </fieldset>
</form>
<script>
  var divDisplay = document.getElementById("divDisplay");
  var textSelect = document.getElementById("textSelect");
  var wordPressIntro = document.getElementById("wordPressIntro");
  function getTrackDetails() {
    if (textSelect.value === 'admin')
      divDisplay.textContent = 'Video URL: ' + wordPressIntro.src;
    else
      divDisplay.textContent = 'Cannot Provide URL, Unauthorized User';
  }
</script>
</body>
</html>

ผลลัพธ์

ก่อนกด "ดู URL": แสดง video player พร้อมช่องกรอกชื่อและปุ่ม

หลังกด "ดู URL" (กรอก admin): แสดง "Video URL: https://www.tutorialspoint.com/html5/foo.mp4"

หลังกด "ดู URL" (กรอกอื่น): แสดง "Cannot Provide URL, Unauthorized User"

คำอธิบายโค้ด

• Video element มี src เป็น absolute URL
• ปุ่ม "ดู URL" เรียก getTrackDetails()
• ตรวจสอบ textSelect.value === 'admin' ถ้าถูกต้อง แสดง videoElement.src (คืนค่า absolute URL แม้จะตั้งค่าเป็น relative)

แนวทางปฏิบัติที่ดี (Best Practices)

• ใช้ Relative paths สำหรับไฟล์ในโปรเจกต์เดียวกัน — ย้ายโดเมน/โฟลเดอร์ได้ง่าย
• ใช้ Absolute paths สำหรับ external resources (CDN, API, external sites)
• หลีกเลี่ยง ../../../ ลึกเกินไป — ใช้ root-relative (/assets/...) แทน
• ตรวจสอบ path ด้วย DevTools (Network tab) เมื่อไฟล์โหลดไม่ได้