视频播放器DPlayer使用方法介绍

  • 网站常识 2019-02-25 分享新闻到:
<返回列表

最近在项目开发中需要在Web页面中嵌入视频播放器,并且通过监听一些事件来记录访问者对于视频的一些操作,在此记录使用方法,方便查询使用:

  1、在页面中加载库文件

<link rel="stylesheet" href="./assets/lib/dplayer/dist/DPlayer.min.css"/>   //视频播放器对应样式文件
<script src="../assets/lib/dplayer/dist/DPlayer.min.js"></script>

2、创建HTML
<div id="dplayer"></div>

3、初始化视频var dplayer = new DPlayer({
    element: document.getElementById('dplayer'),
    autoplay: false,
    theme: '#FADFA3',
    loop: false,
    screenshot: true, //截屏
    hotkey: false,
    logo: '/public/assets/images/server/favicon.ico',
    video: {  //视频源 包含不同分辨率源
        quality: [{
            name: '普清',
            url: url1
        },{
            name: '高清',
            url: url2
        }, {
            name: '超清',
            url: url3
        }],
        defaultQuality: 0,
        pic: '',
        type: 'auto'
    }
});

4、事件:
  play,  播放时触发
  pause,  暂停时触发
  canplay, 
  playing, 播放时触发
  ended, 视频播放结束时触发
  error  出错时触发

5、事件监听:
(1)通过on方法绑定事件
  dplayer.on(event, callback)
   EG: dplayer.on('play',funcition(){
    console.log("start play video");
  })
(2)通过dplayer.video.current对象设置
ondurationchange  onerror  onload  onloadeddata

  onloadedmetadata  onloadstart  onmousedown  onmouseenter  onmouseleave

  onmousemove  onmouseout  onmouseover  onmouseup  onmousewheel

  onpause  onplay  onplaying  onpointercancel  onpointerdown  onpointerenter

  onpointerleave  onpointermove  onpointerout  onpointerover  onpointerup

  onprogress  onratechange  onreset  onresize  onseeked  onseeking

  ontimeupdate  onvolumechange  onwaiting  onwaitingforkey

  onwebkitfullscreenchange  onwebkitfullscreenerror

  EG: dplayer.video.current.onplay = function(){
    console.log("start play video");
  }
6、获取当前视频播放时间:  dplayer.video.current.currentTime
分享新闻到:

更多阅读

哪种网站CMS适合建站,优化好

网络推广 2019-03-24
有部分cms建站系统天生对 搜索引擎友好 是有利于seo的,有利于seo的cms程序没有......查看全文

昆明网站建设,昆明网站建设

网站建设 2019-03-20
要说昆明做网站建设公司哪家比较专业,哪家比较好,首先想告诉大家什么样的......查看全文

昆明网站建设公司哪家好?

网站建设 2019-03-20
个人或者企业想要在互联网上以一个比较正规的方式出现,都免不了要有一个网......查看全文
返回全部新闻
扫描二维码分享到微信
确 认

合作伙伴: 云多商城 邦匠装修网 健康第一站

Copyright © 2014-2017 云南多网科技有限公司 版权所有 滇ICP备14005946号

扫描二维码关注我们:多网科技
确 认