close

คู่มือ DPlayer: ฝังและกำหนดค่าวิดีโอ MP4, HLS, FLV

DPlayer คืออะไร?

DPlayerคือเครื่องเล่นวิดีโอโอเพนซอร์สที่ทรงพลังและยืดหยุ่น รองรับทั้งไฟล์วิดีโอทั่วไปอย่าง MP4 และ HLS รวมถึงสตรีม FLV จึงเหมาะอย่างยิ่งสำหรับการเล่นวิดีโอสด DPlayer โดดเด่นด้วยอินเทอร์เฟซที่เรียบง่ายและปรับแต่งได้ รวมถึงฟีเจอร์ "danmaku"(ความคิดเห็นแบบลอย) ในตัว

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

ในการใช้ DPlayer คุณต้องฝังไลบรารีและการอ้างอิงที่จำเป็น จากนั้นจึงกำหนดค่าเครื่องเล่น

ขั้นตอนที่ 1: รับไลบรารีที่จำเป็น

การใช้ CDN เป็นวิธีที่เร็วที่สุดในการรับไลบรารีเหล่านี้ DPlayer จะตรวจจับและใช้ไลบรารีที่เกี่ยวข้องโดยอัตโนมัติหากคุณรวมไลบรารีเหล่านั้นไว้ในหน้าเว็บของคุณ

  • สำหรับ MP4(ค่าเริ่มต้น):

    <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>

  • สำหรับ HLS(.m3u8):

    <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>  
<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>

  • สำหรับ FLV(.flv):

    <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>  
<script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>

ขั้นตอนที่ 2: สร้าง HTML และกำหนดค่าเครื่องเล่น

หลังจากฝังไลบรารีแล้ว คุณสามารถสร้าง<div>องค์ประกอบเพื่อแสดงวิดีโอ จากนั้นกำหนดค่า DPlayer ด้วยคุณสมบัติเฉพาะ

<!DOCTYPE html>  
<html>  
<head>  
    <title>Advanced DPlayer Example</title>  
    <script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>  
    <script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>  
    <script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>  
</head>  
<body>  
  
    <h1>How to Use DPlayer</h1>  
  
    <div id="dplayer-container-1"></div>  
  
    <hr>  
  
    <div id="dplayer-container-2"></div>  
  
    <hr>  
  
    <div id="dplayer-container-3"></div>  
  
    <script>  
        // DPlayer configuration for MP4  
        const dpMP4 = new DPlayer({  
            container: document.getElementById('dplayer-container-1'),  
            autoplay: false,  
            lang: 'en',  
            loop: true,  
            hotkey: true,  
            preload: 'auto',  
            screenshot: true,  
            video: {  
                url: 'https://example.com/videos/my-video.mp4',  
                pic: 'https://example.com/images/my-video-thumbnail.jpg',  
                thumbnails: 'https://example.com/images/video-thumbnails.jpg',  
                type: 'mp4'  
            }  
        });  
  
        // DPlayer configuration for HLS  
        const dpHLS = new DPlayer({  
            container: document.getElementById('dplayer-container-2'),  
            autoplay: true,  
            lang: 'en',  
            theme: '#ff6666',  
            loop: false,  
            hotkey: true,  
            preload: 'metadata',  
            video: {  
                url: 'https://example.com/live/my-stream.m3u8',  
                type: 'hls',  
                customType: {  
                    hls: function(video, player) {  
                        const hls = new Hls();  
                        hls.loadSource(video.src);  
                        hls.attachMedia(video);  
                    }  
                }  
            }  
        });  
  
        // DPlayer configuration for FLV  
        const dpFLV = new DPlayer({  
            container: document.getElementById('dplayer-container-3'),  
            autoplay: true,  
            lang: 'en',  
            theme: '#0077c2',  
            loop: false,  
            hotkey: true,  
            preload: 'auto',  
            video: {  
                url: 'https://example.com/live/my-stream.flv',  
                type: 'flv',  
                customType: {  
                    flv: function(video, player) {  
                        const flvPlayer = flvjs.createPlayer({  
                            type: 'flv',  
                            url: video.src,  
                        });  
                        flvPlayer.attachMediaElement(video);  
                        flvPlayer.load();  
                    }  
                }  
            }  
        });  
    </script>  
</body>  
</html>

คำอธิบายคุณสมบัติโดยละเอียด

คุณสมบัติทั่วไป(ใช้ได้กับวิดีโอทุกประเภท)

  • container: องค์ประกอบ DOM ที่จะแสดงผล DPlayer จำเป็นต้องมี

  • autoplay: trueหรือfalse. เล่นวิดีโอโดยอัตโนมัติเมื่อโหลดหน้า

  • theme: รหัสสีแบบเลขฐานสิบหก(เช่น'#FADFA3') กำหนดสีเน้นของเครื่องเล่น

  • lang:ภาษาอินเทอร์เฟซผู้ใช้ เช่น'en'ภาษาอังกฤษ

  • loop: trueหรือfalseวนซ้ำวิดีโอหลังจากจบแล้ว

  • hotkey: trueหรือfalseเปิดใช้งานปุ่มลัดบนแป้นพิมพ์(เช่น ปุ่ม Spacebar เพื่อเล่น/หยุดชั่วคราว)

  • preload: 'auto', 'metadata', หรือ'none'. วิธีที่เบราว์เซอร์โหลดวิดีโอล่วงหน้า

    • 'auto':โหลดวิดีโอทั้งหมดล่วงหน้า

    • 'metadata': โหลดข้อมูลเมตาล่วงหน้าเท่านั้น(ระยะเวลา, มิติ)

    • 'none': ไม่ได้โหลดล่วงหน้าอะไรเลย

  • screenshot: trueหรือfalse. ช่วยให้ผู้ใช้สามารถจับภาพหน้าจอของวิดีโอได้

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

  • video.pic: เส้นทางไปยังรูปภาพขนาดย่อ

  • video.thumbnails:เส้นทางไปยังสไปรต์รูปขนาดย่อสำหรับแถบค้นหา

คุณสมบัติสำหรับ HLS และ FLV

ประเภทวิดีโอเหล่านี้จำเป็นต้องใช้ไลบรารีภายนอกจึงจะทำงานได้ DPlayer จะใช้ไลบรารีเหล่านี้โดยอัตโนมัติ แต่คุณยังสามารถปรับแต่งพฤติกรรมของไลบรารีเหล่านี้ได้ผ่านcustomTypeคุณสมบัติ

  • video.type: ระบุประเภทวิดีโอ

    • 'mp4': ค่าเริ่มต้น สามารถละเว้นได้

    • 'hls': สำหรับ.m3u8วิดีโอ

    • 'flv': สำหรับ.flvวิดีโอ

  • video.customType:วัตถุที่ให้คุณปรับแต่งตรรกะการประมวลผลสำหรับประเภทวิดีโอแต่ละประเภทได้

    • ตัวอย่างการใช้ HLS:โค้ดภายในcustomType.hlsจะสร้างHlsอินสแตนซ์และแนบเข้ากับ<video>องค์ประกอบของ DPlayer ซึ่งมีประโยชน์สำหรับการจัดการกรณีพิเศษหรือการควบคุมสตรีม HLS มากขึ้น

    • ตัวอย่างที่มี FLV:ในทำนองเดียวกันโค้ดนี้จะสร้างflvPlayerและแนบเข้ากับ<video>องค์ประกอบเพื่อจัดการสตรีม FLV

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