Html HTML5 直播
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5858936/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 live streaming
提问by Bernhard
For school I need to set up an HTML5 live stream site. They have a flash stream-player they've been using but now they want it to use HTML5 instead. How can I do this? I tried using the video tag but I can't get it working. Below is the code I have. Could someone point me in the correct direction?
对于学校，我需要建立一个 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>
回答by Zsolt
A possible alternative for that:
一个可能的替代方案：
Use an encoder (e.g. VLC or FFmpeg) into packetize your input stream to OGG format. For example, in this case I used VLC to packetize screen capture device with this code:
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
Embed this code into a
<video>tag in your HTML page like that:<video id="video" src="http://localhost:8080/desktop.ogg" autoplay="autoplay" />
使用编码器（例如 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,宽度=600,高度=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" />
This should do the trick. However it's kind of poor performance and AFAIK MP4 container type should have a better support among browsers than OGG.
这应该可以解决问题。然而，它的性能有点差，AFAIK MP4 容器类型在浏览器中应该比 OGG 有更好的支持。
回答by user1390208
Live streaming in HTML5 is possible via the use of Media Source Extensions (MSE) - the relatively new W3C standard: https://www.w3.org/TR/media-source/MSE is an an extension of HTML5 <video>tag; the javascript on webpage can fetch audio/video segments from the server and push them to MSE for playback. The fetching mechanism can be done via HTTP requests (MPEG-DASH) or via WebSockets. As of September 2016 all major browsers on all devices support MSE. iOS is the only exception.
通过使用媒体源扩展 (MSE) - 相对较新的 W3C 标准：https: //www.w3.org/TR/media-source/MSE 是 HTML5<video>标签的扩展；网页上的 javascript 可以从服务器获取音频/视频片段并将它们推送到 MSE 进行播放。获取机制可以通过 HTTP 请求 (MPEG-DASH) 或通过 WebSockets 完成。截至 2016 年 9 月，所有设备上的所有主要浏览器都支持 MSE。iOS 是唯一的例外。
For high latency (5+ seconds) HTML5 live video streaming you can consider MPEG-DASH implementations by video.js or Wowza streaming engine.
对于高延迟（5 秒以上）HTML5 实时视频流，您可以考虑通过 video.js 或 Wowza 流引擎实现 MPEG-DASH。
For low latency, near real-time HTML5 live video streaming, take a look at EvoStream media server, Unreal media server, and WebRTC.
对于低延迟、接近实时的 HTML5 实时视频流，请查看 EvoStream 媒体服务器、Unreal 媒体服务器和 WebRTC。
回答by Richard
Right now it will only work in some browsers, and as far as I can see you haven't actually linked to a file, so that would explain why it is not playing.
现在它只能在某些浏览器中工作，据我所知，你实际上并没有链接到一个文件，所以这可以解释为什么它没有播放。
but as you want a live stream (which I have not tested with)
但因为你想要一个直播（我没有测试过）
check out Streaming via RTSP or RTP in HTML5
回答by ypn
Firstly you need to setup a media streaming server. You can use Wowza, red5 or nginx-rtmp-module. Read their documentation and setup on OS you want. All the engine are support HLS (Http Live Stream protocol that was developed by Apple). You should read documentation for config. Example with nginx-rtmp-module:
首先，您需要设置媒体流服务器。您可以使用 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/;
}
}
After server was setup and configuration successful. you must use some rtmp encoder software (OBS, wirecast ...) for start streaming like youtube or twitchtv.
服务器设置和配置成功后。您必须使用一些 rtmp 编码器软件（OBS、wirecast ...）来开始流式传输，例如 youtube 或 twitchtv。
In client side (browser in your case) you can use Videojsor JWplayer to play video for end user. You can do something like below for Videojs:
在客户端（在您的情况下是浏览器），您可以使用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>
You don't need to add others plugin like flash (because we use HLS not rtmp). This player can work well cross browser with out flash.
您不需要添加其他插件如 flash（因为我们使用 HLS 而不是 rtmp）。这个播放器可以在没有 Flash 的情况下很好地跨浏览器运行。
回答by Kalai
It is not possible to use the RTMP protocol in HTML 5, because the RTMP protocol is only used between the server and the flashplayer. So you can use the other streaming protocols for viewing the streaming videos in HTML 5.
在 HTML 5 中无法使用 RTMP 协议，因为 RTMP 协议仅用于服务器和Flash播放器之间。因此，您可以使用其他流媒体协议来查看 HTML 5 中的流媒体视频。
回答by ypn
You can use a fantastic library name Videojs. You will find more useful informations here. But with quick start you can do something like this:
你可以使用一个很棒的库名称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>
回答by Rajditya Shahdeo
Use ffmpeg + ffserver. It works!!! You can get a config file for ffserver from ffmpeg.org and accordingly set the values.
使用 ffmpeg + ffserver。有用！！！您可以从 ffmpeg.org 获取 ffserver 的配置文件并相应地设置值。
回答by Asong Amagin
<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>
