程序员经验分享-hwhale

使用 HTML 视频标签播放 m3u8 文件

2023-11-21

我正在尝试使用 HTTP Live Streaming (HLS) 将视频流式传输到我的计算机和 iPhone。在阅读了 Apple 的“HTTP 实时流媒体概述”以及“为 iPhone 和 iPad 创建和部署 HTTP 实时流媒体的最佳实践”后，我有点陷入困境。

我获取了源文件（mkv）并使用 ffmpeg 将文件编码为 MPEG-TS 格式和 Apple 推荐的设置以及 Baseline 3.0 配置文件：

ffmpeg -i "example.mkv" -f mpegts -threads:v 4 -sws_flags bicubic -vf "scale=640:352,setdar=16/9,ass=sub.ass" -codec:v libx264 -r 29.970 -b:v 1200k -profile:v baseline -level:v 3.0 -movflags faststart -coder 1 -flags +loop -cmp chroma -partitions +parti8x8+parti4x4+partp8x8+partb8x8 -me_method hex -subq 6 -me_range 16 -g 239 -keyint_min 25 -sc_threshold 40 -i_qfactor 0.71 -b_strategy 1 -qcomp 0.6 -qmin 10 -qmax 51 -qdiff 4 -direct-pred 1 -fast-pskip 1 -af "aresample=48000" -codec:a libvo_aacenc -b:a 96k -ac 2  -y "output.ts"

那里不用担心。我用了一个预编译分割工具对视频进行分段并构建 .m3u8 播放列表。结果文件如下所示：

#EXTM3U
#EXT-X-TARGETDURATION:10
#EXTINF:10,
http://localhost/media/stream/stream-1.ts
#EXTINF:10,
http://localhost/media/stream/stream-2.ts
#EXTINF:10,
http://localhost/media/stream/stream-3.ts
#EXT-X-ENDLIST

我检查了一些用于 HTTP Live Streaming 的示例播放列表文件，我没有看到任何问题。我还尝试在 VLC 中播放 .m3u8 文件，效果非常好。

我创建了一个 HTML 页面来播放该文件：

<html lang="en">
    <head>
        <meta charset=utf-8/>
    </head>
    <body>
        <div id='player'>
            <video width="352" height="288" src="stream.m3u8" controls autoplay>
            </video>
        </div>
    </body>
</html>

而且这个页面在我的 iPhone 上的 Chrome、Safari 中不起作用。 w3schools 上的 html5 视频标签示例在我的计算机上运行良好，上面提到的官方 Apple 概述给出了一个与我的页面非常相似的 HTML 示例。然而，当我访问自己的 .m3u8 页面时，我的视频播放器完全没有响应。


答案可能有点晚了，但您需要在视频标记中提供 MIME 类型属性：type="application/x-mpegURL"。我用于 16:9 流的视频标签如下所示。

<video width="352" height="198" controls>
    <source src="playlist.m3u8" type="application/x-mpegURL">
</video>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

Streaming

html5video

httplivestreaming

m3u8

