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

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

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

更新时间: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 +

相关插件-音频和视频

jQuery html5自定义视频控件

html5自定义视频控件,加入评论,载入弹幕,鼠标悬浮在进度条显示某时刻画面,视频卡端显示加载动画,清晰度切换等功能;并添加了弹幕隐藏显示设置,播放速度设置,镜像翻转设置。
  音频和视频
 72610  574

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

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

jQuery仿微信公众号语音框插件weixinAudio.js

jQuery仿微信公众号的语音播放功能weixinAudio.js
  音频和视频
 42154  391

音乐泡泡排序(CPC泡泡排序)

泡泡排序制作的音乐剧!每个音高被分配一个与其比例程度相对应的数字 (例如 c 大调中的 C 将从0-7 数字中获得 )。
  音频和视频
 18596  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
    刚学习的小白,不知道怎么调用在自己博客上,求教 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复