问题：

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

池永长

2023-03-14

我正在尝试使用HTTP直播（HLS）将视频流传输到我的电脑和iPhone。在阅读了苹果的“HTTP直播概述”以及“为iPhone和iPad创建和部署HTTP直播媒体的最佳实践”之后，我有点卡住了。

我获取了我的源文件（一个mkv），并使用ffmpeg对文件进行编码，采用MPEG-TS格式、苹果推荐的设置和基准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直播的示例播放列表文件进行了检查，没有发现任何问题。我也试着玩了。m3u8文件在VLC中，它像一个符咒一样工作。

我创建了一个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视频标记示例在我的计算机上运行良好，上面提到的苹果官方概览给出了一个与我的页面非常相似的HTML示例。然而，当我访问自己的视频播放器时，我的视频播放器完全没有反应。m3u8第页。

共有3个答案

乐钱青

2023-03-14

标准html5视频播放器直接支持mp4、WebM、3gp和OGV格式。

    <video controls>
      <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
      <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
      <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
      <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
    </video>

我们可以在Web应用程序中添加外部HLS js脚本。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>Your title</title>
      
    
      <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
      <script src="https://unpkg.com/video.js/dist/video.js"></script>
      <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
       
    </head>
    <body>
      <video id="my_video_1" class="video-js vjs-fluid vjs-default-skin" controls preload="auto"
      data-setup='{}'>
        <source src="https://cdn3.wowza.com/1/ejBGVnFIOW9yNlZv/cithRSsv/hls/live/playlist.m3u8" type="application/x-mpegURL">
      </video>
      
    <script>
    var player = videojs('my_video_1');
    player.play();
    </script>
      
    </body>
    </html>

陶裕

2023-03-14

您可以使用视频js库轻松播放HLS视频。它允许直接播放视频

<!-- CSS  -->
 <link href="https://vjs.zencdn.net/7.2.3/video-js.css" rel="stylesheet">


<!-- HTML -->
<video id='hls-example'  class="video-js vjs-default-skin" width="400" height="300" controls>
<source type="application/x-mpegURL" src="http://www.streambox.fr/playlists/test_001/stream.m3u8">
</video>


<!-- JS code -->
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.14.1/videojs-contrib-hls.js"></script>
<script src="https://vjs.zencdn.net/7.2.3/video.js"></script>

<script>
var player = videojs('hls-example');
player.play();
</script>

GitHub视频Js

施念

2023-03-14

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

<video width="352" height="198" controls>
    <source src="playlist.m3u8" type="application/x-mpegURL">
</video>

类似资料：

HTML 视频（Video）播放

主要内容：HTML视频（Videos）播放,实例,问题以及解决方法,使用 <embed> 标签,实例,使用 <object> 标签,实例,使用 HTML5 <video> 元素,实例,最好的 HTML 解决方法,HTML 5 + <object> + <embed>,使用超链接,实例,关于内联视频的说明,HTML 多媒体标签在 HTML 中播放视频的方法有很多种。 HTML视频（Videos）播放实例 <video width="320" height="240" controls> <sou
HTML视频（Videos）播放

在 HTML 中播放视频的方法有很多种。 HTML视频（Videos）播放<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <source src="movie.webm" type="video/
使用JQuery播放/暂停HTML 5视频

问题内容：我正在尝试使用JQuery控制HTML5视频。我在选项卡式界面中有两个剪辑，总共有六个选项卡，其他只是图像。我试图使视频剪辑在单击选项卡时播放，然后在单击其他任何一个时停止播放。这一定是一件简单的事情，但是我似乎无法正常工作，我用来播放视频的代码是：我已经读过，视频元素需要在函数中公开才能控制它，但找不到示例。我可以使用JS使其工作：任何建议都很好。谢谢问题答案：您的解决方案
用于播放的视频播放器。mpd文件

我想玩。iPhone应用程序中的mpd文件，为此我尝试了VLC播放器，但它没有按照预期工作，播放视频花费了太多时间。我还有其他选择吗。像Android中的exoplayer这样的mpd文件。我已经为此目的实现了VLC媒体播放器，但现在我正在寻找另一种选择。如果有人对此有任何想法，请帮助。
html5视频标签m3u8文件不工作

第一步。ffmpeg工作：。mp4- ffmpeg选项： ffmpeg-y-i我nternet.mp4-pix_fmtyuv420p-vcodec libx264-acodec ac3-r 30-配置文件：v基线-b：v1500k-maxrate2000k-s 480x300-map 0-标志-global_header-f段-segment_listindex_1500. m3u8-segmen
HTML 5视频或音频播放列表

问题内容：我可以使用或标签播放播放列表并对其进行控制吗？我的目标是知道视频/歌曲何时播放完毕，然后播放下一个并更改其音量。问题答案：您可以像这样在onend事件中加载下一个剪辑

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

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档