基于 Web 实现 m3u8 视频播放的简单应用示例

2023-11-07

实现思路

将视频(MP4 等)转换为 M3U8 视频的服务,可以按照以下步骤进行操作:

  1. 将视频(MP4 等)转换为 M3U8:在服务中,使用适当的工具(如 FFmpeg)将接收到的视频(MP4 等)转换为 M3U8 格式。这将生成一个包含视频流的 M3U8 文件以及相应的分段(TS)文件。

  2. 提供边下边播服务:将生成的 M3U8 文件和分段文件存储在适当的位置(如服务器上的文件夹或云存储服务中)。然后,可以通过将这些文件的 URL 提供给前端,使前端能够通过边下边播的方式逐段加载和播放视频。

  3. 前端实现 M3U8 播放器:在前端,可以使用现有的视频播放器库(如 video.js、plyr.js 等)或基于 HLS(HTTP Live Streaming)协议的播放器库(如 hls.js)来实现 M3U8 视频的播放器。这些库可以通过提供 M3U8 文件的 URL 来加载和播放视频。

一、将视频(MP4 等)转换为 M3U8 视频

使用 Python 实现将 MP4 视频转换为 M3U8 视频,按照以下步骤进行操作:

  1. 安装所需的库:首先,确保已安装所需的库。在 Python 中,可以使用 ffmpeg-python 库来与 FFmpeg 进行交互,以执行视频转换操作。可以使用以下命令安装该库:
pip install ffmpeg-python

  1. 导入库和设置转换函数:在 Python 代码中,导入 ffmpeg 模块,并创建一个函数,用于将 MP4 转换为 M3U8。以下是一个示例代码:
import ffmpeg

def convert_mp4_to_m3u8(input_file, output_file):
    """
    Converts an MP4 file to an M3U8 file using ffmpeg.
    Args:
        input_file (str): The path to the input MP4 file.
        output_file (str): The path to the output M3U8 file.
    Returns:
        bool: True if the conversion was successful, False otherwise.
    """
    try:
        ffmpeg.input(input_file).output(output_file, format='hls', hls_time=10, hls_segment_type='mpegts').run()
        return True
    except ffmpeg.Error as e:
        print(f"An error occurred during video conversion: {e.stderr}")
        return False

在这个示例代码中,convert_mp4_to_m3u8 函数接受输入文件路径和输出文件路径作为参数。它使用 FFmpeg 将输入文件转换为 M3U8 格式,并将分段(TS)文件输出到指定的输出文件路径。

二、实现 HTTP 服务器,提供 M3U8 视频的访问

方法一、使用 Python 标准库中的 http.server 模块

这个模块提供了一个简单的 HTTP 服务器,可以处理 GET 和 HEAD 请求,并可以为客户端提供静态文件。

以下是一个简单的示例代码,可以启动一个 HTTP 服务器并为客户端提供视频等资源的访问:

import http.server
import socketserver

PORT = 8000

Handler = http.server.SimpleHTTPRequestHandler

with socketserver.TCPServer(("", PORT), Handler) as httpd:
    print("serving at port", PORT)
    httpd.serve_forever()

在这个示例中,创建了一个 http.server.SimpleHTTPRequestHandler 处理程序,它可以处理 GET 和 HEAD 请求,并可以为客户端提供静态文件。然后,使用 socketserver.TCPServer 创建一个 TCP 服务器,并将处理程序传递给它。最后,调用 serve_forever() 方法开始监听来自客户端的请求。

将视频等资源放在服务器的根目录下,例如 ./video.m3u8,客户端可以通过浏览器访问 http://localhost:8000/video.m3u8 来获取该资源。客户端也可以使用其他 HTTP 客户端程序(例如 curl 或者 wget)来访问资源。

不过需要注意的是,这种方式只适合提供小型的静态文件。如果要提供大型视频等资源,最好使用专门的服务器软件来处理,例如 Apache 或 Nginx。

方法二、使用 Flask 框架

Flask 框架可以提供一种更为灵活的方式来实现视频等静态资源的访问。下面是一个简单的示例代码:

from flask import Flask, send_from_directory

app = Flask(__name__)

@app.route('/<path:path>')
def static_file(path):
    return send_from_directory('.', path)

if __name__ == '__main__':
    app.run(port=8000)

