html5视频直播的简单介绍

怎么做到微信直播，HTML5直播，低延时

功能模块概述

碌曲网站制作公司哪家好，找创新互联建站！从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作，到程序开发，运营维护。创新互联建站2013年开创至今到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站。

通过obs客户端推流到nginx流媒体服务器上，对流媒体用ffmpeg将流剪切为若干段ts流文件并保存到临时目录中，通过访问m3u8格式拼接ts流文件段来观看直播。

推流端

采用开源工具OBS客户端进行推流

根据项目的推流地址，填入OBS客户端（下载地址）中，并设置场景，保存后重启，便可开始推流。

为更加稳定的推流，建议使用以上链接中的v0.625稳定版本，按提示安装完成后，打开设定.在广播设定中，伺服器统一填写我们项目的流媒体接收流地址：

rtmp://127.0.0.1:1935/hls/

以上这几个数据都是可以更改的。

127.0.0.1——你的流媒体服务器ip

1935——你的rtmp端口号

hls——你的直播nginx配置模块

具体在下文中也有详细介绍

配置地址

回到主界面，右键来源，选择添加视频捕捉设备或获取窗口等（相关设置默认即可），点击开始串流，便可开始直播。

添加场景

图为添加视频捕捉设备后的直播画面：

直播中

流媒体服务器

Nginx接收推流模块

rtmp_auto_push on;

rtmp {

server {

listen 1935;

application hls {

live on;

hls on;

hls_path /tmp/hls;

on_publish 项目地址/liveOnPublish;

on_publish_done 项目地址/liveOnDone;

notify_method get;

}

}

}

配上我在word上的注解

注解1

Nginx处理直播流模块

http {

server {

listen 80;

server_name localhost;

location /hls {

secure_link $arg_st,$arg_e;

secure_link_md5 key$arg_e;

subs_filter .ts '.ts?st=$arg_ste=$arg_eclentip=$remote_addr';

subs_filter_types application/vnd.apple.mpegurl;

if ($secure_link = "") {

return 402;

}

if ($secure_link = "0") {

return 403;

}

# Serve HLS fragments

types {

application/vnd.apple.mpegurl m3u8;

video/mp2t ts;

}

root /tmp;

add_header Cache-Control no-cache;

}

}

}

注解2

项目部署服务器

流媒体服务器不通过项目服务器，整个直播过程的推流和处理流都在流媒体服务器上进行。项目服务器主要进行直播地址加密处理意见推流开始和结束触发的方法（liveOnPublish()，liveOnDone()）已及对直播地址加密.

播放端

直接通过HTML5中的video标签设置src来播放直播流。如：

video src="pro/live.m3u8?st=UM/L8jdfTlY2b1j1F6XSxA==e=1468548530

" controls="controls"/video

存在的问题

延迟待测试（不科学的数据是安卓手机普遍在30-40s，苹果手机在20-30s）

并发待测试

掉帧待测试（网速影响大，网络好几乎不掉帧，网络差掉一半，用户体验差）

HTML5 现在能够进行视频直播的相关开发吗

可以。AokuMediaServer6.0支持HTML5直播，下载后很容易就运行起来了。

html5如何实现自动播放视频

我们使用html5的video标签，可以不依赖于任何第三方的插件或控件，直接在浏览器中实现视频播放功能。

在了解了video标签之后，下面我们就使用html5的video标签来实现视频播放。

现在，我们打开浏览器，看一看具体的效果：

为了更好地兼容各种浏览器，你可以为一个video标签添加多个source子标签，每个source标签引用一个不同格式的视频文件。这样，html5浏览器会自动在这些source标签中从上到下依次寻找并识别出该浏览器可以播放的第一个视频文件并进行播放，从而实现兼容多个浏览器的视频播放功能。

注：html5的video标签目前只支持播放.mp4、.ogg、.webm等几种格式的视频文件，暂不支持其他格式的视频文件。此外，不同的html5浏览器支持的视频文件格式也略有不同，这种状况可能会在未来的html5中得以改善。

如何使html5直播 ckplayer

div id="a1"/div

script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"/script

script type="text/javascript"

var flashvars={

p:1,

e:1

};

var video=['http:// movie.ks.js.cn/flv/other/1_0.mp4-video/mp4','http:// www .ckplayer.com/webm/0.webm-video/webm','http:// www .ckplayer.com/webm/0.ogv-video/ogg'];

var support=['all'];

CKobject.embedHTML5('a1','ckplayer_a1',600,400,video,flashvars,support);

/script1234567891011

HTML

CKobject.embedHTML5('放置播放器的容器的ID',

'播放器ID',

'宽高，支持百分比',

'高度，支持百分比',

视频地址，数组，因为不同的平台支持的视频格式不同，所以需要尽量多的视频格式来兼容,

初始化配置参数，比如默认是否播放,

在哪些平台上使用，all是指全部平台都调用

);

现在html5 能够实现直播了吗

可以实现直播的。 说H5是一种HTML的新标准，这种新标准支持原生的video标签和video控件。因为video控件标签又支持HLS协议播放。所以得以实现在手机移动端的网页播放。H5是解决网页播放问题，HLS解决的是移动端播放问题。两者的结合使得手机移动端的网页播放得以完美的实现。 从而实现了所有观看直播和点播视频的大众无需再下载任何插件就可以欣赏视频内容。 从技术角度上讲，是一种视频观看欣赏体验的大飞跃。