故如虹,知恩;故如月,知明
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
欢迎加群交流技术

使用dplayer进行视频播放

7223人阅读 2020/8/22 14:22 总访问:3842496 评论: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



欢迎加群讨论技术,群:677373950(满了,可以加,但通过不了),2群:656732739

评价