close

วิธีใช้ JW Player: ฝังและกำหนดค่าวิดีโอ

JW Player คืออะไร?

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

วิธีรับไลบรารี JW Player

คุณมีสองตัวเลือกในการรับไลบรารี JW Player: ใช้ CDN หรือดาวน์โหลดสำหรับการโฮสต์ภายในเครื่อง

1. การใช้ CDN(แนะนำ)

การใช้ CDN(Content Delivery Network) เป็นวิธีที่ง่ายที่สุดและรวดเร็วที่สุดในการรวม JW Player CDN ช่วยให้โหลดไฟล์ได้เร็วขึ้นเนื่องจากไฟล์ถูกโฮสต์บนเซิร์ฟเวอร์หลายแห่งทั่วโลก

ในการใช้ CDN เพียงเพิ่มบรรทัดโค้ดต่อไปนี้ลงใน<head>ส่วนของเว็บไซต์ของคุณหมายเหตุ:คุณต้องแทนที่<YOUR_LICENSE_KEY>ด้วยรหัสลิขสิทธิ์จริงของคุณ

<script src="https://cdn.jwplayer.com/libraries/<YOUR_LICENSE_KEY>.js"></script>

2. การดาวน์โหลดและโฮสต์ในเครื่อง

หากคุณต้องการควบคุมไฟล์ทั้งหมดและไม่ต้องการพึ่งการเชื่อมต่อเครือข่าย คุณสามารถดาวน์โหลด JW Player และโฮสต์บนเซิร์ฟเวอร์ของคุณเองได้

  1. ไปที่เว็บไซต์ JW Player อย่างเป็นทางการ

  2. ลงทะเบียนหรือเข้าสู่ระบบบัญชีของคุณ(มีรุ่นทดลองใช้งานฟรี)

  3. ค้นหาและดาวน์โหลดห้องสมุดจากแดชบอร์ดบัญชีของคุณ

  4. แตกไฟล์และอัปโหลดโฟลเดอร์ไปยังเซิร์ฟเวอร์ของคุณ

คำแนะนำโดยละเอียดเกี่ยวกับการใช้ JW Player

เมื่อคุณมีไลบรารีแล้ว คุณสามารถเริ่มฝัง JW Player ลงในเว็บไซต์ของคุณได้

1. สร้างไฟล์ HTML และฝัง JW Player

นี่คือตัวอย่าง HTML ฉบับสมบูรณ์ หากคุณใช้ CDN ให้แทนที่<script src="...">บรรทัดนั้นด้วยโค้ด CDN ที่ระบุไว้ข้างต้น หากคุณใช้ไลบรารีที่ดาวน์โหลดมา โปรดตรวจสอบให้แน่ใจว่าเส้นทางไปยังjwplayer.jsไฟล์นั้นถูกต้อง

<!DOCTYPE html>  
<html>  
<head>  
    <title>JW Player Example</title>  
    <script src="js/jwplayer.js"></script>  
</head>  
<body>  
  
    <h1>How to Use JW Player</h1>  
  
    <div id="video-container"></div>  
  
    <script>  
        // Initialize and configure JW Player  
        jwplayer("video-container").setup({  
            // The path to your video file  
            "file": "videos/my-video.mp4",  
              
            // The path to your video's thumbnail image  
            "image": "images/my-video-thumbnail.jpg",  
              
            // The dimensions of the player  
            "width": "640",  
            "height": "360",  
              
            // Autoplay the video when the page loads  
            "autostart": false,  
              
            // Show the player controls  
            "controls": true  
        });  
    </script>  
  
</body>  
</html>

2. คำอธิบายโดยละเอียดของรหัส

  • <script src="...">บรรทัดนี้จะเชื่อมโยงไลบรารี JW Player กับเว็บไซต์ของคุณ

  • <div id="video-container"></div>:นี่คือตำแหน่งที่จะแสดงวิดีโอ คุณสามารถใส่ชื่ออะไรก็ได้idแต่ต้องแน่ใจว่าตรงกับชื่อที่ใช้ในjwplayer()ฟังก์ชัน

  • jwplayer("video-container").setup({...}):นี่คือที่ที่คุณจะเริ่มต้นและกำหนดค่า JW Player

    • "file":เส้นทางไปยังไฟล์วิดีโอของคุณ

    • "image": เส้นทางไปยังรูปภาพย่อของวิดีโอ

    • "width"และ"height": กำหนดขนาดสำหรับโปรแกรมเล่น คุณยังสามารถใช้"100%"สำหรับโปรแกรมเล่นแบบตอบสนองได้ อีกด้วย

    • "autostart": ตั้งค่าtrueหากคุณต้องการให้วิดีโอเล่นโดยอัตโนมัติ

    • "controls": ตั้งค่าเป็นfalseว่าคุณต้องการซ่อนการควบคุมเครื่องเล่น

ด้วยคำแนะนำโดยละเอียดนี้ คุณสามารถเริ่มใช้ JW Player เพื่อแสดงวิดีโอบนเว็บไซต์ของคุณได้อย่างง่ายดาย