目前手页直播，主要方案有如下几种：1,基于hls切片直播，前前是应用的主流,服务器可以选fms,wowza,nginx,srs之类优点：集成方便，支持度高，兼容性好，主流手都支持，是目前直播技术主流。缺点：延时大，一般服务器可以控制切片时长（延时可以控制在15-30秒之间）2,基于浏览器mse技术，目前端技术上有B站的flv解码器。后端技术srs之类。优点：集成方便，兼容性一般，原有技术平台可以保留，延时可以控制在10秒内缺点：（主要是部分浏览器不支持mse,），目前iOS 内不支持，延时稍大。注：有人用h264的解码，代替flv,效过接近。3，基于webrtc技术，目前只有wowza支持。优点：延时少缺点：兼容性差，目前ios不支持，原技术方案要调整，项目改造大。4，基于ovmeet技术自建流服务直播，优点：延时少，超低，可控在1秒内（测试在0.2秒左右），兼容好，所有html5手机平台通吃，技术兼容原平台推流rtmp,rtsp,rtp。缺点：要自建流服务，
十多年的雨城网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同，自动调整雨城建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“雨城网站设计”,“雨城网站推广”以来，每个客户项目都认真落实执行。
html5是网页代码的标准，跟视频传输协议没一分钱的关系。
html5支持的视频格式是H.264，html5之前的网页代码是不支持视频的。
网页上能看到视频是因为浏览器安装了插件，比如flashplayer、Windows Media Player、RealPlayer、快播、百度影音等。
用什么传输协议是看插件支持什么协议。
rtsp流在主流浏览器并不支持直接播放。比如大华的视频流：rtsp://admin:123456@
192.168.10.129/cam/realmonitor?channel=1subtype=0，用vlc可以直接播放。但在浏览器会报ERR_UNKNOWN_URL_SCHEME。那如何在浏览器中播放呢。
以下列出几种方案。
1、安装插件（chrome最新版基本都不支持）
类如：kurento，vlc插件（谷歌浏览器版本41以下),vgx插件(不支持高版本，chrome72.0版本可用)等。
2、安装软件（中间件，基本都付费）
类如：Appemit（调用vlc插件播放rtsp），可以免安装的，目前只能windows,免费版会有提示。
猿大师中间件（底层调用VLC的ActiveX控件，实现在主流浏览器网页中内嵌播放多路RTSP的实时视频流），中间件收费的。
PluginOK(牛插)中间件。底层调用ActiveX控件VlcOcx.dll。（商业用途需付费使用）
3、服务器拉流转发及协议转换
示意图如下所示：
推流--------------服务器转发--------------拉流
方法一览：
a,vlc软件串流到http协议 ，网页显示几个视频需启动几个vlc,只适合应急场景。
b,html5 + websocket_rtsp_proxy 实现视频流直播 ，基于MSE（Media Source Extensions,W3C），扩展H5的功能。
步骤：服务器安装streamedian服务器，客户端通过video标签播放。
原型图：
价格：
c.基于nginx的rsmp转发
基于nginx实现rtmp转化，用flash实现播放。由于flash目前大多浏览器默认禁用，不推荐此方式。
步骤：安装ffmpeg工具,安装nginx。
另外nginx-rtmp-module也支持HLS协议,可以搭建基于hls的直播服务器。
d.rtsp转hls播放,通过ffmpeg转码
步骤：安装ffmpeg工具，ffmpeg转码。
形如：
ffmpeg -i "rtsp://admin:123456@192.168.10.129/cam/realmonitor?channel=1subtype=0" -c copy -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 "D:/hls/test.m3u8"
缺点是直播流延时很大，对实时要求比较高的不满足要求。
案例：基于EasyDarwin拾建转码服务器。参考地址:
通过存储的m3u8去读取。
e.websocket代理推送，FFMPEG转码
此方法与a，b类似。但更实用。
以下提供两种方案：
（1）Gin+WebSocket+FFMPEG实现rtsp转码,参考：
通过FFMPEG把rstp转成http，ginrtsp作为转发服务器，但需要自己写相应接口，需要了解go语言。
（2）node + ffmpeg + websocket + flv.js，参考：
步骤：在node服务中建立websocket；通过fluent-ffmpeg转码，将RTSP 流转为flv格式；通过flv.js连接websocket，并对获取的flv格式视频数据进行渲染播放。
import WebSocket from 'ws'import webSocketStream from 'websocket-stream/stream'import ffmpeg from 'fluent-ffmpeg'// 建立WebSocket服务const wss = new WebSocket.Server({ port: 8888, perMessageDeflate: false })// 监听连接wss.on('connection', handleConnection)// 连接时触发事件function handleConnection (ws, req) { // 获取前端请求的流地址（前端websocket连接时后面带上流地址） const url = req.url.slice(1) // 传入连接的ws客户端 实例化一个流 const stream = webSocketStream(ws, { binary: true }) // 通过ffmpeg命令 对实时流进行格式转换 输出flv格式 const ffmpegCommand = ffmpeg(url) .addInputOption('-analyzeduration', '100000', '-max_delay', '1000000') .on('start', function () { console.log('Stream started.') }) .on('codecData', function () { console.log('Stream codecData.') }) .on('error', function (err) { console.log('An error occured: ', err.message) stream.end() }) .on('end', function () { console.log('Stream end!') stream.end() }) .outputFormat('flv').videoCodec('copy').noAudio() stream.on('close', function () { ffmpegCommand.kill('SIGKILL') }) try { // 执行命令 传输到实例流中返回给客户端 ffmpegCommand.pipe(stream) } catch (error) { console.log(error) }}
优点全部基于js。前端即可搞定。
参考:
你用的是flashplayer，如果要播放的话，就必须为flv的流媒体吧。 如果你要播放mp4，那么就要用htm5的播放形式， jwplayer应该有html5的版本的。具体我也不是很清楚，给你参考一下。
你用的是flashplayer，如果要播放的话，就必须为flv的流媒体吧。 如果你要播放mp4，那么就要用htm5的播放形式， jwplayer应该有html5的版本的。具体我也不是很清楚，给你参考一下。
有的，在浏览器上播放m3u8的视频地址有两种方式：
一、html的video标签的方式，这种方式播放很简单:
!DOCTYPE hmtl
html
head
titlethe5fire m3u8 test/title
/head
body
video controls autoplay
source src="../v1d30/posts/2014/barcelona/barcelona.m3u8"
/video
/body
/html
二、通过开源的swfobject.js以及两个flash组件：OSMF和HLSProvider来播放，代码如下：
!DOCTYPE html
html
head
titlethe5fire m3u8 test/title
script src="../staticfile/swfobject.js"/script
/head
body
div id="player"
/div
script
var flashvars = {
// M3U8 url, or any other url which compatible with SMP player (flv, mp4, f4m)
// escaped it for urls with ampersands
src: escape(""),
// url to OSMF HLS Plugin
plugin_m3u8: "",
};
var params = {
// self-explained parameters
allowFullScreen: true,
allowScriptAccess: "always",
bgcolor: "#000000"
};
var attrs = {
name: "player"
};
swfobject.embedSWF(
// url to SMP player
"",
// div id where player will be place
"player",
// width, height
"800", "485",
// minimum flash player version required
"10.2",
// other parameters
null, flashvars, params, attrs
);
/script
/body
/html
通过嵌入以上代码就可以播m3u8了。
