HTML5 直播答案

【问题标题】：HTML5 live streamingHTML5 直播
【发布时间】：2011-08-17 01:36:21
【问题描述】：

对于学校，我需要设置一个 HTML5 直播网站。他们有一个他们一直在使用的 Flash 流播放器，但现在他们希望它改用 HTML5。我怎样才能做到这一点？我尝试使用视频标签，但无法正常工作。下面是我的代码。有人能指出我正确的方向吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Deltion Live Streaming</title>
    <script language="javascript" type="text/javascript" src="../swfobject.js"></script>
</head>

<body>  

    <video id="movie" width="460" height="306" preload autoplay>
        <source src="rtmp://fl2.sz.xlcdn.com:80/sz=Deltion_College=lb1"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
            <!-- HERE THE CODE FOR THE ALTERNATIVE PLAYER (FLASH) WILL BE! -->
    </video>
</body>
</html>

【问题讨论】：

类似 RTSP（开放 RTMP 后继）stackoverflow.com/questions/1735933/…
更受限制的问题：stackoverflow.com/questions/21921790/…

标签： html video-streaming html5-video

【解决方案1】：

一个可能的替代方案：

使用编码器（例如 VLC 或 FFmpeg）将您的输入流打包转为OGG格式。例如，在这种情况下，我使用 VLC 打包使用此代码的屏幕捕获设备：

C:\Program Files\VideoLAN\VLC\vlc.exe -I dummy screen:// :screen-fps=16.000000 :screen-caching=100 :sout=#transcode{vcodec=theo,vb=800,scale=1,width=600,height=480,acodec=mp3}:http{mux=ogg,dst=127.0.0.1:8080/desktop.ogg} :no-sout-rtp-sap :no-sout-standard-sap :ttl=1 :sout-keep
将此代码嵌入到您的 HTML 页面中的 <video> 标记中，如下所示：

<video id="video" src="http://localhost:8080/desktop.ogg" autoplay="autoplay" />

这应该可以解决问题。但是它的性能有点差，AFAIK MP4 容器类型在浏览器中的支持应该比 OGG 更好。

【讨论】：

在任何 PC 上都能正常工作。但我无法让它在移动设备上运行（例如，来自 Android 上的 Chrome）。有什么想法吗？
@AdorjanPrincz 这可能是由于 Android/Chrome 上缺少 ogg 解码器。尝试不同的视频（和/或容器）格式。

【解决方案2】：

通过使用媒体源扩展 (MSE) 可以实现 HTML5 中的实时流式传输 - 相对较新的 W3C 标准：https://www.w3.org/TR/media-source/ MSE是HTML5<video>标签的扩展；网页上的 javascript 可以从服务器获取音频/视频片段并将它们推送到 MSE 进行播放。获取机制可以通过 HTTP 请求 (MPEG-DASH) 或通过 WebSockets 完成。截至 2016 年 9 月，所有设备上的所有主要浏览器都支持 MSE。 iOS 是唯一的例外。

对于高延迟（5 秒以上）HTML5 实时视频流，您可以考虑通过 video.js 或 Wowza 流引擎实现 MPEG-DASH。

对于低延迟、近乎实时的 HTML5 实时视频流，请查看 EvoStream 媒体服务器、Unreal 媒体服务器和 WebRTC。

【讨论】：

【解决方案3】：

首先您需要设置一个媒体流服务器。您可以使用 Wowza、red5 或 nginx-rtmp-module。在您想要的操作系统上阅读他们的文档和设置。所有引擎均支持 HLS（Apple 开发的 Http Live Stream 协议）。您应该阅读配置文档。 nginx-rtmp-module 示例：

rtmp {
    server {
        listen 1935; # Listen on standard RTMP port
        chunk_size 4000;

        application show {
            live on;
            # Turn on HLS
            hls on;
            hls_path /mnt/hls/;
            hls_fragment 3;
            hls_playlist_length 60;
            # disable consuming the stream from nginx as rtmp
            deny play all;
        }
    }
} 

server {
    listen 8080;

    location /hls {
        # Disable cache
        add_header Cache-Control no-cache;

        # CORS setup
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        add_header 'Access-Control-Allow-Headers' 'Range';

        # allow CORS preflight requests
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Headers' 'Range';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }

        types {
            application/vnd.apple.mpegurl m3u8;
            video/mp2t ts;
        }

        root /mnt/;
    }
}

