HTML5直播
对于学校，我需要build立一个HTML5直播网站。 他们有一个他们已经使用的Flashstream媒体播放器，但现在他们希望它使用HTML5。 我怎样才能做到这一点？ 我试图使用video标签，但我无法得到它的工作。 以下是我的代码。 有人能指出我的方向吗？
<!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> 一个可能的select：
-
使用编码器（例如VLC或FFmpeg）将inputstream打包为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
-
将这段代码embedded到HTML页面中的
<video>标签中：<video id="video" src="http://localhost:8080/desktop.ogg" autoplay="autoplay" />
这应该做的伎俩。 然而这是一种糟糕的performance，AFAIK MP4容器types应该比OGG在浏览器上有更好的支持。
现在它只能在一些浏览器中运行，而且据我所知，你并没有真正链接到一个文件，这样就可以解释为什么它不能播放。
但是因为你想要一个直播stream（我还没有testing过）
通过HTML5中的RTSP或RTP检查stream式传输
在HTML 5中不可能使用RTMP协议，因为RTMP协议只在服务器和Flash播放器之间使用。 因此，您可以使用其他stream媒体协议来查看HTML 5中的stream式video。
通过使用媒体源扩展（MSE） – 相对较新的W3C标准，HTML5中的实时stream式传输是可能的： https : //www.w3.org/TR/media-source/ MSE是HTML5 <video>标记的扩展; 网页上的javascript可以从服务器获取audio/video片段，并将其推送到MSE进行播放。 抓取机制可以通过HTTP请求（MPEG-DASH）或通过WebSocket完成。 截至2016年9月，所有设备上的所有主stream浏览器都支持MSE。 iOS是唯一的例外。
对于高延迟（5秒以上）的HTML5实时videostream，您可以考虑video.js或Wowzastream引擎的MPEG-DASH实现。
对于低延迟，接近实时的HTML5实时videostream，请查看EvoStream媒体服务器，虚幻媒体服务器和WebRTC。
首先你需要设置一个媒体stream媒体服务器。 你可以使用Wowza，red5或者nginx-rtmp-module 。 阅读他们的文档，并在你想要的OS上安装。 所有的引擎都支持HLS（Apple开发的Http Live Stream协议）。 你应该阅读configuration文件。 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/; } }
服务器安装并configuration成功后。 您必须使用一些rtmp编码器软件（OBS，wirecast …）来开始stream式传输，如youtube或twitchtv。
在客户端（浏览器），您可以使用Videojs或JWplayer播放video给最终用户。 您可以为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）。 这个播放器可以很好的跨浏览器使用闪光灯。
使用ffmpeg + ffserver。 有用！！！ 您可以从ffmpeg.org获得ffserver的configuration文件，并相应地设置值。
您可以使用一个梦幻般的图书馆名称Videojs 。 你会在这里find更多有用的信息。 但是快速开始，你可以做这样的事情：
<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>
<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>
