close

Jagorar DPlayer: Sanya kuma Sanya Bidiyoyin MP4, HLS, FLV

Menene DPlayer?

DPlayer babban mai kunna bidiyo ne mai buɗe ido. Yana goyan bayan tsarin bidiyo na gama gari kamar MP4 amma kuma yana sarrafa rafukan HLS da FLV, yana mai da shi manufa don sake kunna bidiyo kai tsaye. DPlayer ya yi fice tare da mafi ƙarancin ƙa'idarsa, ƙirar ƙirar da za a iya daidaita shi da ginanniyar fasalin "danmaku"(sharri mai iyo).

Cikakken Jagora don Amfani da DPlayer

Don amfani da DPlayer, kuna buƙatar shigar da ɗakin karatu da duk wani abin dogaro, sannan saita mai kunnawa.

Mataki 1: Samu Laburaren Labura

Amfani da CDN ita ce hanya mafi sauri don samun waɗannan ɗakunan karatu. DPlayer zai gano ta atomatik kuma yayi amfani da dakunan karatu masu dogara idan kun haɗa su akan shafinku.

  • Don MP4(tsoho):

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

  • Don 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>

  • Don 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>

Mataki 2: Ƙirƙiri HTML kuma saita mai kunnawa

Bayan shigar da ɗakunan karatu, zaku iya ƙirƙirar wani <div>abu don nuna bidiyon sannan ku saita DPlayer tare da takamaiman kaddarorin.

<!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>

Cikakken Bayanin Kayayyakin

Abubuwan gama gari(sun dace da kowane nau'in bidiyo)

  • container: Abubuwan DOM inda za a sanya DPlayer. Da ake bukata

  • autoplay: trueko false. Yana kunna bidiyo ta atomatik lokacin da shafin yayi lodi.

  • theme: Lambar launi hex(misali, '#FADFA3'). Yana saita launin lafazi na mai kunnawa.

  • lang: Harshen mu'amalar mai amfani, misali, 'en'na Ingilishi.

  • loop: trueko false. Zazzage bidiyon bayan ya ƙare.

  • hotkey: trueko false. Yana ba da damar gajerun hanyoyin madannai(misali, sandarar sarari don kunna/dakata).

  • preload: 'auto', 'metadata', ko 'none'. Yadda mai lilo ya fara loda bidiyo.

    • 'auto': Preloads da dukan video.

    • 'metadata': Metadata kawai ya fara lodawa(lokacin, girma).

    • 'none': Ba ya preload wani abu.

  • screenshot: trueko false. Yana ba masu amfani damar ɗaukar hotunan bidiyon.

  • video.url: Hanyar zuwa fayil ɗin bidiyo.

  • video.pic: Hanyar zuwa hoton thumbnail.

  • video.thumbnails: Hanyar zuwa thumbnail sprite don neman mashaya.

Properties don HLS da FLV

Waɗannan nau'ikan bidiyo suna buƙatar ɗakunan karatu na waje don aiki. DPlayer yana amfani da su ta atomatik, amma kuma kuna iya tsara halayensu ta hanyar customTypekayan.

  • video.type: Yana ƙayyade nau'in bidiyo.

    • 'mp4': Default, za a iya tsallake.

    • 'hls': Don .m3u8bidiyo.

    • 'flv': Don .flvbidiyo.

  • video.customType: Abu ne da ke ba ka damar tsara dabarun sarrafawa don kowane nau'in bidiyo.

    • Misali tare da HLS: Lambobin da ke ciki customType.hlssuna ƙirƙirar Hlsmisali kuma suna haɗa shi zuwa ɓangaren DPlayer <video>. Wannan yana da amfani don sarrafa lokuta na musamman ko samun ƙarin iko akan rafin HLS.

    • Misali tare da FLV: Hakazalika, wannan lambar tana ƙirƙira flvPlayerkuma tana haɗa ta zuwa <video>kashi don sarrafa rafin FLV.

Tare da waɗannan kaddarorin, zaku iya ƙirƙirar na'urar bidiyo mai ƙarfi da daidaitawa don kowane buƙatu, daga bidiyo masu sauƙi zuwa rafukan raye-raye.