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

这篇具有很好参考价值的文章主要介绍了基于 Web 实现 m3u8 视频播放的简单应用示例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

实现思路

将视频(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 方法开始播放视频。文章来源地址https://www.toymoban.com/news/detail-465693.html

到了这里,关于基于 Web 实现 m3u8 视频播放的简单应用示例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Unity WebGL 播放视频流m3u8

    目录 介绍 步骤 1.导入AVProVideo插件,创建场景,创建空物体添加MediaPlayer组件设置m3u8视频地址以及WebGL平台设置  2.在Canvas下创建Avpro Video,为MediaPlayer赋值  3.可以现在编辑器模式下测试视频地址是否可以播放,然后打包  4.打包完成后,将文件hls.min.js复制到Build文件夹下: 5

    2023年04月10日
    浏览(57)
  • vue3播放m3u8视频(videoJS)

    需要同时导入videoJS以及相关的CSS 以下时项目使用中自己封装的组件,用起来也很简单,需要的可以对照自取 UI框架为 ant-design-vue

    2024年02月03日
    浏览(41)
  • video插件播放m3u8格式视频(存原生)

    这里使用原生的javascript实现m3u8格式视频播放。 使用了包括video.min.js库和HLS插件。 在上面代码中,首先引入了video.min.js库和对应的播放器样式video-js.css,还引入了videojs-contrib-hls.min.js库(引入顺序考虑优先放到页面加载之前)。 之后,创建一个video标签,并指定source的src属性为

    2024年02月13日
    浏览(50)
  • 前端播放大视频卡顿的解决(m3u8视频流)

    最近在一个大屏看板项目中有一个需求是:要求视频和看板要进行来回切换。 最开始的做法是将MP4视频放在项目里,在本地运行时是没什么问题的,但是在往仓库里提交代码时出现了问题。当单个文件超过100MB时会导致代码提交失败; 后来的解决方案是将视频文件放到服务器

    2024年01月19日
    浏览(59)
  • vue项目中使用m3u8格式播放大视频

    网站中播放大视频时经常卡顿,无法顺利播放,在查找解决方案时发现很多文章建议使用m3u8流媒体播放代替MP4播放,做了下测试,现总结记录下测试过程中遇到的问题与解决办法。 1.使用ffmpeg做视频转换 1)下载ffmpeg  FFmpeg github 2)在环境变量path中加入配置,以便在控制台使

    2024年02月09日
    浏览(53)
  • Uniapp H5 播放m3u8、flv格式视频

    简述一下业务需求,仅仅是需要在H5页面播放m3u8格式的视频,但是Uniapp官方提供的video组件在H5端不支持m3u8格式的视频播放,所以需要使用第三方库来播放,这里我使用的是MuiPlayer,但是貌似MuiPlayer的官方文档没有过多提及UniApp的用法,由于MuiPlayer默认支持mp4格式播放,所以

    2024年04月15日
    浏览(35)
  • Android ExoPlayer2播放m3u8视频设置Cookie

    支持m3u8格式视频,同时服务端做了加密防止视频被盗。 服务端需要客户端这边再请求.m3u8地址时带上3个Cookie参数,分别是CloudFront-Policy,CloudFront-Signature,CloudFront-Key-Pair-Id。 本地使用了GSYVideoPlayer作为视频播放器,如何设置Cookie是个问题,原本以为直接将待传入的三个Cookie直接

    2024年01月16日
    浏览(55)
  • 在vue中使用dplayer播放hls m3u8格式视频

    Dplayer 官方文档地址 Dplayer官方地址 虽然在vue中有vue-dplayer但却没有对hls进行很好的支持 所以建议还是使用Dplayer 在组件中引入 播放m3u8格式的视频需要框选部分 – 建议查看官方文档MSE支持 切换视频 切换视频需要用到 switchVideo() api 方便大家复制 部分片段

    2024年02月13日
    浏览(35)
  • uniapp的H5项目使用videojs播放m3u8类型视频

    uniapp项目,运行在手机浏览器端,需要播放m3u8类型视频。在网上找了好久教程,记录一下实现过程。 参考了:uni-app npm方式引入video.js教程 支持H5播放m3u8、mp4等格式视频文件_npm video.js_wang_9909的博客-CSDN博客 以及videojs官网。 1、安装videojs 2、在main.js中加以下三行代码 3、页面

    2024年02月07日
    浏览(41)
  • 关于vue播放flv,m3u8视频流(监控)的方法

    前文: 随着前端大屏页面的逐渐壮大,客户的需求也越来越多,大屏上面展示的事物也越来越丰     富。其中实时播放监控的需求逐步增加,视频流格式也是有很多种,用到最多的.flv、.m3u8。 一、 JessibucaPlayer插件用来播放flv流 1.首先是先把文件放在vue项目的public下面 2.在

    2023年04月15日
    浏览(89)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包