使用 HTML 视频标签播放 m3u8 文件 的相关文章

  • 用不同的颜色为 Google 热图着色

    我试图开发一个遵循 Google Map API 的热度 https developers google com maps documentation javascript examples layer heatmap https deve

  • 使用 javascript 将 html 文本渲染为位图，无需服务器端代码

    我需要使用 javascript 代码来转换 html 中的文章 帖子 以便最终用户以位图的形式查看 有没有办法在没有服务器端代码的情况下做到这一点 example p testing text here p 您可以使用例如html2can

  • 使用 javascript 禁用按钮：FF 与 IE

    我有一排按钮 它们都会创建一个我想在新选项卡中打开的 pdf 文件 这样按钮页面就会保持在顶部 并且 pdf 会打开以进行打印 为了防止单击按钮两次 我禁用该按钮 如下所示 我使用 python

  • 显示表中的记录

    我的第一个 PHP 项目遇到了一些麻烦 我试图从 MySQL 数据库 有 3 条记录 获取数据并将其显示在表格中 问题是它似乎只显示记录 2 和 3 它跳过了第 1 条记录 请参阅我的代码并在下面显示 if mysqli connect e

  • 使用本机 JavaScript 获取过渡中的 CSS 值

    这个问题之前被问过 但答案使用了 jQuery here https stackoverflow com q 8920934 3186555 因此 我将调整问题以专门询问native解决方案 to 最小化依赖关系 假设您有一个 div 然后

  • 水平平滑滚动 100px

    Heyjo problem 一周以来我一直在寻找 javascript 或 jQuery 代码 以便在我的网站上实现滚动按钮 我失败的那一刻是按钮应该多次工作的时候 他的任务不是滚动到专用元素 而是应该向左滚动 例如 100px 此外 滚动

  • 删除

    好的 我有一个小菜单栏 菜单内的三个元素还有更多的子菜单 但是菜单栏中的元素之间有不必要的间距 而且我创建的子菜单有不必要的背景宽度 我在代码中将其涂成白色以使读者理解 由于这种不必要的宽度 即使鼠标悬停在不可见的宽度上 在本例中为白色 本

  • 一个接一个地淡入div

    大家好 我很擅长 HTML 和 CSS 但才刚刚开始接触 jQuery 的皮毛 我希望让 3 个 div 在页面加载时逐渐淡入 到目前为止我有这个 我听说使用 css 将显示设置为 none 对于任何使用非 JavaScript 浏览器的人

  • 将 div 文本分配给变量然后显示它

    我有一个简单的任务 我试图完成学习 JavaScript 但一直无法找到明确的答案 这是代码 div Testing div 基本上我希望将方框 div 中的文本存储到变量中 然后 我想在页面的不同部分显示该变量的文本 使用上面的代码我得到

  • 更改javascript nodejs中所有页面的href url

    我已经实现了具有多种语言下拉菜单的引导导航栏 当我选择语言时 它将翻译页面 如何更改其他页面的 url 和按钮文本 当我选择french 将所有网址更改为 fr about and fr contact 如何使用 JavaScript 进行

  • 单击导航项锚链接时如何关闭切换菜单

    请看我的FIDDLE http jsfiddle net ayhpp8ax 我有一个带有 响应式 导航菜单 带有指向页面上元素的锚链接 的 1 页网站 当浏览器视口小于特定宽度 在我的情况下为 767px 时 使用此 javascript

  • 多语言标记验证器

    是否有免费的在线多语言标记验证服务可以正确识别和验证多语言标记 我确实找到了totalvalidator和htmlvalidator 但这些是 付费 非基于网络的解决方案 Use http validator w3 org nu http

  • 在 Angular html 模板中访问常量枚举

    假设我有一个常量枚举 export const enum MyConstEnum Value1 Value1 Value2 Value2 Value3 Value3 现在我想在我的 Angular 模板中使用它 span This has

  • 通过 WiFi 将视频从一部 Android 手机直播到另一部手机

    我已经在互联网上搜索了好几天关于如何通过 WiFi 连接实现从 Android 手机到另一部 Android 手机的视频流功能 但我似乎找不到任何有用的东西 我查看了 Android 开发人员的示例代码 stackoverflow goog

  • 转义 h 轮廓

    因此 我一直在尝试找出在被较低级别的标题吸引后添加内容的最佳方法是什么 section h1 Title of Section h1 h2 Related 1 h2 h2 Related 2 h2 p I NEED THIS TO BE P

  • 两列表：一列尽可能小，另一列占据其余部分

    我在 div 中有一个 to columns 表 div table tbody tr td class action a a td td class content p Bigger text variable size p td tr

  • 为什么我的交互式图像仅在 Internet Explorer 上出现故障？

    我的问题 我为自己制作了一个图像地图 交互式图像 它在 Chrome safari 和 Firefox 上完美运行 然而 当我在可怕的互联网浏览器上尝试它时 它真的很糟糕 这些小点应该扩展到更大的盒子中 在互联网浏览器上它要么不起作用 要么

  • 如何停止TinyMCE删除span标签？

    在我的工作中 前一位程序员决定使用公司网站上精彩的TinyMCE 我遇到的数千个问题之一是 如果原文有的话span标签 当我按下退格键删除一行 p仅标签 全部span标签已从文本中删除 这个错误比另一个错误更具体 我可以删除anything

  • 使用 CSS 折叠和展开元素

    我正在尝试构建一个页面 加载时仅可见标题 并且 当用户单击标题时 每个标题下方的表格会在隐藏和显示状态之间切换 我的限制是只能在 CSS 中执行此操作 这是我到目前为止想到的 https jsfiddle net Argoron c1ypx

  • 主页（网格）上的缩略图现在显得模糊。如何纠正？

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小

