ffmpeg配合django做视频点播平台

1、ffmpeg安装

链接：https://pan.baidu.com/s/1je95StJs9piCRFK86w6LQw?pwd=jcf8 
提取码：jcf8 
--来自百度网盘超级会员V5的分享

解压配置环境变量即可

2、ffmpeg命令行转码视频

ffmpeg431.exe  -i ande_302.mp4  -vbsf h264_mp4toannexb -vcodec  libx264    -acodec aac  -strict  -2  -s  640x480    -r  30  -g  60   -start_number 0  -hls_time 5   -hls_list_size 0    -threads  1     -f  hls  -y  aaa.m3u8
转码结束后是一系列的ts文件和一个m3u8索引文件，转码任务已经完成，下一步是怎样实现网络端读取m3u8视频流

参考资料

https://blog.csdn.net/teachermei/article/details/127444658

这一篇有关于ffmpeg的介绍

ffmpeg的下载及安装_ffmpeg下载_西凉的悲伤的博客-CSDN博客

FFmpeg 的介绍与使用_zouzhiheng的博客-CSDN博客

ffmpeg命令详解_zzcchunter的博客-CSDN博客

[总结]FFMPEG视音频编解码零基础学习方法_ffmpeg音频编解码_雷霄骅的博客-CSDN博客

最简单的视频网站（JavaEE+FFmpeg）_雷霄骅的博客-CSDN博客

本视频网站支持直播（通过RTMP实现）和点播（通过HTTP实现）

FFMpeg 常用命令格式转换，视频合成_ffmpeg转换视频格式_音视频开发老马的博客-CSDN博客

CSDN后台私信或文末卡片加入免费领取最新最全C++/音视频开发学习提升资料，内容包括（C/C++，Linux 服务器开发，FFmpeg ，webRTC ，rtmp ，hls ，rtsp ，ffplay ，srs）以及音视频学习路线图等等。

使用ffmpeg把mp4与m3u8相互转换的操作_ffmpeg m3u_音视频开发老舅的博客-CSDN博客

html5播放m3u8视频，web端看直播_51CTO博客_m3u8视频怎么播放

使用FFmpeg+go搭建m3u8点播服务器_m3u8服务器_椛茶的博客-CSDN博客

  HLS（HTTP Live Streaming）

Django播放m3u8格式网络视频（videojs）_django video.js_佐倉的博客-CSDN博客

FFmpeg+Nginx+VLC打造M3U8直播

请参考：

FFmpeg+Nginx+rtmp+videojs+VLC快速搭建网络直播网站.pdf

《FFmpeg入门详解--音视频原理及应用：梅会东：清华大学出版社》

京东自营链接：https://item.jd.com/13377793.html

html中播放m3u8文件_51CTO博客_m3u8文件怎么播放

https://www.cnblogs.com/luozeyang/p/14551010.html,django播放本地m3u8视频

# django中请求m3u8
class M3u8View(APIView):

    def get(self, request):
        """在这儿进行相关权限校验"""
        file_data = open('index.m3u8文件绝对路径', 'rb')  # 需要区分不同视频的m3u8文件，可以通过路由参数来区分
        response = HttpResponse(file_data)
        response['Content-Type'] = 'application/x-mpegURL'  # 设置content-type
        return response

下面是学习前段相关的知识

nvm是nodejs的版本管理工具，node version manage

npm是nodejs的包管理工具，node package manage

安装nvm的时候自动安装npm

nodejs安装时自带npm

gulp：前端自动化开发流程，比如把sass转css,css和js压缩，图片研所，代码自动保存更新，浏览器自动刷新等

前端开发环境的配置

nvm,node,gulp

https://github.com/coreybutler/nvm-windows/releases

下载安装后要配置环境变量

nvm安装不同版本的node

nvm install 6.4.0命令就是安装6.4.0的node

nvm uninstall 6.4.0卸载版本

nvm use 6.4.0就是启用6.4.0的node

nvm list列出当前已安装的版本

nvm list available列出可以使用的版本

nvm node_mirror url 设置下载镜像地址

nvm npm_mirror 设置npm包管理工具的镜像地址

使用npm前需要使用nvm use指定使用的node版本，npm会跟随node的版本

安装包可以安装在本地，也可以安装在全局

安装在本地就可以require("包名")调用,相当于python中的import

本地安装

npm install package

全局安装

npm install package -g

express包相当于python中的django

npm install express -g全局安装

安装在本地才可以用require语句引用

安装在本地就是安装在当前目录下

卸载本地和卸载全局包都是加上-g参数

npm update 包名 更新包

npm search 包名 搜索包

安装时使用镜像

npm install package cnpm --registry=https://registry.npm.taobao.org

使用gulp

npm init 会在本地生成一个gulpfile.js项目配置文件，用于记录当前项目依赖了那些包

拿到一个项目，执行npm install 就会自动安装gulpfile.js中的包【在这个js文件所在目录处执行】

npm installan安装一个包时，加上参数--save-dev，就会自动把这个包的信息加入到gulpfile.js文件中

npm install gulp --save-dev

使用gulp创建一个任务

