部署h5ai+dplayer播放视频|王彬的博客

wangbin
2019-07-26
IT

部署h5ai+dplayer播放视频

一. 简介

在追的电视剧意外泄漏了,下载下来,赶紧在线观看安排上.

之前在hostloc上看到有人分享的h5ai修改版,加上了dplayer来播放视频,搜了教程安装,这儿记录下.

二. 安装

git仓库地址

https://github.com/Pearlulu/h5ai_dplayer_hls

install_h5ai_dplayer.sh

cd ~
wget https://github.com/Pearlulu/h5ai_dplayer_hls/releases/download/0610/h5ai_dplayer_hls_20190610.zip
unzip h5ai_dplayer_hls_*.zip 
mkdir -p /vps/hosts/h5ai
mv _h5ai/ /vps/hosts/h5ai/ 
rm -f h5ai_dplayer_hls_*.zip

三. nginx配置

# h5ai.wangbin.io
server {

    listen       81;
    listen       [::]:81;
    listen       50443 ssl http2;
    listen       [::]:50443 ssl http2;

    server_name  h5ai.wangbin.io;

    # ssl
    ssl_certificate             /vps/save/certificate/acme/*.siyou325.com/fullchain.cer;
    ssl_certificate_key         /vps/save/certificate/acme/*.siyou325.com/*.siyou325.com.key;
    ssl_trusted_certificate     /vps/save/certificate/acme/*.siyou325.com/fullchain.cer;

    # ecc
    ssl_certificate             /vps/save/certificate/acme/*.siyou325.com_ecc/fullchain.cer;
    ssl_certificate_key         /vps/save/certificate/acme/*.siyou325.com_ecc/*.siyou325.com.key;

    # log
    access_log                  logs/siyou325.com/h5ai.wangbin.io/access-h5ai.wangbin.io.log siyou325;
    error_log                   logs/siyou325.com/h5ai.wangbin.io/error.log;

    root         /vps/hosts/h5ai;
    index        index.html index.htm /_h5ai/public/index.php;

    location ~ .*\.(php|php5)?$ {
        fastcgi_connect_timeout         300;
        fastcgi_send_timeout            300;
        fastcgi_read_timeout            300;
        fastcgi_pass                    127.0.0.1:9000;
        fastcgi_index                   index.php;
        fastcgi_param                   SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include                         fastcgi_params;
        fastcgi_param                   QUERY_STRING     $query_string;
        fastcgi_param                   REQUEST_METHOD   $request_method;
        fastcgi_param                   CONTENT_TYPE     $content_type;
        fastcgi_param                   CONTENT_LENGTH   $content_length;
    }

    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
        expires      30d;
    }

    location ~ .*\.(js|css)?$ {
        expires      12h;
    }

    # 禁止访问.svn目录，防止svn信息泄漏，必加项
    location ~ ^(.*)\/\.svn\/ {
        deny all;
    }

}

检查nginx配置

nginx -t

没问题的话,reload nginx配置

nginx -s reload

网上介绍的nginx配置文件真心简单得没法看,还是看的一键安装脚本配置才跑起来,真心捉急.

四. 配置h5ai

根目录: /vps/hosts/h5ai
index page: /_h5ai/public/index.php
根目录下_开头的文件夹是隐藏的

配置文件

h5ai/_h5ai/public/login.php

登录页面,可以修改用户名和密码,默认用户名:admin,密码:admin
_h5ai/private/conf/options.json

配置文件,可以配置默认的语言,记得修改其中谷歌字体地址fonts.googleapis.com为fonts.geekzu.org

五. hls切片

单个mp4文件很大,中途跳转播放的话,会很卡.但是切片后生成很多片段,跳转播放的话,加载其中某段就可以,顺畅很多.

视频如果放在根目录下/video/test.mp4,h5ai会先找/video/test.mp4/video.m3u8,如果找到的话,就会使用切片视频播放.

没找到的话,说是会播放test.mp4,但是我试了,没播放,不过没事,支持切片播放就好了.

那如何切片呢?也不麻烦.

切片依赖ffmpeg,install_ffmpeg.sh

# 安装Nux Dextop Yum 源
rpm --import http://li.nux.ro/download/nux/RPM-GPG-KEY-nux.ro
rpm -Uvh http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-5.el7.nux.noarch.rpm

# 安装FFmpeg 和 FFmpeg开发包
yum -y install ffmpeg ffmpeg-devel

ffmpeg就安装好了.

开始切片

cd ~
wget https://github.com/Pearlulu/h5ai_dplayer_hls/blob/master/hls_general.sh

修改BASEDIR="/data/video"中的/data/video为/vps/hosts/h5ai/video,会将该目录下所有视频切片,速度还挺快.

六. 总结

好了,愉快的享受喜爱的电视剧吧.

参考：