文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

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' //视频缩略图
            })
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