Menu
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?
<!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> 
533
HTML5 is a more modern streaming solution. It can be used to stream videos directly from a website. One of the biggest advantages of HTML5 is that it supports mobile streaming on all devices.
Go to your website's admin page and find the page you want to embed your live stream video. Click on “add a section” Find the option to “add HTML section” and click on “add” Copy the embed code from your live stream video.
The webmasters need to use special HTML5 coding and include WebM, MP4 and OGG formats on their web pages. Before HTML5 videos were only played using the Flash Player. You can view HTML5 videos on all popular browsers such as Google Chrome, Internet Explorer, Mozilla Firefox, and Safari.
HTML5 video players utilize the HLS streaming protocol and cannot be used with RTMP.
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" />
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.
143
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.
For high latency (5+ seconds) HTML5 live video streaming you can consider MPEG-DASH implementations by video.js or Wowza streaming engine.
For low latency, near real-time HTML5 live video streaming, take a look at EvoStream media server, Unreal media server, and WebRTC.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
