it-swarm.com.de

Wie kann ich Apple HLS Live Stream mit HTML5 Video Tag abspielen?

<video id="live"  autoplay controls>
    <source src="http://[WOWZA-IP]:1935/Live/mp4:[LIVESTREAMNAME]/playlist.m3u8" type="video/mp4" />
</video>

Ich versuche, h264-codierten Live-Stream mit HTML5-Video-Tag zu spielen. Der Live-Stream wird vom wowza-Medienserver übertragen und beim Besuch von src link erhalte ich eine gültige Wiedergabelistendatei. Wenn Sie versuchen, den Stream auf Android chrome browser) abzuspielen, tut der Player nichts und zeigt einen schwarzen Bildschirm an.

Handelt es sich um ein Problem mit dem HTML5-Video-Tag oder um einen Broadcaster?

24
jM2.me

Dies sind die Formate, die Sie mit HTML5-Quell-Tags abspielen können.

Stellen Sie sich ein Videoformat als Zip-Datei vor, die den codierten Video- und Audiostream enthält. Die drei Formate, die Sie für das Web interessieren sollten, sind (webm, mp4 und ogv):

.mp4 = H.264 + AAC
.ogg/.ogv = Theora + Vorbis
.webm = VP8 + Vorbis
9
robert

Hierfür gibt es tatsächlich eine gute Auswahl an Lösungen. Eine Lösung wäre zu erkennen, ob HLS gespielt werden kann:

document.createElement('video').canPlayType('application/vnd.Apple.mpegURL') !== ''

Dies würde es Ihnen jedoch nicht ermöglichen, HLS-Inhalte auf Geräten wiederzugeben, die die Wiedergabe nicht unterstützen. Derzeit wird die Wiedergabe nur auf Microsoft Edge, iOS Safari, OS X Safari und Android ( ich rate jedoch dringend von der Verwendung von HLS auf Android aufgrund von Einschränkungen ab )

Eine andere Lösung, um HLS in HTML5 auf allen Plattformen zu spielen, ist die Verwendung eines HTML5-HLS-Players wie THEOplayer . Sie haben es geschafft, HLS auf allen gängigen Plattformen und Geräten zu spielen , auch auf solchen ohne Media Source Extension Unterstützung. Derzeit umfasst die Liste der unterstützten Browser und Plattformen: Internet Explorer, Edge, Firefox, Chrome,Operand Safari unter Windows, Linux, Mac OS X, Android, iOS und Windows Phone.

6
MrP

Bei Browsern, die Media Source Extension unterstützen, können Sie https://github.com/dailymotion/hls.js verwenden

4
mangui

Versuchen Sie FlowPlayer . Es bietet eine vollständige HLS-Unterstützung mit dem geringsten Aufwand auf der Serverseite!

2
XlbrlX

Um dieses Problem zu umgehen, können Sie FlasHLS chromeless player verwenden.

2
flavioribeiro