ระบบเล่น VDO จาก Google Drive

bysemicon -
0

 


วิธีการตั้งค่าสำคัญ (เพื่อให้วิดีโอเล่นได้จริง)

  1. การแชร์ไฟล์: ไฟล์วิดีโอและโฟลเดอร์ใน Google Drive ต้องตั้งค่าการแชร์เป็น "Anyone with the link" (ทุกคนที่มีลิงก์) ไม่เช่นนั้นวิดีโอจะไม่แสดงในหน้าเว็บ
  2. ID โฟลเดอร์: นำ ID จาก URL ของโฟลเดอร์มาใส่ในตัวแปร folderId ใน Code.gs

  3. Deployment:

    กดปุ่ม Deploy > New Deployment
    • เลือกประเภทเป็น Web App
    • ช่อง Execute as ให้เลือก Me
    • ช่อง Who has access ให้เลือก Anyone
    • กด Deploy และนำ URL ที่ได้ไปเปิดใช้งาน

สิ่งที่จะได้รับ:

  • UI เลียนแบบแอปวิดีโอ: มีพื้นที่เล่นวิดีโอขนาดใหญ่ด้านซ้าย และรายการวิดีโอแนะนำด้านขวา
  • Auto-Sync: เมื่อคุณอัปโหลดไฟล์วิดีโอใหม่ลงในโฟลเดอร์ Google Drive ระบบจะดึงมาแสดงใน Playlist ให้โดยอัตโนมัติ
  • Responsive: รองรับการแสดงผลทั้งบนคอมพิวเตอร์และมือถือตามมาตรฐาน Bootstrap 5.3


code.gs

     
function doGet() {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .setTitle('My Video Drive Player')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}


function getVideoList() {
  try {
    const folderId = '1X3STEbletlOiWkC4crulaRcgndUvyBSP'; // ตรวจสอบให้แน่ใจว่า ID ถูกต้อง
    const folder = DriveApp.getFolderById(folderId);
    
    // เปลี่ยนมาใช้ searchFiles เพื่อความแม่นยำและไม่เกิดค่า Null
    // ค้นหาไฟล์ที่เป็น video/mp4 หรือจะเอา video ทั้งหมดก็ได้
    const files = folder.searchFiles('mimeType contains "video/" and trashed = false');
    
    const videoData = [];
    
    while (files.hasNext()) {
      const file = files.next();
      videoData.push({
        id: file.getId(),
        name: file.getName(),
        // รูป Thumbnail ดึงจาก Link ที่ Google Gen ให้เบื้องต้น
        thumbnail: "https://drive.google.com/thumbnail?id=" + file.getId() + "&sz=w300"
      });
    }
    
    return videoData;
    
  } catch (e) {
    // ส่ง Error กลับไปแสดงที่ Console ของ Browser เพื่อช่วย Debug
    throw new Error("เกิดข้อผิดพลาดในการดึงข้อมูล: " + e.message);
  }
}

index.html

     
<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      background-color: #1a1a1a;
      color: #ffffff;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .video-container {
      background: #000;
      border-radius: 12px;
      overflow: hidden;
      position: relative;
      padding-top: 56.25%;
      /* 16:9 Aspect Ratio */
    }

    .video-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }

    .playlist-card {
      background: #252525;
      border-radius: 10px;
      cursor: pointer;
      transition: 0.3s;
      margin-bottom: 10px;
      border: none;
    }

    .playlist-card:hover {
      background: #3d3d3d;
    }

    .thumb-box {
      width: 120px;
      height: 68px;
      object-fit: cover;
      border-radius: 8px;
    }

    .video-title {
      font-size: 1.1rem;
      font-weight: 600;
      margin-top: 15px;
    }

    .sidebar {
      max-height: 80vh;
      overflow-y: auto;
      padding-right: 5px;
    }

    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 6px;
    }

    ::-webkit-scrollbar-thumb {
      background: #444;
      border-radius: 10px;
    }
  </style>
</head>

<body>

  <div class="container-fluid py-4">
    <div class="row">
      <div class="col-lg-8 col-md-12 mb-4">
        <div class="video-container shadow-lg">
          <iframe id="mainPlayer" src="" allow="autoplay"></iframe>
        </div>
        <h1 id="playingTitle" class="video-title">กำลังโหลดวิดีโอ...</h1>
        <hr style="border-color: #444;">
        <div class="d-flex align-items-center">
          <div class="bg-primary rounded-circle me-2" style="width:40px; height:40px;"></div>
          <div><strong>My Drive Studio</strong><br><small class="text-secondary">101K views • Recently uploaded</small>
          </div>
        </div>
      </div>

      <div class="col-lg-4 col-md-12">
        <h6 class="mb-3 text-secondary">Similar videos</h6>
        <div id="playlist" class="sidebar">
        </div>
      </div>
    </div>
  </div>

  <script>
    // เมื่อหน้าโหลดเสร็จ ให้ไปดึงข้อมูลจาก Server
  window.onload = function() {
    google.script.run.withSuccessHandler(renderPlaylist).getVideoList();
  };

  function renderPlaylist(videos) {
    const listDiv = document.getElementById('playlist');
    if (videos.length === 0) {
      listDiv.innerHTML = "ไม่พบไฟล์วิดีโอในโฟลเดอร์";
      return;
    }

    videos.forEach((vid, index) => {
      const card = document.createElement('div');
      card.className = 'playlist-card p-2 d-flex';
      card.onclick = () => playVideo(vid.id, vid.name);
      card.innerHTML = `
        <img src="${vid.thumbnail}" class="thumb-box me-2">
        <div>
          <div style="font-size:0.9rem; font-weight:500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">${vid.name}</div>
          <small class="text-secondary">Google Drive Video</small>
        </div>
      `;
      listDiv.appendChild(card);
      
      // เล่นวิดีโอแรกโดยอัตโนมัติ
      if(index === 0) playVideo(vid.id, vid.name);
    });
  }

  function playVideo(id, name) {
    // ใช้ preview link ของ Google Drive เพื่อให้เล่นได้เลย
    const embedUrl = "https://drive.google.com/file/d/" + id + "/preview";
    document.getElementById('mainPlayer').src = embedUrl;
    document.getElementById('playingTitle').innerText = name;
  }
  </script>

</body>

</html>



หากถูกใจโปรดสนับสนุนเป็นกำลังใจกันด้วยนะครับ

สนับสนุนที่นี่




Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า