HTML5 live streaming

Question

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    lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt       lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt       lt title gt Deltion Live Streaming lt  title gt       lt script language  javascript  type  text javascript  src     swfobject js  gt  lt  script gt   lt  head gt    lt body gt          lt video id  movie  width  460  height  306  preload autoplay gt           lt source src  rtmp   fl2 sz xlcdn com 80 sz Deltion College lb1   type  video mp4  codecs  avc1 42E01E  mp4a 40 2   gt               lt  -- HERE THE CODE FOR THE ALTERNATIVE PLAYER  FLASH  WILL BE  -- gt       lt  video gt   lt  body gt   lt  html gt

User · Answer

Use ffmpeg   ffserver  It works    You can get a config file for ffserver from ffmpeg org and accordingly set the values

User · Answer

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  lt video gt  tag in your HTML page like that    lt video id  video  src  http   localhost 8080 desktop ogg  autoplay  autoplay    gt    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

User · Answer

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   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   In client side  browser in your case  you can use Videojs or JWplayer to play video for end user  You can do something like below for Videojs    lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt       lt meta charset  UTF-8  gt       lt title gt Live Streaming lt  title gt       lt link href    vjs zencdn net 5 8 video-js min css  rel  stylesheet  gt       lt script src    vjs zencdn net 5 8 video min js  gt  lt  script gt   lt  head gt   lt body gt   lt video id  player  class  video-js vjs-default-skin  height  360  width  640  controls preload  none  gt       lt source src  http   localhost 8080 hls stream m3u8  type  application x-mpegURL    gt   lt  video gt   lt script gt      var player   videojs   player     lt  script gt   lt  body gt   lt  html gt    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

User · Answer

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    lt link href    vjs zencdn net 5 11 video-js min css  rel  stylesheet  gt   lt script src    vjs zencdn net 5 11 video min js  gt  lt  script gt   lt 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       gt   lt source src  rtmp    domain server   publisher   type  rtmp mp4   gt   lt  video gt   lt script gt  var player   videojs  Video    player play     lt  script gt

User · Answer

lt 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   gt               lt param name  fileName  value  mms   my IP Address my port    gt               lt param name  animationatStart  value  true    gt               lt param name  transparentatStart  value  true    gt               lt param name  autoStart  value  true    gt               lt param name  showControls  value  true    gt               lt param name  loop  value  true    gt               lt 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  gt  lt  embed gt   lt  object gt

User · Answer

It is not possible to use the RTMP protocol in HTML nbsp 5  because the RTMP protocol is only used between the server and the flash player  So you can use the other streaming protocols for viewing the streaming videos in HTML nbsp 5

User · Answer

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  and http   www streamingmedia com Articles Editorial Featured-Articles 25-HTML5-Video-Resources-You-Might-Have-Missed-74010 aspx

User · Answer

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  lt video gt  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

[html] HTML5 live streaming

Examples related to html

Examples related to video-streaming

Examples related to html5-video