问题

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?

Deltion Live Streaming

回答1:

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 tag in your HTML page like that:

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.

回答2:

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

回答3:

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 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.

回答4:

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:

Live Streaming

var player = videojs('#player');

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.

回答5:

It is not possible to use the RTMP protocol in HTML 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 5.

回答6:

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:

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 } }'

>

var player = videojs('Video');

player.play();

回答7:

Use ffmpeg + ffserver. It works!!!

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

回答8:

height="285" id="mediaPlayer" standby="Loading Microsoft Windows Media Player components..."

type="application/x-oleobject" width="360" style="margin-bottom:30px;">

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">

来源：https://stackoverflow.com/questions/5858936/html5-live-streaming