浏览器使用video播放m3u8类的直播流媒体

最新推荐文章于 2024-12-10 09:57:44 发布

mxydl2009

最新推荐文章于 2024-12-10 09:57:44 发布

阅读量8.9k

点赞数 1

分类专栏： JS常用技术文章标签： m3u8 video.js ffmpeg

本文链接：https://blog.csdn.net/mxydl2009/article/details/114579071

版权

JS常用技术专栏收录该内容

9 篇文章 0 订阅

订阅专栏

关于m3u8文件格式

描述

m3u8 是一种基于 HTTP Live Streaming 视频流媒体格式。m3u8文件本身是一个纯文本文件，用于存放整个视频的基本信息和分片(Segment)组成。
由 Apple.inc 率先提出的 HLS 协议在 Mac 的 Safari 上原生支持，浏览器目前可以通过<video src="./test.m3u8" type="application/x-mpegURL">来播放。

生成

使用ffmpeg工具对mp4格式的视频进行基于hls协议分割可以得到m3u8文件以及一系列的.ts视频分片文件。

生成命令

将summary.mp4文件分片切割为

ffmpeg -i summary.mp4 -hls_time 5 -hls_list_size 0 -hls_segment_filename ./hls/summary_%05d.ts ./hls/summary.m3u8

参数的意义如下：

-hls_time：分片的视频长度
-hls_list_size：分片数量，为0表示所有分片
-hls_segment_filename：分片文件名
生成的m3u8文件如下

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:10.000000,
summary_00000.ts
#EXTINF:10.000000,
summary_00001.ts
#EXTINF:10.000000,
summary_00002.ts
#EXTINF:10.000000,
summary_00003.ts
#EXTINF:10.000000,
summary_00004.ts
#EXTINF:10.000000,
summary_00005.ts
#EXTINF:10.000000,
summary_00006.ts
#EXTINF:10.000000,
summary_00007.ts
#EXTINF:10.000000,
summary_00008.ts
#EXTINF:10.000000,
summary_00009.ts
#EXTINF:10.000000,
summary_00010.ts
#EXTINF:10.000000,
summary_00011.ts
#EXTINF:10.000000,
summary_00012.ts
#EXTINF:8.600000,
summary_00013.ts
#EXTINF:10.000000,
summary_00014.ts
#EXTINF:10.000000,
summary_00015.ts
#EXTINF:10.000000,
summary_00016.ts
#EXTINF:5.960000,
summary_00017.ts
#EXTINF:10.000000,
summary_00018.ts
#EXTINF:9.440000,
summary_00019.ts
#EXTINF:10.000000,
summary_00020.ts
#EXTINF:10.000000,
summary_00021.ts
#EXTINF:6.800000,
summary_00022.ts
#EXT-X-ENDLIST

播放m3u8指定的视频

使用video.js 和 videojs-contrib-hls来播放m3u8指定的视频

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <head>
    <!-- 引入video.js样式文件 -->
    <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>
  <title>m3u8网页播放视频</title>
</head>
<body>
  <!-- 引入videojs-contrib-hls.js文件 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"
    type="text/javascript"></script>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="1024"
    height="768"
    poster="MY_VIDEO_POSTER.jpg"
    data-setup="{}"
  >
  <source src="./hls/summary.m3u8" type="application/x-mpegURL">
    <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>
  <!-- 引入video.js文件 -->
  <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>

  <!-- 据说下面的代码也可以，但实践过后发现并不能，video.play()会报错 -->
  <!-- <script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
  <video contorls autoplay id="video" width="1024px" height="768px"></video>
  <script>
    if(Hls.isSupported()) {
      var video = document.getElementById('video');
      var hls = new Hls();
      hls.loadSource('./hls/summary.m3u8');
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED,function() {
        video.play();
    });
  } -->
  </script>
</body>
</html>

下载m3u8指定的视频

m3u8文件指定的视频是由一系列的视频分片组成，m3u8文件中记录了这些视频分片，可以使用ffmpeg工具来进行下载视频分片并合并为一个视频。

下载命令

使用下列的命令可以将指定的m3u8文件对应的视频下载合成为out.mp4文件。

ffmpeg -i [m3u8文件地址] -c copy out.mp4

其中，[m3u8文件地址]可以通过浏览器开发者模式获取到网站视频对应的m3u8文件。