iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >DPlayer.js视频播放插件使用方法
  • 593
分享到

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

2024-04-02 19:04:59 593人浏览 独家记忆
摘要

DPlayer.js视频播放插件简单的使用 主要用到了实现了:视频播放 、监听开始、结束、暂停、播放时间、切换视频 官方文档:http://dplayer.js.org 效果图:

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

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

--结束END--

本文标题: DPlayer.js视频播放插件使用方法

本文链接: https://www.lsjlt.com/news/123897.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • DPlayer.js视频播放插件使用方法
    DPlayer.js视频播放插件简单的使用 主要用到了实现了:视频播放 、监听开始、结束、暂停、播放时间、切换视频 官方文档:http://dplayer.js.org 效果图: ...
    99+
    2024-04-02
  • Flutter中视频播放器插件如何使用
    这篇文章主要讲解了“Flutter中视频播放器插件如何使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Flutter中视频播放器插件如何使用”吧!创建一个新的视频播放器在使用视频播放器插件...
    99+
    2023-06-29
  • 如何在HTML5中使用video.js视频播放插件
    本篇文章给大家分享的是有关如何在HTML5中使用video.js视频播放插件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。看下默认例子:controls表示控制条,prload...
    99+
    2023-06-09
  • 使用python播放视频文件
    基于python和opencv实现的 import numpy as np import cv2 cap = cv2.VideoCapture('f:/rain_of_lovesickness.mp4') while (cap.i...
    99+
    2023-01-31
    视频文件 python
  • 详解Flutter中视频播放器插件的使用教程
    目录创建一个新的视频播放器添加播放和暂停按钮创建一个快进添加一个视频进度指示器应用视频的字幕结论您已经看到很多包含视频内容的应用程序,比如带有视频教程的食谱应用程序、电影应用程序和体...
    99+
    2024-04-02
  • vue使用vue-video-player插件播放视频的步骤讲解
    目录前言官网文档步骤下载依赖和配置编写页面本人项目播放视频代码实际效果常用回调结语前言 在我的一个项目中,需要进行播放视频,于是进行研究,那么本次也是将我怎么用vue-video-p...
    99+
    2022-12-21
    vue视频播放器插件 vue-video-player播放视频 vue-video-player插件
  • React中使用react-player播放视频或直播的方法
    业务中需要播放视频,寻来寻去,找到了react-player 初次点击,甚是眼熟,思来想去,竟是钉钉同款 如果使用react框架 先安装 npm install --save vid...
    99+
    2024-04-02
  • html无法播放视频的解决方法
    小编给大家分享一下html无法播放视频的解决方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!html无法播放视频的解决办法:首先打开相应的HTML代码文件;然后...
    99+
    2023-06-14
  • MediaPlayer音频与视频播放方法示例介绍
    目录Android多媒体 MediaPlayer1.相关方法详解1)获得MediaPlayer实例:2)设置播放文件:3)其他方法2.使用代码示例示例一:使用MediaPlayer播...
    99+
    2023-05-17
    Android MediaPlayer音频视频播放 Android MediaPlayer
  • React中使用react-player播放视频或直播的方法是什么
    React中使用react-player播放视频或直播的方法是什么,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。业务中需要播放视频,寻来寻去,找到了react-...
    99+
    2023-06-28
  • windows播放器无法播放视频怎么解决
    如果Windows播放器无法播放视频,可以尝试以下解决方法:1. 确保视频文件格式受支持:Windows播放器不支持所有视频文件格式...
    99+
    2023-09-11
    windows
  • 基于HTML5的在线视频播放方法
    本文小编为大家详细介绍“基于HTML5的在线视频播放方法”,内容详细,步骤清晰,细节处理妥当,希望这篇“基于HTML5的在线视频播放方法”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识...
    99+
    2024-04-02
  • windows播放器无法播放视频如何解决
    如果你在Windows播放器中遇到无法播放视频的问题,可以尝试以下解决方案:1. 确保视频文件格式支持:检查视频文件的格式是否受到W...
    99+
    2023-09-07
    windows
  • 利用HTML5制作音频播放器插件
    这篇文章主要讲解了“利用HTML5制作音频播放器插件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“利用HTML5制作音频播放器插件”吧!上图便是这个音频播放...
    99+
    2024-04-02
  • 使用JMF实现java视频播放器
    JMF这个多媒体开发框架太牛了,简单的几句代码就能实现一个视频播放器的开发,厉害,就是支持的格式少了一些,没关系,这个视频播放器可以播放mpg,avi,fvl等等,想播放其他的请开发自己的插件,下面将代码贴上去 package c...
    99+
    2023-05-31
    jmf java 播放器
  • 利用MAC中的QuickTime视频播放器来播放各种媒体视频
      QuickTime 是MAC中的视频播放器,但是很多新手用户并不清楚QuickTime 的使用技巧,或者是仅仅知道一部分。不过别担心,现在小编就为大家讲解一下如何利用 QuickTime 播放程式来播放各种媒体档案。...
    99+
    2023-06-10
    MAC QuickTime 媒体视频 播放器 媒体 视频
  • 音频和视频无法在PowerPoint中播放
    使用Microsoft的PowerPoint应用程序时,您可能会遇到的一些问题可能是音频和视频问题。PowerPoint用户有时报告说,当他们通过电子邮件发送演示文稿时,收件人将无法播放演示文稿。它只是拒绝加载。尽管很少遇到此问题,但在某些...
    99+
    2023-06-05
  • WinForm中如何播放音频或视频文件
    在WinForm中播放音频或视频文件可以使用Windows Media Player控件,以下是一个简单的示例代码: using S...
    99+
    2024-04-08
    winform
  • 微信小程序使用视频播放器video组件
    本文实例为大家分享了微信小程序使用视频播放器video组件的具体代码,供大家参考,具体内容如下 在app.json中配置好页面路由和权限。 1.app.json { "pag...
    99+
    2024-04-02
  • html5视频不自动播放的解决方法
    小编给大家分享一下html5视频不自动播放的解决方法,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!解决方法:给视频标签video添加“autoplay”属性,autoplay属性规定一旦视...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作