在这个示例中,定义了一个名为 static_file 的路由,它可以处理所有的 HTTP GET 请求,并使用 send_from_directory 函数返回请求的文件。在这里,将请求的文件从当前目录中返回。如果要返回其他目录下的文件,可以将 send_from_directory 函数的第一个参数设置为目录的路径。

要访问视频等静态资源,可以将它们放在与 Flask 应用程序相同的目录中,并使用相对路径作为 URL。例如,如果视频文件名为 video.m3u8,可以使用 http://localhost:8000/video.m3u8 访问该文件。

需要注意的是,这种方式也适用于小型的静态文件。如果要提供大型视频等资源,最好使用专门的服务器软件来处理,例如 Apache 或 Nginx。另外,这里的示例代码只提供了最简单的静态资源访问功能,如果需要更高级的功能(例如缓存控制、安全性等),可以使用 Flask 扩展或者在代码中自行实现。

三、Web 前端播放 M3U8 视频

M3U8 是一种基于 HTTP Live Streaming (HLS) 协议的视频流播放格式(在播放 M3U8 文件时需要将视频文件和 M3U8 文件都放在 HTTP 服务器上,并通过 HTTP 协议进行访问)。要在 Web 前端中实现 M3U8 播放器,可以使用一些开源的 JavaScript 库,例如 hls.jsvideo.js

hls.js 是一个基于 JavaScript 实现的 M3U8 播放器库。它可以自动检测浏览器是否支持 HLS,如果不支持则使用 Flash 播放器来进行播放。以下是一个使用 hls.js 的示例代码:

<!DOCTYPE html>
<html>
  <head>
    <title>hls.js player example</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  </head>
  <body>
    <video id="video" controls></video>
    <script>
      var video = document.getElementById("video");
      if (Hls.isSupported()) {
        var hls = new Hls();
        hls.loadSource("http://127.0.0.1:8000/path/to/video.m3u8");
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, function () {
          // video.play();
        });
      } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
        video.src = "http://127.0.0.1:8000/path/to/video.m3u8";
        video.addEventListener("loadedmetadata", function () {
          // video.play();
        });
      }
    </script>
  </body>
</html>

在这个示例中,首先在页面中引入了 hls.js 库。然后,创建一个 HTML5 video 元素,并为它设置了 controls 属性,以便用户可以控制视频的播放。

接着,使用 Hls.isSupported() 方法检测浏览器是否支持 HLS。如果支持,则创建一个 Hls 对象,并使用 loadSource 方法加载 M3U8 文件。然后,使用 attachMedia 方法将 video 元素附加到 Hls 对象上,并在 MANIFEST_PARSED 事件触发时开始播放视频。

如果浏览器不支持 HLS,就检测是否支持 application/vnd.apple.mpegurl 格式。如果支持,则为 video 元素的 src 属性设置 M3U8 文件的路径,并在 loadedmetadata 事件触发时开始播放视频。

除了 hls.js,还有一些其他的 JavaScript 库可以用来实现 M3U8 播放器,例如 video.js。下面是一个使用 video.js 的示例代码:

<!DOCTYPE html>
<html>
  <head>
    <title>video.js player example</title>
    <link href="https://vjs.zencdn.net/8.3.0/video-js.css" rel="stylesheet" />
    <script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script>
  </head>
  <body>
    <video id="video" class="video-js vjs-default-skin" controls></video>
    <script>
      var video = videojs("video", {
        techOrder: ["html5", "flash"],
        sources: [
          {
            src: "http://127.0.0.1:8000/path/to/video.m3u8",
            type: "application/x-mpegURL",
          },
        ],
      });
      // video.play();
    </script>
  </body>
</html>

在这个示例中,首先引入了 video.js 的 CSS 和 JavaScript 文件。然后,创建了一个 HTML5 video 元素,并为它设置了 class 属性,以便应用 video.js 的默认样式。

接着,使用 videojs 函数创建一个 video.js 对象,并为其指定了 techOrdersources 选项。techOrder 选项指定了播放视频时使用的技术顺序,如果浏览器不支持 HLS,则会使用 Flash 播放器来进行播放。sources 选项指定了待播放的 M3U8 文件的路径和类型。

最后,调用 play 方法开始播放视频。

好了,今天的分享就到这里!如果你对Python感兴趣,想要学习pyhton,这里给大家分享一份Python全套学习资料,里面的内容都是适合零基础小白的笔记和资料,超多实战案例,不懂编程也能听懂、看懂。

