使用dplayer进行视频播放

9573人阅读 2020/8/22 14:22 总访问：5824524 评论：0 收藏：0 手机

分类: 前端

贴个小demo:

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>测试视频播放</title>
    <script src="~/lib/DPlayer/DPlayer.js"></script>
</head>
<body>
        <div id="player1" class="dplayer" style="width:600px;height:400px">

        </div>

    <script>

        var dp1 = new DPlayer({
            element: document.getElementById('dplayer1'),
            preload: 'none',
            screenshot: true,
            video: {
                url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
                pic: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
                thumbnails: 'https://i.loli.net/2019/06/06/5cf8c5d9cec8510758.jpg'
            },
            subtitle: {
                url: 'https://s-sh-17-dplayercdn.oss.dogecdn.com/hikarunara.vtt'
            }
        });

    </script>
</body>
</html>

视频的宽高就由那个小div来觉定，它会自适应的，效果如下。还是很不错的一个播放效果

想要有播放集数的效果，就是弄一个左右布局写一点东西即可，左右布局可以参考：
https://www.tnblog.net/aojiancc2/article/details/4887

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

使用dplayer进行视频播放

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}