HTML5直播

Question

HTML5直播

Ber*_*ard 70 html5 video-streaming html5-video

对于学校,我需要建立一个HTML5直播网站.他们有一个他们一直在使用的闪存流播放器,但现在他们希望它使用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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Osi*_*Osi 21

可能的替代方案:

使用编码器(例如VLC或FFmpeg)将输入流打包为OGG格式.例如,在这种情况下,我使用VLC使用以下代码打包屏幕捕获设备:

C:\ Program Files\VideoLAN\VLC\vlc.exe -I虚屏://: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
将此代码嵌入<video>HTML页面中的标记,如下所示:

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

这应该可以解决问题.然而,它的性能很差,AFAIK MP4容器类型应该比OGG在浏览器中有更好的支持.

Answer 2

Ric*_*ard 15

现在它只能在某些浏览器中工作,并且据我所知,你实际上没有链接到文件,所以这可以解释它为什么不播放.

但是你想要一个直播(我没有测试过)

在HTML5中查看通过RTSP或RTP进行流式传输

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

Answer 3

use*_*208 15

通过使用媒体源扩展(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媒体服务器,虚幻媒体服务器和WebRTC.

Answer 4

小智 9

首先,您需要设置媒体流服务器.您可以使用Wowza,red5或nginx-rtmp-module.阅读他们在您想要的OS上的文档和设置.所有引擎都支持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/;
    }
}

Run Code Online (Sandbox Code Playgroud)

服务器设置完成后配置成功.你必须使用一些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>

Run Code Online (Sandbox Code Playgroud)

你不需要像flash一样添加其他插件(因为我们使用HLS而不是rtmp).这个播放器可以很好地跨浏览器使用闪存.

Answer 5

Kal*_*lai 8

在HTML 5中无法使用RTMP协议,因为RTMP协议仅用于服务器和Flash播放器之间.因此,您可以使用其他流媒体协议来查看HTML 5中的流媒体视频.

什么是其他协议？ (4认同)
例如@eri HLS (2认同)

Answer 6

小智 5

您可以使用一个很棒的库名称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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，4 月前
查看次数：	313277 次
最近记录：	8 年，2 月前