如果你也喜欢编程,想通过学习Python获取更高薪资,这里给大家分享一份Python学习资料。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

基于 Web 实现 m3u8 视频播放的简单应用示例 的相关文章

  • Android ffmpeg 简单 JNI 包装器

    我一直在尝试使用带有命令行访问的 ffmpeg 二进制文件一段时间 但一无所获 使用runtime exec 看起来我能够让它工作的唯一方法是使用 C 中的包装器来使用 JNI 访问构建的 ffmpeg 库 主要问题 我已经有超过五年没有编
  • FFMPEG - 以特定时间间隔在视频上叠加多个视频

    我想以指定的时间间隔将多个视频叠加在单个视频上 尝试过不同的解决方案 但它不会像我一样工作 我使用下面的命令将视频叠加在视频上 String cmdWorking3 new String i yourRealPath i gifVideoF
  • 使用 FFmpeg 在特定时间将一个视频叠加在另一个视频上

    我正在尝试将一个视频与另一个视频叠加 我按照OP发布的原始命令进行操作here https stackoverflow com questions 35269387 ffmpeg overlay one video onto another
  • swscaler@0dd9e620:已弃用的像素格式,请确保您正确设置了范围”

    我正在使用 FFMpeg 解码 RTSP 视频流 在显示时间 调用cv imshow 我得到以下异常 swscaler 0d55e5c0 已弃用像素格式 请确保您这样做了 正确设置范围 我正在将像素格式从 AV PIX FMT YUVJ42
  • 从视频或音频文件中删除人声

    有没有一种方法可以从音频 视频中删除人声 所以最终音乐就留在上面了 我想使用任何软件 如 adobe 等 或使用命令行 如 ffmpeg sox 来执行此操作 但我更喜欢命令行来轻松调整设置 我从事卡拉 OK 工作有一段时间了 没有办法可靠
  • FFmpeg 转换错误

    我正在尝试使用 FFmpeg 将视频转换为 webm 格式 我已经安装了此处列出的所有依赖项 http www videochat scripts com install ffmpeg mplayer flvtool2 yamdi x264
  • Android 上的 FFmpeg

    我已经在 Android 上编译了 FFmpeg libffmpeg so 现在我必须构建一个像 RockPlayer 这样的应用程序 或者使用现有的 Android 多媒体框架来调用 FFmpeg 您有在 Android StageFri
  • 使用 ffmpeg 处理流的解码数据时出错

    我正在使用以下命令 ffmpeg i video1a flv i video1b flv i video1c flv i video2a flv i video3a flv i video4a flv i video4b flv i vid
  • 有没有简单的方法来提取附件 b 格式的 h264 原始流?

    当我使用命令行使用 ffmpeg 提取视频流时 ffmpeg i 一些文件 vcodec copy an f rawvideo h264 什么 out h264 对于 Adob e Media Encoder 生成的某些媒体文件 只有 m4
  • 在 Android 4.1/4.2 设备中使用 MediaCodec.getOutputFormat() 作为编码器的问题

    我正在尝试使用 MediaCodec 将帧 通过相机或解码器 编码为视频 当通过 dequeueOutputBuffer 处理编码器输出时 我期望收到返回索引 MediaCodec INFO OUTPUT FORMAT CHANGED 因此
  • 将ffmpeg安装到虚拟环境中

    我正在尝试安装ffmpeg以便在 OpenAI 上使用它来录制视频 我已经使用它安装了brew install ffmpeg但不知怎的 当我编译我的代码时 我得到了同样的错误 就像我的包无法识别一样virtualenv我工作的地方 Pyth
  • 我可以从带时间戳的图像创建 VFR 视频吗?

    首先 我对图像制作视频的经验几乎为零 我拥有的是一组带有 BMP 时间戳的图像 我想从中生成视频 由于时间戳的间隔不相等 我不能简单地使用从图像创建恒定帧速率视频的软件 一个可能的解决方案是在固定的时间间隔创建人造图像 但如果我无法制作 V
  • 为 iOS6.0 ARMv7 处理器构建 FFMPEG 库

    WARNING 我刚刚被另一位用户告知 在 iOS 上使用 FFMPEG 存在一些法律问题 请在此处留下链接http multinc com 2009 08 24 compatibility Between the iphone app s
  • 使用 ffmpeg 转换真实媒体

    我有许多旧的硬壳真实媒体文件需要转换 并希望编写一个脚本来批量处理它们 我可以使用 FFMpegX 进行 Real Media gt AVI 转换 但是当我尝试使用 ffmpeg 复制转换时 它总是会出现如下错误 avi 0x10084fa
  • 在 FFmpeg 中使用 -filter_complex amerge 时混合流

    我目前遇到 ffmpeg 及其过滤器之一的问题 我正在尝试将视频的 2 个音频流合并为一个 为此我尝试了这个命令 ffmpeg i home maniaplanet Videos ManiaPlanet 2014 08 21 20 09 1
  • 如何使用ffmpeg从avi生成gif? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我正在尝试使用以下命令将视频的一部分提取到动画 gif 中 ffmpeg i video avi t 5 out gif 它会生成一个 g
  • ffmpeg创建RTP流

    我正在尝试使用 ffmpeg 进行编码和流式传输 libavcodec libavformat MSVC x64 with Zeranoe builds 这是我的代码 很大程度上改编自编码示例 删除了错误处理 include stdafx
  • 使用快速同步 h264_qsv 编码器时 ffmpeg avcodec_encode_video2 挂起

    当我使用 mpeg4 或 h264 编码器时 我能够使用 ffmpeg 3 1 0 的 API 成功编码图像以生成有效的 AVI 文件 但是 当我使用快速同步编码器 h264 qsv 时 avcodec encode video2 有时会挂
  • 如何使用 ffmpeg 提取时间精确的视频片段?

    这并不是一个特别新的问题领域 但我已经尝试过那里建议的内容 但运气不佳 那么 我的故事 我有一大段 15 秒的直接来自camera mov 视频 我想从中提取特定的块 我可以通过开始时间和停止时间 以秒为单位 来识别该块 我首先尝试执行我称
  • VLC 和 ffmpeg 如何协同工作?

    我从源代码编译了VLC 它运行良好 当我执行 Vlc 时 vlc 运行 我还从源代码编译了 ffmpeg 它也运行良好 当我执行 ffmpeg i f toto flv mp3 vn acodec copy new toto mp3 时 会

