UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

基于原生js的视频播放器插件Dvideo.js(原创)

所属分类：媒体-音频和视频

 57787  387  查看评论 (65)
分享到微信朋友圈
X
基于原生js的视频播放器插件Dvideo.js(原创) ie兼容10
 查看演示  website  立即下载

更新时间：2018/12/3 下午5:08:28

更新说明：代码优化，api使用方式完善

实例化

实例化Dvideo对象js

var video = new Dvideo({...})

属性

  • ele: dom 元素， 元素id需要带 # ， 比如 #video 或者 .video

  • src: 视频地址 string

  • isShowPoster: 是否显示封面，默认为true bool

  • poster: 封面的地址 string

  • title: 视频的名称 string

  • width: 视频显示宽度 string '300px'

  • height: 视频显示高度 string '160px'

  • showNext: 是否显示下一集按钮 bool 默认true

  • autoplay: 是否自动播放 bool 默认true

  • ctrSpeedDuration: 控制条 关闭的时间 number (ms)

  • loop: 视频是否循环播放 bool 默认false

  • showVolume: 是否显示音量设置 bool 默认true

  • volume: 音量大小 number 0.8

  • showVolumeUnFull: 在非全屏幕下是否显示音量调整条 bool 默认false

  • showPlayBackRate: 是否显示设置语速菜单列表 bool 默认true

  • showPlayBackRateUnFull: 是否在未全屏的情况下 显示语速 bool 默认true

  • playbackRate: 语速的设置 object

        -activeIndex: 索引 number

        -rateList: 语速 array [0.8, 1, 1.2, 2]

  • showVideoDefinition: 是否显示清晰度 bool 默认true

  • showVideoDefinitionUnFull: 非全屏的状态下是否显示 bool 默认true

  • videoDefinition: 清晰度的设置 object

        -activeIndex: 索引 number

        -definitionList: 清晰度选项 array

                >type: 类型

                >name: 名称

  1. nextVideoExtend: function 可让用户自定义扩展 点击下一个视频的操作

  2. setVideoDefinition: function 设置清晰度的回调 参数 (type, event, currentT)

  3. onTimeupdate: 进度更新事件 参数（currentT)

  4. onPlaying: 视频播放事件 参数（currentT)

  5. onPause: 视频暂停事件

  6. onEnded: 视频播放结束事件

  7. onLoadedMetaData: 元数据加载成功事件

方法

更新视频宽度

video.updateVideoSize()
@param { number }  width   宽度
@param { number }  height   高度

显示上下菜单

video.showTopBottomCtrl()
@param { bool }  disappearance   是否自动消失

关闭上下菜单

video.hideTopBottomCtrl()
@param { bool }  immediately   是否立刻关闭

更新音量

video.updateVolume()
@param { number }  vol   音量大小  0 - 1 之间

更新音量

video.updateVolume()
@param { number }  vol   音量大小  0 - 1 之间

快进

video.videoForward()
@param { number } seconds  快进时长

快退

video.videoRewind()
@param { number } seconds  快退时长

跳转到具体位置

video.videoSeek()
@param { number } seconds  跳转的位置

切换视频地址

video.setVideoInfo()
@param { sting } title  视频的名称
@param { string } url  视频的地址
@param { number } currentT  视频开始播放的时间，默认为0

Dvideo.js

基于原生js的 video 插件  Dvideo

支持音量  语速  清晰度 ie全屏等一系列操作  兼容IE 9 +

相关插件-音频和视频
查看更多

完美仿网易网页侧边隐藏音乐播放器

 非常好用的网页侧边音乐播放器（在服务器下完美运行）
  音频和视频
 48739  435

canvas视频录制(原创)

 mediarecoder录制媒体流 canvas绘制动画 导出录像视频
  音频和视频
 16720  150

歌词读取插件klrcreader(原创)

 歌词读取器超迷你引擎
  音频和视频
 27386  307

音乐泡泡排序（CPC泡泡排序）

 泡泡排序制作的音乐剧!每个音高被分配一个与其比例程度相对应的数字 (例如 c 大调中的 C 将从0-7 数字中获得 )。
  音频和视频
 20341  242

