Rat's

H5ai修改版，带HTML5视频播放器DPlayer，并支持hls切片播放
简介该源码由LOC的冻猫修改，将H5ai的视频播放器替换成了DPlayer。快进什么的方便些，也可以调播放速度。想...
扫描右侧二维码阅读全文
26
2018/03

H5ai修改版，带HTML5视频播放器DPlayer，并支持hls切片播放

  1.  首页
  2. 正文  
    3. 分享到：

简介

该源码由LOC的冻猫修改，将H5ai的视频播放器替换成了DPlayer。快进什么的方便些，也可以调播放速度。想加弹幕之类的可以自己改代码，3757行里面研究吧。

更新

【2019.6.14】
1、h5ai更新到0.29.2
2、DPlayer更新到1.25.0
3、增加hls切片播放支持
4、支持登录验证，默认用户名密码都是admin
5、支持vtt格式同视频文件名字幕文件，可用ffmpeg将普通字幕文件转换为vtt字幕文件。

截图

请输入图片描述

安装

Github地址：https://github.com/Pearlulu/h5ai_dplayer_hls

下载地址：点击进入，然后下载最新版的zip压缩包文件就行了。

安装教程：h5ai安装教程、H5ai一键脚本，如果使用脚本安装的，安装完成后需要替换H5ai源码文件。

关于切片视频播放：

例如视频在/video/abcd.mp4，那么会自动寻找/video/__abcd.mp4__/video.m3u8。也就是会寻找"__视频文件名__"文件夹下的切片文件。如果没有切片文件会播放原始视频。切片文件夹和文件都是隐藏的，不会在h5ai中显示。

登录情况修改：

1、如果不想要用户名密码，把_h5ai/public/index.php里第二行include 'login.php'注销。
2、修改用户名密码在_h5ai/public/login.php

简单切片

#搭配Aria2下载完成后自动切片
1、下载脚本
wget https://raw.githubusercontent.com/Pearlulu/h5ai_dplayer_hls/master/hls_aria2.sh
2、在aria2配置文件中增加以下参数，后面为脚本路径
on-download-complete=/root/hls_aria2.sh
3、授权脚本
chmod +x /root/hls_aria2.sh
4、修改脚本的下载路径DOWNPATH(注意需要结尾的"/")，然后重启Aria2生效。

#通用转换切片文件、将目录及所有子目录下的全部视频文件切片。
1、下载脚本
wget https://raw.githubusercontent.com/Pearlulu/h5ai_dplayer_hls/master/hls_general.sh
2、自行修改脚本里的目录绝对路径(注意结尾无"/")。
3、运行脚本，bash hls_general.sh
Vultr新用户注册送100美元/16个机房按小时计费，支持支付宝，【点击查看】。
最后修改：2019 年 06 月 14 日 10 : 26 AM
© 著作权归作者所有

发表评论

45 条评论

  1. Jack

    大佬，求救，用caddy装的，Dplayer放视频全程黑屏
    回复
  2. wegsdfg

    非常感谢~我自己简单地修改了一下，可以实现搜索同路径下同名的vtt字幕文件

    script.js中差不多3757行开始，添加DPlayer那边改成

    var pattern_s = /.{1}[w]{1,}$/i;
    var subtitle_url = t.absHref.slice(0, pattern_s.exec(t.absHref).index)+'.vtt';

    const n = new DPlayer({

    container: document.getElementById('pv-container'), autoplay: true, video: { url: t.absHref }, subtitle: { url: subtitle_url, type: 'webvtt', fontSize: '30px', bottom: '10%', color: '#b7daff' }

    });
    回复
    1. wegsdfg
      @wegsdfg

      我的妈，为啥回复以后回车都不见了。。。
      总之就是把视频文件后缀名改成vtt就好了，DPlayer里添加subtitle看http://dplayer.js.org/#/home
      回复
      1. Rat's
        @wegsdfg

        辛苦了，我试下
        回复
        1. wegsdfg
          @Rat's

          我刚又看了下，你这边评论以后pattern里的反斜杠都掉了啊。。。应该是var pattern_s = /反斜杠.{1}[反斜杠w]{1,}$/i;
          回复
          1. Rat's
            @wegsdfg

            这评论好像很多符号都会掉
            回复
  3. zaaard
    该评论仅登录用户及评论双方可见
    回复
    1. Rat's
      @zaaard

      字幕好像没研究过，你每次看的时候，清空下缓存看看，这个问题等我哪天看下。
      回复
      1. zaaard
        @Rat's

        似乎是我的cdn的问题，即使本地刷新了缓存，cdn上依旧是旧缓存。现在把t.abshref通过添加字符串 ".vtt"生成新的finalurl（也可以把t.abshref中的后缀replace成vtt，这个涉及较多后缀我就没用）作为subtitle的url即可。
        然后在配置中添加隐藏".+\.vtt"差不多就能完美实现播放同目录下同名vtt字幕的功能了。
        回复
        1. Rat's
          @zaaard

          厉害，一般内部的我都很少研究，你那图片太大了，影响美观，我去掉了。
          回复
  4. JC

    播放10G大小的视频，只有声音，没有画面，这个怎么弄？是要装解码器？
    回复
    1. Rat's
      @JC

      你换浏览器看看，还不行的话可能视频编码格式不支持。
      回复
  5. 士大夫似的

    播放mkv没有声音啊，求教，再vps上应该怎么做，装了ffmpeg的。
    回复
    1. Rat's
      @士大夫似的

      换浏览器看看？你指的在vps上操作什么？
      回复
  6. PSWU

    我替换以后还是一样的，没变为DPlayer，用的nginx，怎么改？（另外，这个打字动画很炫，是什么插件？）~ 谢了！
    回复
    1. Rat's
      @PSWU

      打字特效是用的js文件，替换后，可能浏览器因素会没变化，你用其他浏览器试试。比如Chrome浏览器。
      回复
  7. SCGabriel

    dplayer很占CPU额，今天发现播放1080P视频，服务器CPU占用率在98%以上下不来，难为咱只有1核的小鸡了orz
    回复
    1. Rat's
      @SCGabriel

      这个到没注意过，不过一般没事。
      回复
      1. SCGabriel
        @Rat's

        报告下问题，安卓chrome浏览器、Opera浏览器以及ipad的chrome浏览器[目前就测试了三个]，只要选中服务器上的1080P的mkv文件，即使不打开也会造成CPU占用率100%引起假死，如果不关闭页面就会一直卡着100%的占用率。720P的MKV文件没问题，CPU大概在80%左右不会有问题。MP4文件因为本来就是流媒体，占用率永远也没见高过20%。MKV的文件应该是文件格式的问题播放没有声音。
        回复
        1. Rat's
          @SCGabriel

          估计高清挺消耗资源的。
          回复
  8. Keai

    需要先安装dplayer到系统里面么 还是直接就可以用
    回复
    1. Rat's
      @Keai

      不需要安装，直接使用。
      回复
  9. xiaoxuan

    问下博主能播kvm么，可以显示内嵌的字幕么
    回复
    1. Rat's
      @xiaoxuan

      视频格式好像没kvm吧。
      回复
      1. xiaoxuan
        @Rat's

        打错了，mkv
        回复
        1. Rat's
          @xiaoxuan

          格式都支持。
          回复
          1. Peter
            @Rat's

            请问能加一个office预览功能吗？调用onlyoffice服务
            回复