Rat's

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

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

简介

该源码由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注册就送$50,可开日本/新加坡等机房,【点击注册】。
最后修改:2019 年 06 月 14 日 10 : 26 AM

发表评论

34 条评论

  1. SCGabriel

    大佬,用这个改版的h5ai,Dplayer无法加载mkv内封的字幕流,求问下有没有什么解决办法?还有这玩意的弹幕是咋打开的?

    1. Rat's
      @SCGabriel

      弹幕好像需要修改源码,加一个弹幕引用参数

  2. Jack

    不支持m3u8。。求解决方案

    1. Rat's
      @Jack

      这个表示不是很清楚,还没仔细研究

      1. zaaard
        @Rat's

        好像支持了,https://www.hostloc.com/thread-555577-1-1.html

        1. Rat's
          @zaaard

          感谢提供,我放到文章。

  3. Jack

    好像是太大了,其他2、3G的没事

  4. Jack

    大佬,求救,用caddy装的,Dplayer放视频全程黑屏

  5. 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

            这评论好像很多符号都会掉

  6. 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

          厉害,一般内部的我都很少研究,你那图片太大了,影响美观,我去掉了。

  7. JC

    播放10G大小的视频,只有声音,没有画面,这个怎么弄?是要装解码器?

    1. Rat's
      @JC

      你换浏览器看看,还不行的话可能视频编码格式不支持。

  8. 士大夫似的

    播放mkv没有声音啊,求教,再vps上应该怎么做,装了ffmpeg的。

    1. Rat's
      @士大夫似的

      换浏览器看看?你指的在vps上操作什么?

  9. PSWU

    我替换以后还是一样的,没变为DPlayer,用的nginx,怎么改?(另外,这个打字动画很炫,是什么插件?)~ 谢了!

    1. Rat's
      @PSWU

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

  10. 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

          估计高清挺消耗资源的。

  11. Keai

    需要先安装dplayer到系统里面么 还是直接就可以用

    1. Rat's
      @Keai

      不需要安装,直接使用。

  12. xiaoxuan

    问下博主能播kvm么,可以显示内嵌的字幕么

    1. Rat's
      @xiaoxuan

      视频格式好像没kvm吧。

      1. xiaoxuan
        @Rat's

        打错了,mkv

        1. Rat's
          @xiaoxuan

          格式都支持。

          1. Peter
            @Rat's

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