讨论这个项目（65）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    XJTM 0
    2020/2/28 21:52:40
    safari（用的5.1.4版本） 浏览器如何退出全屏？目前只能进入全屏。
        未曾遗忘的青春0
        2020/4/9 16:34:44
        esc不行吗
    回复
    九方教育 0
    2019/11/18 12:38:46
    如何联系你，定制开发一个 回复
    嘿喂狗 0
    2019/3/18 11:17:15
    怎么才能让视频铺满整个播放器。我在做响应式的网站。放大的网页样式倒是满足了要求，但是缩小的时间播放器明显就是大于视频的。但是我的宽高均是设置的100%；
        嘿喂狗0
        2019/3/19 11:21:40
        就是屏幕缩小以后的播放器会出现黑色背景。怎么样才能够让视频铺满这个全部的播放器。不需要出现背景色
        嘿喂狗1
        2019/3/23 10:09:39
        问题已经解决：方法就是：想要video能自动填充慢父div的大小，只要给video标签加上style="width= 100%; height=100%; object-fit: fill"即可。需要的各位请看看。
        嘿喂狗0
        2019/3/26 9:40:27
        播放器在edge模式下没办法调整声音。
    回复
    qwas13682 0
    2019/2/27 17:46:34
    实例化 失败。Dvideo is not defined
        未曾遗忘的青春0
        2019/2/27 17:48:19
        https://github.com/IFmiss/d-video
    回复
    留不住┽年华 0
    2018/12/10 14:58:14
    搬运给出源地址啊，搬的js都有问题，封面的参数都传不进去，一开始还以为传错了，一看js连个封面的参数都没有，服了
    要我去原地址去下份新的，原地址：https://github.com/IFmiss/d-video 回复
    魑魅魍魉 0
    2018/12/4 16:04:42
    不支持avi格式的视频吗？
        未曾遗忘的青春1
        2018/12/4 16:05:42
        只支持video标签支持的视频格式
    回复
    々醉意流年。 0
    2018/12/3 16:54:04
    怎么播放下一集
        未曾遗忘的青春0
        2018/12/3 17:16:10
        - 切换视频地址
        ```js
        video.setVideoInfo()
        @param { sting } title 视频的名称
        @param { string } url 视频的地址
        @param { number } currentT 视频开始播放的时间，默认为0
        ```
        不清楚这个版本是否有这个方法了，但是刚刚我发布了一个新的版本在审核
        々醉意流年。0
        2018/12/3 17:22:54
        setVideoInfo是切换视频清晰度，nextVideo是播放下一集，但是这个方法没找到怎么用
        未曾遗忘的青春1
        2018/12/3 17:34:11
        切换清晰度实际上就是切换一个清晰度高的视频地址，所以。。。两者其实是一个方法，这个播放器只是做基本的操作使用的...
        々醉意流年。0
        2018/12/3 18:32:17
        已解决，谢谢
        々醉意流年。0
        2018/12/3 18:35:40
        怎么自动播放下一集，没找到这个方法
        未曾遗忘的青春1
        2018/12/3 20:07:10
        你在ended事件里 执行video. setVideoInfo()就可以了
        前提是你不能设置loop为true
        音乐循环播放不会触发ended事件
        々醉意流年。0
        2018/12/4 15:44:43
        恩，已解决，谢谢
    回复
    ? 0
    2018/11/19 16:08:51
    为什么只能播放一分半钟左右的短视频呢？ 回复
    无根草 0
    2018/10/26 11:56:44

    我在另一个Js里边的一个点击事件里边如何调用？
    如下调用会报错，videoPlay undefined，怎么解决啊？

    ('.stage ul div p').click(function() {
            var videoSrc = $(this).attr('data_url');
            $('.cover').show();
            play();
            var src = videoSrc;
            var videoWrap = document.getElementById('testVideo');
            var fullScreen = document.getElementById('getFullScreen');
            var video = new Dvideo({
                        ele: '#testVideo',
                        title: '2.1 简介',
                        width: '800px',
                        height: '386px',
                        src: 'http://*****/evn4.mp4',
                        autoplay: false,
        未曾遗忘的青春0
        2018/12/3 17:17:26
        不好意思现在才看到，实际上类似这种操作 如果在其他js上用到，可以把 video 挂载到window上， 然后其他地方都是可以用的
    回复
    你与未来 0
    2018/10/12 15:32:07
    刚学习的小白，不知道怎么调用在自己博客上，求教 回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复