先在项目目录下创建一个gulpfils.js文件

然后倒入包

var gulp=require('gulp');//需要在本地安装gulp,然后就可以使用变量gulp调用包里面的函数

gulp.task("任务名字",任务要执行的操作，一般是函数，或者函数列表)

function(){}//相当于python里面的lambda匿名函数

gulp.task("love",function(){
console.log("I love you");
});

在gulpfile.js中实现上述任务，然后再命令行中执行，gulp +任务名，就会执行相应的任务

gulp love

安装时指定版本 npm install gulp@4.0.2

与3.9相比，gulp区别

1、普通函数完成后需要调用done函数，3.9匿名函数中没有参数，4.0参数为done函数，执行完普通逻辑后再手动执行done函数

2.watch任务中，监听到了文件的修改，需要执行某个依赖任务的时候，

3，在default任务中，bs和watch需要同时执行，因此需要使用函数gulp.parallel,bs任务就是对浏览器的监听和管理

4，gulp.serise函数和gulp.parallel一个是串行执行，一个是并行执行

gulp.cssnano任务对css文件进行压缩，需要安装插件

npm install gulp-cssnano --save-dev

dest==destnation目的地

gulp.src函数，搜索指定目录下的指定文件，类似于python中的os.walk

gulp.pipe管道函数，将上一步处理的结果接着进行处理，相当于linux中的管道操作|

gulp.rename重命名

gulp.dest,将文件移动到指定目录

定义一个对写好的css文件进行处理的任务

gulp.task("css",function(){

        gulp.src(path+"*.css").pipe(gulp.cssnano()).pipe(gulp.rename(

{"suffix":".min"})).pipe(gulp.dest(destPath))

})

rename花括号中的参数表示重命名规则，上述规则表示在文件名后添加.min后缀

上述任务将指定文件夹下的css文件压缩重命名后放到指定目录中

需要学习一下rename里面的参数是什么意思？？

需要安装插件gulp-rename

npm install gulp-rename --save-dev

对js文件进行处理

压缩工具，gulp-uglify

npm install gulp-uglify --save-dev

gulp.task("css",function(){

        gulp.src(path+"*.css").pipe(gulp.cssnano()).pipe(gulp.rename(

{"suffix":".min"})).pipe(gulp.dest(destPath))

})

gulp.task("css",function(){

        gulp.src(path+"*.js").pipe(gulp.uglify()).pipe(gulp.rename(

{"suffix":".min"})).pipe(gulp.dest(destPath))

})

注意对css文件压缩的是cssnano,对ja进行简化压缩的是uglify,可以在uglify中添加参数指定修改方式

gulp.task("css",function(){

        gulp.src(path+"*.js").pipe(gulp.uglify({“toplevel”：true})).pipe(gulp.rename(

{"suffix":".min"})).pipe(gulp.dest(destPath))

})

加入toplevel:true对顶级变量进行处理

gulp.task("css",function(){

        gulp.src(path+"*.js").pipe(gulp.uglify({“toplevel”：true，"compress":{"drop_console":true}})).pipe(gulp.rename(

{"suffix":".min"})).pipe(gulp.dest(destPath))

})

uglify项目和文档地址

GitHub - mishoo/UglifyJS: JavaScript parser / mangler / compressor / beautifier toolkit

合并多个文件

npm install gulp-concat --save-dev

gulp.task("css",function(){

        gulp.src(path+"*.js").pipe(gulp.uglify({“toplevel”：true，"compress":{"drop_console":true}})).pipe(gulp.rename(

{"suffix":".min"})).pipe(gulp.concat()).pipe(gulp.dest(destPath))

})

压缩图片

npm install gulp-imagemin

npm install gulp-cache

var cache=require("gulp-cache");

var imagemin=require("gulp-imagemin")

imagemin是无损的情况下压缩图片，cache是保证压缩过得图片不再压缩

gulp.task("image",function(){

        gulp.src(path+"*.*").pipe(cache(imagemin())).pipe(gulp.dest(destpath))

});

监听问价修改，自动刷新浏览器

监听不需要第三方插件，直接使用gulp.watch()函数就可以

监听文件修改后自动执行任务

gulp.task("watch",function(){

        gulp.watch("./css/*.css",["css"])//监听css文件下的所有以css为后缀的文件，有修改时自动执行中括号内的名字为css的任务

})

浏览器自动监听

npm install browser-sync --save-dev

var bs=require("browser-sync").create();内容修改后浏览器自动刷新

gulp.task("bs",function(){

        bs.init({

        "server":{

                "baseDir":"./"

}

})

});

在css,js等任务后面加上pipe(bs.stream()),有修改后就刷星浏览器

gulp.task("css",function(){

        gulp.src(path+"*.js").pipe(gulp.uglify({“toplevel”：true，"compress":{"drop_console":true}})).pipe(gulp.rename(

{"suffix":".min"})).pipe(gulp.concat()).pipe(gulp.dest(destPath).pipe(
        bs.stream()
))

})

如果命令行窗口gulp后面不指定任务名，则自动执行名字为“default”的任务

gulp文档地址

www.browsersync.cn/