Website video playback is slower, use mp4 turn m3u8 solve

Recent projects need to play mp4 video on the site, since the first impression is to make use of video h5 tag. This is convenient, as the src value generated video address to video label.

Fortunately, a local player, but uploaded to the server is slow, let alone server in a foreign country, especially slow when loading several minutes.

2 by the various solutions:

1. mp4 cut into a plurality of small mp4 file list, src pass as a dynamic value, the mp4 small loop.

The main event is listening end, the callback inside the video of src into the next list.

But the premise of ensuring the quality of the video, the total size of the video source or video files with little difference.

参考:[循环多个小mp4地址列表](https://yq.aliyun.com/ask/358906)

2. Convert mp4 format into m3u8

Apple streaming technology in order to improve the efficiency of development, characterized by the cut into a plurality of TS streaming media fragment (such as a while every 10 seconds), and then extended through a m3u list file fragments together for the TS client player receives. Reference M3U8 Introduction

m3u8 consists of two parts, namely ts m3u8 and files. After the segmentation has n ts files (depending on cut length ofthe time per sheet), the file is a sequence of multiple ts M3U8 files, in fact, a text. (I have here the source video file to 220M, the sum of multiple ts files before splitting 23M, and the video quality is unchanged .)

m3u8 consists of two parts, namely ts m3u8 and files. After the segmentation has n ts files (depending on cut length ofthe time per sheet), the file is a sequence of multiple ts M3U8 files, in fact, a text. (I have here the source video file to 220M, the sum of multiple ts files before splitting 23M, and the video quality is unchanged .)

how to use

1. Install ffmpeg tool

Download: http://www.ffmpeg.org/download.html

Installation: No matter when windows or linux installation is very simple. But the installation should be noted that in linux is the need for a plug-in. You need to specify libx264
posted here the steps I reinstall :( reference )

#yum安装必要包
yum install autoconf automake cmake freetype-devel gcc gcc-c++ git libtool make mercurial nasm pkgconfig zlib-devel
#安装x264
git clone --depth 1 git://git.videolan.org/x264
ls
cd x264
PKG_CONFIG_PATH="/usr/local/lib/pkgconfig" ./configure --enable-static
报错,需要安装nasm 至少2.14,不能用yum install nasm,yum安装是last版本
wget http://www.nasm.us/pub/nasm/releasebuilds/2.14/nasm-2.14.tar.xz
ls
tar Jxvf nasm-2.14.tar.xz 
ls
cd nasm-2.14
ls
./configure 
make && make install
cd ../x264
ls
# 指定PKG_CONFIG_PATH,不指定则在安装ffmpeg就算加--enable-libx264,也会提示找不到。不加,则在转换时提示unknow encoder libx264
PKG_CONFIG_PATH="/usr/local/lib/pkgconfig" ./configure --enable-static
make && make install
cd ..
# 检查是否安装成功
ffmpeg -version
# 安装时默认时加入环境变量,所以在任何地方执行就可以。提示如下,重点是有libx264字样
[java@iZt4n36uo36nxgg8z2hb2kZ ffmpeg]$ ffmpeg -version
ffmpeg version 4.1 Copyright (c) 2000-2018 the FFmpeg developers
built with gcc 4.8.5 (GCC) 20150623 (Red Hat 4.8.5-28)
configuration: --enable-gpl --enable-nonfree --enable-libfreetype --enable-libx264
libavutil      56. 22.100 / 56. 22.100
libavcodec     58. 35.100 / 58. 35.100
libavformat    58. 20.100 / 58. 20.100
libavdevice    58.  5.100 / 58.  5.100
libavfilter     7. 40.101 /  7. 40.101
libswscale      5.  3.100 /  5.  3.100
libswresample   3.  3.100 /  3.  3.100
libpostproc    55.  3.100 / 55.  3.100

2. Test After a successful installation, perform the conversion command:

ffmpeg -i video2.mp4 -c:v libx264 -hls_time 60 -hls_list_size 0 -c:a aac -strict -2 -f hls t/video2.m3u8

3. The following is being converted

...略...
com.skyjilygao.util.VideoThread          : frame=    3 fps=0.0 q=0.0 size=N/A time=00:00:01.08 bitrate=N/A speed=2.09x    
com.skyjilygao.util.VideoThread          : frame=   20 fps= 19 q=0.0 size=N/A time=00:00:01.36 bitrate=N/A speed=1.32x    
com.skyjilygao.util.VideoThread          : frame=   29 fps= 17 q=0.0 size=N/A time=00:00:01.49 bitrate=N/A speed=0.85x    
com.skyjilygao.util.VideoThread          : frame=   38 fps= 15 q=0.0 size=N/A time=00:00:01.64 bitrate=N/A speed=0.667x    
com.skyjilygao.util.VideoThread          : frame=   40 fps= 13 q=0.0 size=N/A time=00:00:01.70 bitrate=N/A speed=0.54x    
com.skyjilygao.util.VideoThread          : frame=   48 fps= 13 q=0.0 size=N/A time=00:00:01.83 bitrate=N/A speed=0.485x    
...略...

Simple Explanation the command:
-hls_time 60: length of each sheet is provided, where I is 60 seconds, as a segment.
-hls_list_size 0: set the play up to save the list of entries is set to 0 will save me some piece of information, the default is 5
more command Baidu or Google
3. embedded in the code (java)

/**
  * 拼接ffmpeg命令:ffmpeg -i test.mp4 -c:v libx264 -hls_time 60 -hls_list_size 0 -c:a aac -strict -2 -f hls output.m3u8
  * @param source
  * @return
  */
    private boolean processM3U8(String source, String target) {
        File targetFile = new File(target);
        File parentDir  = targetFile.getParentFile();
        if (!parentDir.exists()) {
            parentDir.mkdirs();
        }
        List<String> commend = new ArrayList<String>();
        commend.add(ffmpeg);
        commend.add("-i");
        commend.add(source);
        commend.add("-c:v");
        commend.add("libx264");
        commend.add("-hls_time");
        commend.add("60");
        commend.add("-hls_list_size");
        commend.add("0");
        commend.add("-c:a");
        commend.add("aac");
        commend.add("-strict");
        commend.add("-2");
        commend.add("-f");
        commend.add("hls");
        commend.add(target);
        this.cmdList = commend;
        // 通过ProcessBuilder创建
        // processBuilder(commend);

        // 通过runtime创建
        runtimeBuilder(getCommand());
        return true;
    }

Note: The command passed through the list, it encounters a space, the next element is a list of parameters. Can not be written commend.add ( "- hls_time 60") ; performed such becomes ffmpeg -i test.mp4 -c: v libx264 " -hls_time 60" -hls_list_size 0 -c: a aac -strict -2 -f hls output .m3u8 lead to failure to perform
here is the key code.
demo source code can refer to the demo-m3u8
related key code I have a good package can depend directly and add jitpack.io warehouse address (refer demo-m3u8 how dependent)

<!-- 依赖视频转换工具类,需要加入jitpack.io的repositories -->
<dependencies>
  ...
  <dependency>
    <groupId>com.github.skyjilygao</groupId>
    <artifactId>sky-util</artifactId>
    <version>1.0.1</version>
  </dependency>
</dependencies>
<repositories>
    <repository>
        <id>jitpack.io</id>
        <url>https://jitpack.io</url>
    </repository>
</repositories>

Tools Address: Sky-util

If you want to play after the conversion can be used directly video.js play a direct index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <title>MP4ToM3U8</title>
  <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
  <script src="https://unpkg.com/video.js/dist/video.js"></script>
  <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
</head>
<body>
<h1>播放</h1>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto"
       data-setup='{}'>
  <source src="http://localhost:8080/t/video2.m3u8" type="application/x-mpegURL">
  <!-- video.js给的示例 -->
  <!--<source src="http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL">-->
</video>
<script>
</script>
</body>
</html>

After a successful conversion to m3u8 and ts files can be accessed on the path, the path Note that video playback. When I put this project static / t lower.
Visit http: // localhost: 8080 / t / video2.m3u8 when prompted to download or display the file contents indicated directly accessible.
github Address:

Example demo-m3u8 Address: https://github.com/skyjilygao/demo-m3u8.git
Sky-util Tools: https://github.com/skyjilygao/sky-util.git

 

Source: https://www.jianshu.com/p/1579e716daed

Guess you like

Origin blog.csdn.net/u012615439/article/details/90765430