服务器设置并配置成功后。您必须使用一些 rtmp 编码器软件（OBS、wirecast ...）才能开始流式传输，例如 youtube 或 twitchtv。

在客户端（在您的情况下为浏览器），您可以使用 Videojs 或 JWplayer 为最终用户播放视频。您可以为 Videojs 执行以下操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Live Streaming</title>
    <link href="//vjs.zencdn.net/5.8/video-js.min.css" rel="stylesheet">
    <script src="//vjs.zencdn.net/5.8/video.min.js"></script>
</head>
<body>
<video id="player" class="video-js vjs-default-skin" height="360" width="640" controls preload="none">
    <source src="http://localhost:8080/hls/stream.m3u8" type="application/x-mpegURL" />
</video>
<script>
    var player = videojs('#player');
</script>
</body>
</html>

您不需要添加其他插件，例如 flash（因为我们使用 HLS 而不是 rtmp）。此播放器可以跨浏览器正常运行，无需 Flash。

【讨论】：

您的配置文件似乎错过了服务器部分的 http 块。但通常很难让这个流媒体业务运作起来。
在 HTML 部分中，您调用了 stream.m3u8，我在服务器配置中没有看到该名称，您从哪里获得的？

【解决方案4】：

目前它只适用于某些浏览器，据我所知，您实际上并没有链接到文件，这样就可以解释为什么它不播放了。

但是你想要一个直播（我没有测试过）

查看Streaming via RTSP or RTP in HTML5

和http://www.streamingmedia.com/Articles/Editorial/Featured-Articles/25-HTML5-Video-Resources-You-Might-Have-Missed-74010.aspx

【讨论】：

【解决方案5】：

在 HTML 5 中无法使用 RTMP 协议，因为 RTMP 协议仅在服务器和 flash 播放器之间使用。因此，您可以使用其他流式传输协议来查看 HTML 5 中的流式视频。

【讨论】：

什么是其他协议？
@eri HLS 例如

【解决方案6】：

您可以使用一个很棒的库名称Videojs。你会在这里找到更多有用的信息。但是通过快速启动，您可以执行以下操作：

<link href="//vjs.zencdn.net/5.11/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.11/video.min.js"></script>
<video id="Video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="auto"
    height="auto" poster="poster.jpg"
    data-setup='{"techOrder": ["flash", "html5", "other supported tech"], "nativeControlsForTouch": true, "controlBar": { "muteToggle": false, "volumeControl": false, "timeDivider": false, "durationDisplay": false, "progressControl": false } }'>
        <source src="rtmp://{domain_server}/{publisher}" type='rtmp/mp4' />
</video>
<script>
    var player = videojs('Video');
    player.play();
</script>

【讨论】：

【解决方案7】：

使用 ffmpeg + ffserver。有用！！！您可以从 ffmpeg.org 获取 ffserver 的配置文件并相应地设置值。

【讨论】：

请发布您的命令和配置，我遇到了一些问题。

【解决方案8】：

<object classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
            height="285" id="mediaPlayer" standby="Loading Microsoft Windows Media Player components..."
            type="application/x-oleobject" width="360" style="margin-bottom:30px;">
            <param name="fileName" value="mms://my_IP_Address:my_port" />
            <param name="animationatStart" value="true" />
            <param name="transparentatStart" value="true" />
            <param name="autoStart" value="true" />
            <param name="showControls" value="true" />
            <param name="loop" value="true" />
            <embed autosize="-1" autostart="true" bgcolor="darkblue" designtimesp="5311" displaysize="4"
                height="285" id="mediaPlayer" loop="true" name="mediaPlayer" pluginspage="http://microsoft.com/windows/mediaplayer/en/download/"
                showcontrols="true" showdisplay="0" showstatusbar="-1" showtracker="-1" src="mms://my_IP_Address:my_port"
                type="application/x-mplayer2" videoborder3d="-1" width="360"></embed>
</object>

【讨论】：

仅代码答案没有用。如果您在每个答案中都包含简短的解释，您将更有可能帮助某人（并获得支持）。
@AsongAmagin 您缺少该对象元素的结束标记。
仅限 Windows，因此失去 HTML 5 提供的所有跨平台支持。