ffmpeg:mp4转m3u8并用video.js在web页面播放

一，ffmpeg的安装:

      参见:

https://www.cnblogs.com/architectforest/p/12807683.html

说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取： https://github.com/liuhongdi/

说明：作者:刘宏缔 邮箱: 371125307@qq.com

二，关于video.js

1,官网:

https://videojs.com/

2,可以通过cdn引用它的js和css:

<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>

三，mp4转m3u8

1, 第一步:把mp4转为ts格式

#vcodec copy: 把视频的比特流复制到输出,不进行转码

#acodec copy: 把音频的比特流复制到输出,不进行转码

#vbsf: 指定bitstream filter的转码格式

[root@blog testjs]# ffmpeg -y -i music23.mp4 -vcodec copy -acodec copy -vbsf h264_mp4toannexb music23.ts

2，第二步：对生成的ts视频做切分,生成m3u8 

#-segment_list music23.m3u8 ： 指定输出的m3u8列表文件

#-segment_time 5 按5秒一个文件进行切分

[root@blog testjs]# ffmpeg -i music23.ts -c copy -map 0 -f segment -segment_list music23.m3u8 -segment_time 5 music23_%5d.ts

查看结果:

[root@blog testjs]# ls
music23_00000.ts  music23_00004.ts  music23_00008.ts  music23_00012.ts  music23_00016.ts  music23_00020.ts  music23_00024.ts  music23_00028.ts  music23.ts
music23_00001.ts  music23_00005.ts  music23_00009.ts  music23_00013.ts  music23_00017.ts  music23_00021.ts  music23_00025.ts  music23_00029.ts  v2.html
music23_00002.ts  music23_00006.ts  music23_00010.ts  music23_00014.ts  music23_00018.ts  music23_00022.ts  music23_00026.ts  music23.m3u8      v.html
music23_00003.ts  music23_00007.ts  music23_00011.ts  music23_00015.ts  music23_00019.ts  music23_00023.ts  music23_00027.ts  music23.mp4

查看m3u8的内容:

[root@blog testjs]# more music23.m3u8
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-ALLOW-CACHE:YES
#EXT-X-TARGETDURATION:7
#EXTINF:6.041667,
music23_00000.ts
#EXTINF:4.000000,
music23_00001.ts
#EXTINF:6.000000,
music23_00002.ts
#EXTINF:4.291667,
music23_00003.ts
#EXTINF:5.375000,
music23_00004.ts
#EXTINF:6.000000,
music23_00005.ts
#EXTINF:5.041667,
music23_00006.ts
#EXTINF:3.583333,
....

四，用video.js播放

v.html

<head>
    <meta name="viewport" charset="utf-8" content="width=device-width,
    initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=1.0">
  <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="100%"
    height="264"
    poster="MY_VIDEO_POSTER.jpg"
    data-setup="{}"
     style="100%;"
  >
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>

  <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
<script type="text/javascript">
var player = videojs('my-video',{});
    player.src("/testjs/music23.m3u8");
player.on('ready', function() {
  //alert('ready');
  player.play();
});
</script>
</body>

五，测试效果

 六，几点说明：

1，切分后的视频文件，应该用脚本进行改名，(需要同时修改m3u8中记录的文件名)避免被用程序轻易拉取

2, 视频的player.play(); 会报错，因为google规定需要与浏览器交互才能开始播放

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

3,video在页面上的src会显示为blob:http: 地址，不会直接显示ts文件的路径，
   但并不能有效的防止下载

七，查看ffmpeg的版本:

[root@blog testjs]# ffmpeg -version
ffmpeg version 4.2.2 Copyright (c) 2000-2019 the FFmpeg developers
built with gcc 8 (GCC)
configuration: --prefix=/usr --bindir=/usr/bin --datadir=/usr/share/ffmpeg --docdir=/usr/share/doc/ffmpeg 
--incdir=/usr/include/ffmpeg --libdir=/usr/lib64 --mandir=/usr/share/man --arch=x86_64 
--optflags='-O2 -g -pipe -Wall -Werror=format-security -Wp,-D_FORTIFY_SOURCE=2 -Wp,-D_GLIBCXX_ASSERTIONS -fexceptions -fstack-protector-strong 
-grecord-gcc-switches -specs=/usr/lib/rpm/redhat/redhat-hardened-cc1 -specs=/usr/lib/rpm/redhat/redhat-annobin-cc1 -m64 
-mtune=generic -fasynchronous-unwind-tables -fstack-clash-protection -fcf-protection' 
--extra-ldflags='-Wl,-z,relro -Wl,-z,now -specs=/usr/lib/rpm/redhat/redhat-hardened-ld ' 
--extra-cflags=' ' --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libvo-amrwbenc --enable-version3 
--enable-bzlib --disable-crystalhd --enable-fontconfig --enable-frei0r --enable-gcrypt --enable-gnutls --enable-ladspa 
--enable-libaom --enable-libdav1d --enable-libass --enable-libbluray --enable-libcdio --enable-libdrm --enable-libjack 
--enable-libfreetype --enable-libfribidi --enable-libgsm --enable-libmp3lame --enable-nvenc --enable-openal 
--enable-opencl --enable-opengl --enable-libopenjpeg --enable-libopus --enable-libpulse --enable-librsvg --enable-libsrt 
--enable-libsoxr --enable-libspeex --enable-libssh --enable-libtheora --enable-libvorbis --enable-libv4l2 --enable-libvidstab 
--enable-libvmaf --enable-libvpx --enable-libx264 --enable-libx265 --enable-libxvid --enable-libzimg --enable-libzvbi 
--enable-avfilter --enable-avresample --enable-postproc --enable-pthreads --disable-static --enable-shared --enable-gpl 
--disable-debug --disable-stripping --shlibdir=/usr/lib64 --enable-libmfx --enable-runtime-cpudetect
libavutil      56. 31.100 / 56. 31.100
libavcodec     58. 54.100 / 58. 54.100
libavformat    58. 29.100 / 58. 29.100
libavdevice    58.  8.100 / 58.  8.100
libavfilter     7. 57.100 /  7. 57.100
libavresample   4.  0.  0 /  4.  0.  0
libswscale      5.  5.100 /  5.  5.100
libswresample   3.  5.100 /  3.  5.100
libpostproc    55.  5.100 / 55.  5.100
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/architectforest/p/14577132.html