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>

თვისებების დეტალური ახსნა

საერთო თვისებები(ყველა ტიპის ვიდეოსთვის)

  • containerDOM ელემენტი, სადაც 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 ნაკადის დასამუშავებლად.

ამ თვისებების გამოყენებით, თქვენ შეგიძლიათ შექმნათ ძლიერი და ადვილად მორგებადი ვიდეო პლეერი ნებისმიერი საჭიროებისთვის, მარტივი ვიდეოებიდან დაწყებული პირდაპირი ტრანსლაციებით დამთავრებული.