close

DPlayer માર્ગદર્શિકા: MP4, HLS, FLV વિડિઓઝને એમ્બેડ અને ગોઠવો

ડીપ્લેયર શું છે?

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. કીબોર્ડ શોર્ટકટ્સને સક્ષમ કરે છે(દા.ત., ચલાવવા/થોભાવવા માટે સ્પેસબાર).

  • 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 સાથે ઉદાહરણ: એ જ રીતે, આ કોડ an બનાવે છે flvPlayerઅને તેને <video>FLV સ્ટ્રીમને હેન્ડલ કરવા માટે એલિમેન્ટ સાથે જોડે છે.

આ ગુણધર્મો સાથે, તમે સરળ વિડિઓઝથી લઈને લાઇવ સ્ટ્રીમ્સ સુધી, કોઈપણ જરૂરિયાત માટે એક શક્તિશાળી અને અત્યંત કસ્ટમાઇઝ કરી શકાય તેવું વિડિઓ પ્લેયર બનાવી શકો છો.