ffmpeg处理mp4文件转换hls使用Video.js展示

最新推荐文章于 2024-05-14 16:24:18 发布

Zsiyuan

最新推荐文章于 2024-05-14 16:24:18 发布

阅读量2k

点赞数

分类专栏：工作避坑文章标签： ffmpeg java html

本文链接：https://blog.csdn.net/Zsiyuan/article/details/117201838

版权

工作避坑专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、下载ffmpeg

点击这里前往ffmpeg官网
在这里插入图片描述
选择windows合适的版本下载即可
安装完成后在bin目录下有这三个程序

二、配置环境变量

这里指定到bin目录下然后打开cmd进行测试
在这里插入图片描述
输入ffmpeg之后结果为这个即可。

三、将MP4文件进行切割hls处理转换成m3u8文件

在cmd窗口中输入以下命令：
ffmpeg -i xxxxxxx.mp4 -c:v libx264 -hls_time 
60 -hls_list_size 0 -c:a aac -strict -2 -f hls xxxxxxx.m3u8

其中：
地址可以是相对路径，也可以是绝对路径
指令具体的含义可以参考官方文档
参数解析：
-re ：该参数表示ffmpeg将会按照当前视频的播放速率进行转码，这样就不会说切片的速度和播放速度不一致。不加这个参数，切片速度会非常快，客户端还来不及播放，列表已经被更新了。
-hls_time n ：设置每片的长度，默认值为2，单位为秒。
-hls_list_size n ：设置m3u8文件播放列表保存的最多条目，设置为0会保存有所片信息，默认值为5。一般用于直播流，点播文件可以设置成0，即全部保存。
-hls_wrap n ：设置多少片之后开始覆盖，设置为0则不会覆盖，默认值为0。这个选项能够避免在磁盘上存储过多的片，而且能够限制写入磁盘的最多的片的数量。
以上参数可以自己尝试调整看看效果。

执行成功以后如果在目标文件机夹下会出现若干ts文件和一个m3u8文件

在这里插入图片描述

四、m3u8文件的播放

1.Video.js说明

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。（要支持ie低版本请下载5.4.3版）
官网地址: https://videojs.com
API地址：https://docs.videojs.com/index.html

2.前端代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>视频播放</title>
    <!--<link href="/plugins/videojs/video-js.css" rel="stylesheet">-->
</head>
<body>
<video id=example-video width=800 height=600 class="video-js vjs-default-skin vjs-big-play-centered" controls poster="">
    <source
            src="/Temp/test.m3u8"
            type="application/x-mpegURL">
</video>
<input type="button" onClick="switchvideo()" value="switch"/>

<script th:src="@{/videojs/video.js}"></script>
<script th:src="@{/videojs/videojs-contrib-hls.js}"></script>
<script>
    var player = videojs('example-video');
    //player.play();

    function switchvideo(){
        player.src({
            src: '/Temp/test.m3u8',
            type: 'application/x-mpegURL',
            withCredentials: true
        });
        player.play();
    }
</script>

</body>
</html>

笔者使用了thymeleaf框架，基于springboot进行页面的请求控制，后期要加上springboot后台进行视频转码和参数传递，来控制前端进行视频的播放。
具体后端代码敬请期待！

Zsiyuan

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
ffmpeg处理mp4文件转换hls使用Video.js展示

一、下载ffmpeg点击这里前往ffmpeg官网选择windows合适的版本下载即可安装完成后在bin目录下有这三个程序二、配置环境变量这里指定到bin目录下然后打开cmd进行测试输入ffmpeg之后结果为这个即可。三、将MP4文件进行切割hls处理转换成m3u8文件在cmd窗口中输入以下命令：ffmpeg -i xxxxxxx.mp4 -c:v libx264 -hls_time 60 -hls_list_size 0 -c:a aac -strict -2 -f hls xx
复制链接

扫一扫