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>

இந்தப் பண்புகளைக் கொண்டு, எளிய வீடியோக்கள் முதல் நேரடி ஸ்ட்ரீம்கள் வரை எந்தவொரு தேவைக்கும் ஏற்ற சக்திவாய்ந்த மற்றும் மிகவும் தனிப்பயனாக்கக்கூடிய வீடியோ பிளேயரை நீங்கள் உருவாக்கலாம்.