close

DPlayer గైడ్: MP4, HLS, FLV వీడియోలను పొందుపరచండి మరియు కాన్ఫిగర్ చేయండి

DPlayer అంటే ఏమిటి?

DPlayer అనేది శక్తివంతమైన మరియు సౌకర్యవంతమైన ఓపెన్-సోర్స్ వీడియో ప్లేయర్. ఇది MP4 వంటి సాధారణ వీడియో ఫార్మాట్‌లకు మద్దతు ఇవ్వడమే కాకుండా HLS మరియు FLV స్ట్రీమ్‌లను కూడా నిర్వహిస్తుంది, ఇది ప్రత్యక్ష వీడియో ప్లేబ్యాక్‌కు అనువైనదిగా చేస్తుంది. DPlayer దాని మినిమలిస్ట్, అనుకూలీకరించదగిన ఇంటర్‌ఫేస్ మరియు అంతర్నిర్మిత "డాన్మాకు"(ఫ్లోటింగ్ కామెంట్స్) ఫీచర్‌తో ప్రత్యేకంగా నిలుస్తుంది.

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: DPlayer రెండర్ చేయబడే DOM మూలకం. అవసరం.

  • autoplay: trueలేదా false. పేజీ లోడ్ అయినప్పుడు వీడియోను స్వయంచాలకంగా ప్లే చేస్తుంది.

  • theme: హెక్స్ కలర్ కోడ్(ఉదా., '#FADFA3'). ప్లేయర్ యొక్క యాస రంగును సెట్ చేస్తుంది.

  • lang: యూజర్ ఇంటర్‌ఫేస్ భాష, ఉదా., 'en'ఇంగ్లీష్ కోసం.

  • loop: trueలేదా false. వీడియో ముగిసిన తర్వాత దాన్ని లూప్ చేస్తుంది.

  • hotkey: trueలేదా false. కీబోర్డ్ షార్ట్‌కట్‌లను ప్రారంభిస్తుంది(ఉదా., ప్లే చేయడానికి/పాజ్ చేయడానికి స్పేస్‌బార్).

  • 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, దానిని DPlayer యొక్క <video>మూలకానికి జత చేస్తుంది. ఇది ప్రత్యేక కేసులను నిర్వహించడానికి లేదా HLS స్ట్రీమ్‌పై మరింత నియంత్రణను పొందడానికి ఉపయోగపడుతుంది.

    • FLV తో ఉదాహరణ: అదేవిధంగా, ఈ కోడ్ FLV స్ట్రీమ్‌ను నిర్వహించడానికి ఒకదాన్ని సృష్టించి flvPlayer, దానిని మూలకానికి జత చేస్తుంది .<video>

ఈ లక్షణాలతో, మీరు సాధారణ వీడియోల నుండి ప్రత్యక్ష ప్రసారాల వరకు ఏదైనా అవసరానికి శక్తివంతమైన మరియు అత్యంత అనుకూలీకరించదగిన వీడియో ప్లేయర్‌ను సృష్టించవచ్చు.