随机推荐

  • 使用StarRocks导入大数据:详细教程及示例代码

    使用StarRocks导入大数据 详细教程及示例代码 StarRocks是一个快速 可扩展的大数据分析引擎 它提供了高性能的数据导入功能 在本文中 我们将介绍如何使用StarRocks导入大数据 并提供相应的示例代码 步骤1 准备工作 在开
  • 云计算平台常用命令

    云计算IAAS篇 mysql篇 mysql uroot p000000 使用root账号登录mysql use mysql 切换到mysql层 show tables 查询mysql数据库列表 select from mysq
  • linux高性能服务器开发之TCP/IP协议族(1)

    TCP IP协议族体系结构以及主要协议 每层协议完成不一样的功能 上层协议得借助下层协议提供的服务 计网 数据链物层 数据链物层实现网卡接口的网络驱动程序 网络驱动程序隐藏一些 物理层不同电气特性 为上层提供一个统一的接口 常用的协议ARR
  • 【中兴ZXV10 B860A1.1】

    这里写自定义目录标题 开启adb 开启adb 部分盒子的ADB调试位置 在设置页面中可以有开启开发者选项 地区界面不同 位置不同有的在设置里 如果找不到 直接按住遥控器 返回 不放 5秒后 快速不停按 左键 点击 打开ADB调试 这时侯让你
  • 2021-08-04 读书笔记:Python 学习手册(2)

    读书笔记 Python 学习手册 2 结于2021 08 04 OREILY的书籍 可读性很强 入门类 而且这本书很厚 第三部分 语句和语法 第四部分 函数 第三部分 语句和语法 第10章 Python语句简介 Python是面向过程的 基
  • 程序或-内存区域分配(五个段)--终于搞明白了

    一 在学习之前我们先看看ELF文件 ELF分为三种类型 o 可重定位文件 relocalble file 可执行文件以及共享库 shared library 三种格式基本上从结构上是一样的 只是具体到每一个结构不同 下面我们就从整体上看看这
  • DC系列漏洞靶场-渗透测试学习复现(DC-1)

    最近闲着冲浪玩发现了DC系列漏洞靶场 下载了8个靶场 DC 1到DC 8 从信息收集到最后拿到超级管理员权限 可以说几乎贯穿了渗透测试的每一步 寻找一个个flag 通过flag中的指引内容 帮助我们拿到最后的root身份 过程还是挺有趣的
  • Jvm之垃圾回收机制

    判断一个对象是否可被回收 1 引用计数算法 给对象添加一个引用计数器 当对象增加一个引用时计数器加 1 引用失效时计数器减 1 引用计数为 0 的对象可被回收 两个对象出现循环引用的情况下 此时引用计数器永远不为 0 导致无法对它们进行回收
  • vue中使用闭包(例如防抖和节流)失效问题(直接调用)

    文章目录 1 出现问题 2 问题原因 3 解决办法 4 防抖节流函数 1 出现问题 防抖 节流使用无效 例如防抖 按钮点击多次依旧执行多次 gt 查看是闭包无效 定义的局部变量依旧为初值 gt 没有相应清除定时器
  • Ubuntu安装MonoDevelop

    安装步骤 在ubuntu终端执行下面步骤代码 第一步 安装源 根据自己的版本在Ubuntu上安装Mono 运行下面代码授权注册repo源并更新软件列表 Ubuntu 18 04 sudo apt install apt transport
  • Vue3之Vuex

    1 Vuex的基本使用 2 Module 2 1 vuex中模块化的基本使用 2 2 在命名空间中访问全局内容 3 vuex的typescript用法 3 1 不使用模块化 3 2 使用模块化 1 Vuex的基本使用 vuex的安装 npm
  • python利用selenium(webdriver chrome)模拟登陆获取cookie

    我是在windows下进行实验的 准备工作 1 安装python环境 2 python安装selenium插件 执行以下命令就行 pip install selenium 3 Windows下配置webdriver chrome 如果以上准
  • 天气预报小程序 微信小程序期末大作业(含文档)

    天气预报微信小程序 运行正常无错误 下载链接在文末 详情如下图 点我下载资源 https download csdn net download weixin 43474701 58813129
  • golang中的TLS

    HTTP和 HTTPS https和http都属于应用层 基于TCP 以及UDP 协议 但是不同的是 HTTP 缺省工作在TCP协议80端口 HTTPS缺省工作在TCP协议443端口 HTTPS服务不同于HTTP服务 HTTPS是HTTP
  • 数字IC,三大核心代码架构之计数器(verilo实列)

    简介 计数器设计是数字IC设计 的核心 也是最常用的代码片段 通过记录时钟周期个数 可以控制电路的时序 通过计数器可以实现测量 计数 状态控制 分频 计数器有触发器和逻辑门共同构成 计数器设计要素 1 初始值是多少 这里要考虑的是复位信号和
  • Swagger统一Authorization认证

    Swagger统一Authorization认证 1 Swagger Authorization 2 Code 3 Awakening 摘自 https blog csdn net qq 23035335 article details 1
  • python离线安装wheel_使用 pip wheel 实现 Python 依赖包的离线安装

    pip python 依赖 安装 有时候 需要部署 Python 应用的服务器没有网络连接 这时候 你就要把整个 Python 应用做成离线安装包 借助 wheel 很容易就可以实现 首先 你的开发机器上要安装 wheel pip inst
  • vlunhub系列之Momentum2

    靶机Momentum2 如果主机发现发现不了ip地址请看这里 https hackergu com vulnhub ip arp scan主机发现nmap端口扫描 端口扫描 发现并没有可以利用的内容 我们使用dirb nikto 以及dir
  • 发html邮件乱码 java,Java发送邮件时标题和发件人乱码

    Java发送邮件时标题和发件人乱码 最近碰到一个问题 Java发送邮件时 查看邮箱结果 发件人及邮件标题正文全部乱码 通过翻阅资料 原因及解决方法如下 Set Subject 头字段 message setSubject MimeUtili
  • 基于 Web 实现 m3u8 视频播放的简单应用示例

    实现思路 将视频 MP4 等 转换为 M3U8 视频的服务 可以按照以下步骤进行操作 将视频 MP4 等 转换为 M3U8 在服务中 使用适当的工具 如 FFmpeg 将接收到的视频 MP4 等 转换为 M3U8 格式 这将生成一个包含视频