DPlayer.js视频播放插件使用方法

1

2

3

4

5

6

<linkrel="stylesheet"href="css/dplayer.min.css">

<scriptsrc="js/dplayer.min.js"></script>

 <divid="dplayer"style="font-size: 12px;"></div>

<buttonclass="click1">切换视频</button>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

$(function() { // 初始化视频

            const dplayer = newDPlayer({

                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("播放异常");

            });

        })

        functionswitchVideos() {

            // ajax发送请求 获取所点击的视频数据

            // ......

            dplayer.switchVideo({

                url: 'video/002.mp4', //赋值data中的视频URL

                pic: 'images/banner2.png', //获取封面图片

                thumbnails: 'images/banner2.png'//视频缩略图

            })

}