DPlayer.js 비디오 재생 플러그 인 사용 방법

DPlayer.js 비디오 재생 플러그 인 간단하게 사용
주로 영상 재생,감청 시작,종료,일시 정지,재생 시간,전환 영상 을 사용 했다.
공식 문서:http://dplayer.js.org
효과 그림:

**
주의:저 는 현지에서 서 비 스 를 시 작 했 습 니 다.랜 으로 핸드폰 테스트 에 연 결 했 습 니 다.그 중에서 애플 핸드폰 에서 영상의 이동 영상 위치 가 효력 을 잃 었 고 안 드 로 이 드 핸드폰 이 좋 습 니 다.아직 해결 되 지 않 았 습 니 다.나중에 시간 이 있 으 면 계속 업 데 이 트 될 것 입 니 다.
**
코드 부분 html:

<link rel="stylesheet" href="css/dplayer.min.css">
<script src="js/dplayer.min.js"></script>
    
 <div id="dplayer" style="font-size: 12px;"></div>

<button class="click1">    </button>
js:

$(function () { //      
            const dplayer = new DPlayer({
                container: document.getElementById('dplayer'),
                video: {
                    url: 'video/001.mp4', //    
                    pic: 'images/banner1.png', //    
                    thumbnails: 'images/banner2.png', //     
                    type: 'auto'
                },
            });
            dplayer.seek('6.972618'); //         

            //       
            $('.click1').click(function () {
                switchVideos();
            })

            //     
            dplayer.on('play', function () {
                console.log("  ");
                dplayer.seek('6.972618'); //         
            });
            dplayer.on('pause', function () {
                console.log("  ");
                console.log(dplayer.video.currentTime); //        
            });
            dplayer.on('ended', function () {
                console.log("    ");
            });
            dplayer.on('error', function () {
                console.log("    ");
            });
        })

        function switchVideos() {
            // ajax               
            // ......
            dplayer.switchVideo({
                url: 'video/002.mp4', //  data    URL
                pic: 'images/banner2.png', //      
                thumbnails: 'images/banner2.png' //     
            })
}
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기