随机推荐

  • 为什么 Opera 中的文本以更大的字体大小呈现？

    我正在开发一个需要或多或少像素完美的 HTML 页面 我注意到在 Opera 10 中 字体渲染得比在其他浏览器中更大 尽管字体大小实际上是相同的 请在 Opera 10 和其他浏览器 如 Firefox 3 6 中查看此示例页面 http

  • 沿 MKPolyLineView ( MKPolylineRenderer ) 的渐变

    我想根据速度等某些条件在折线视图上应用渐变 我能够子类化MKPolyLineRenderer使用自定义描边和填充进行绘制 但只能沿路径使用相同的颜色 我看到其他类似的问题 例如 从圆形或甜甜圈中绘制线段 or 在 OSX 上 如何渐变填充路

  • M 位置循环移位 N 大小数组的最快算法

    M 个位置的循环移位数组最快的算法是什么 例如 3 4 5 2 3 1 4 移位 M 2 个位置应该是 1 4 3 4 5 2 3 多谢 如果您想要 O n 时间并且不需要额外的内存使用 因为指定了数组 请使用 Jon Bentley 的书

  • 如何在 C++ 中以大写形式打印地址（十六进制值）

    我正在尝试以十六进制打印变量的地址 引用 并且也以大写形式打印 但我发现我能够以大写形式打印相当于 77 的十六进制值 但不能打印变量的地址 引用 有人可以帮我吗 以下是我遇到困难的程序 include

  • __attribute__ vector_size(16) 的含义是什么？

    我看到了一个 C 程序 attribute 第一次使用关键字 看起来它是一个 GNU 关键字 在海湾合作委员会这一页 他们解释了它的用途 vector size 16 属性 说 int foo attribute vector size 1

  • 如何从 Firebase 经过身份验证的用户获取提供商访问令牌？

    我正在使用 Firebase 通过 GitHub Twitter 和 Facebook 进行身份验证 并且我知道我可以在身份验证后获得提供程序访问令牌 如下所示 firebase auth signInWithPopup provider

  • 如何在 Ruby 中将 MS Excel 日期从浮点数转换为日期格式？

    尝试在 ruby 脚本中使用 roo gem 解析 XLSX 文件 在 Excel 中 日期以 DDDDD ttttt 格式存储为浮点数或整数 从1900 01 00 00 no 01 因此 为了转换诸如 40396 之类的日期 您需要19

  • 在 ASP.NET MVC 应用程序中将特定于视图的 javascript 文件放在哪里？

    在 ASP NET MVC 应用程序中放置特定于视图的 javascript 文件的最佳位置 哪个文件夹等 是什么 为了保持我的项目井井有条 我真的很希望能够将它们与视图的 aspx 文件并排放置 但我还没有找到一种在不暴露 Views 的

  • 以编程方式打开照片应用程序

    是否可以从 iPhone 应用程序启动 照片 应用程序 类似于启动邮件 UIApplication sharedApplication openURL url 照片应用程序似乎没有注册其他应用程序可以使用的任何 URL 方案 在其他系统应用

  • 在wpf中添加图标字体

    我想在 WPF 中添加自定义图标 我用entypo and Font Awesome 我在解决方案中添加此包并在 XAML 中使用它

  • Mysql资源暂时不可用

    我在高负载时间内看到了一些错误 mysql connect a href function mysql connect function mysql connect a 2002 Resource temporarily unavailab

  • 查找我的应用程序中所有 Jersey 资源方法的列表？

    Jersey 是否提供任何方法来列出它公开的所有资源 也就是说 给定资源类 package com zoo resource Path animals public class AnimalResource GET Produces Med

  • Onchange 通过 select 打开 URL - jQuery

    在更改选择选项和 URL 时附加事件的最佳方式是什么 将 href 存储在 attr 中并在更改时获取它 这很简单 让我们看一个工作示例

  • Spark 中的foldLeft 或foldRight 等效项？

    在 Spark 的 RDD 和 DStream 中 我们有 reduce 函数 用于将整个 RDD 转换为一个元素 然而 reduce 函数采用 T T gt T 然而 如果我们想减少Scala中的列表 我们可以使用foldLeft或fol

  • 绘制抗锯齿的移动正弦波

    我想以清晰且抗锯齿的方式绘制具有可变频率和可变幅度的移动正弦波 这怎么可能 好吧 我将正弦波实现到 UIView drawrect 方法中 如下所示 float x 75 float yc 50 float w 0 while w lt r

  • 如何查询 RealmObject 的 RealmList 包含指定值

    我有一个RealmObject 假设Owner 并且它有RealmList

  • 使用 smack API 发送和接收消息

    我已经在本地计算机上设置了我的开火 jabber 服务器 有两个用户 testuser1 和 testuser2 使用 Spark 客户端 两个用户都可以毫无问题地执行聊天 这很好 openfire IP 192 168 1 65 我想使用

  • Android：在滚动视图中在画布上绘图

    我对 Android 编程还很陌生 我的应用程序是来自 Android 开发者网站上的 api 演示的示例应用程序 当我更改该示例图中的参数时 它会变得更大 该绘图需要在滚动视图中显示 不需要缩小以适合屏幕 这是我使用的代码 DrawPoi

  • -pthread、-lpthread 和最小动态链接时依赖性

    This answer建议 pthread优于 lpthread因为预定义的宏 根据经验 pthread只给了我一个额外的宏 define REENTRANT 1这似乎也迫使libpthread so 0作为动态链接时依赖项 当我编译时 l

  • 使用 HTML 视频标签播放 m3u8 文件

    我正在尝试使用 HTTP Live Streaming HLS 将视频流式传输到我的计算机和 iPhone 在阅读了 Apple 的 HTTP 实时流媒体概述 以及 为 iPhone 和 iPad 创建和部署 HTTP 实时流媒体的最佳实践

热门标签