Für die Schule muss ich eine HTML5-Live-Stream-Site einrichten. Sie haben einen Flash-Stream-Player, den sie verwendet haben, aber jetzt möchten sie, dass stattdessen HTML5 verwendet wird. Wie kann ich das machen? Ich habe versucht, das Video-Tag zu verwenden, aber ich kann es nicht zum Laufen bringen. Unten ist der Code, den ich habe. Könnte mich jemand in die richtige Richtung weisen?
<!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>
html
video-streaming
html5-video
Bernhard
quelle
quelle
Antworten:
Eine mögliche Alternative dafür:
Verwenden Sie einen Encoder (z. B. VLC oder FFmpeg), um Ihren Eingabestream in das OGG-Format zu paketieren. In diesem Fall habe ich beispielsweise VLC verwendet, um das Bildschirmaufnahmegerät mit diesem Code zu paketieren:
Betten Sie diesen Code folgendermaßen in ein
<video>Tag in Ihrer HTML-Seite ein:<video id="video" src="http://localhost:8080/desktop.ogg" autoplay="autoplay" />Dies sollte den Trick tun. Die Leistung ist jedoch schlecht, und der AFAIK MP4-Containertyp sollte unter Browsern eine bessere Unterstützung bieten als OGG.
quelle
Live-Streaming in HTML5 ist über die Verwendung von Media Source Extensions (MSE) möglich - dem relativ neuen W3C-Standard: https://www.w3.org/TR/media-source/ MSE ist eine Erweiterung des HTML5-
<video>Tags. Das Javascript auf der Webseite kann Audio- / Videosegmente vom Server abrufen und zur Wiedergabe an MSE senden. Der Abrufmechanismus kann über HTTP-Anforderungen (MPEG-DASH) oder über WebSockets erfolgen. Ab September 2016 unterstützen alle gängigen Browser auf allen Geräten MSE. iOS ist die einzige Ausnahme.Für HTML5-Live-Video-Streaming mit hoher Latenz (5+ Sekunden) können Sie MPEG-DASH-Implementierungen von video.js oder der Wowza-Streaming-Engine in Betracht ziehen.
Schauen Sie sich EvoStream-Medienserver, Unreal-Medienserver und WebRTC an, um eine HTML-Live-Video-Streaming-Echtzeit mit geringer Latenz zu erhalten.
quelle
Im Moment funktioniert es nur in einigen Browsern, und soweit ich sehen kann, haben Sie noch keine Verknüpfung zu einer Datei hergestellt. Dies würde erklären, warum sie nicht abgespielt wird.
aber da willst du einen live stream (mit dem ich nicht getestet habe)
Schauen Sie sich Streaming über RTSP oder RTP in HTML5 an
und http://www.streamingmedia.com/Articles/Editorial/Featured-Articles/25-HTML5-Video-Resources-You-Might-Have-Missed-74010.aspx
quelle
Zunächst müssen Sie einen Media-Streaming-Server einrichten. Sie können Wowza, red5 oder nginx-rtmp-module verwenden . Lesen Sie die Dokumentation und Einrichtung auf dem gewünschten Betriebssystem. Alle Engines unterstützen HLS (Http Live Stream-Protokoll, das von Apple entwickelt wurde). Sie sollten die Dokumentation zur Konfiguration lesen. Beispiel mit nginx-rtmp-Modul:
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/; } }Nachdem der Server eingerichtet und die Konfiguration erfolgreich war. Sie müssen eine RTMP-Encoder-Software (OBS, Wirecast ...) verwenden, um das Streaming wie YouTube oder Twitchtv zu starten.
Auf der Clientseite (in Ihrem Fall im Browser) können Sie Videojs oder JWplayer verwenden, um Videos für Endbenutzer abzuspielen. Sie können für Videojs wie folgt vorgehen:
<!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>Sie müssen kein anderes Plugin wie Flash hinzufügen (da wir HLS und nicht rtmp verwenden). Dieser Player kann ohne Flash gut Cross-Browser arbeiten.
quelle
Es ist nicht möglich, das RTMP-Protokoll in HTML 5 zu verwenden, da das RTMP-Protokoll nur zwischen dem Server und dem Flash Player verwendet wird. Sie können also die anderen Streaming-Protokolle zum Anzeigen der Streaming-Videos in HTML 5 verwenden.
quelle
Sie können einen fantastischen Bibliotheksnamen Videojs verwenden . Weitere nützliche Informationen finden Sie hier. Aber mit einem schnellen Start können Sie so etwas tun:
<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>quelle
Verwenden Sie ffmpeg + ffserver. Es klappt!!! Sie können eine Konfigurationsdatei für ffserver von ffmpeg.org erhalten und die Werte entsprechend festlegen.
quelle
<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>quelle