甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
我们使用html5的video标签，可以不依赖于任何第三方的插件或控件，直接在浏览器中实现视频播放功能。
公司专注于为企业提供成都网站设计、做网站、微信公众号开发、成都商城网站开发，小程序开发，软件定制制作等一站式互联网企业服务。凭借多年丰富的经验，我们会仔细了解各客户的需求而做出多方面的分析、设计、整合，为客户设计出具风格及创意性的商业解决方案，创新互联更提供一系列网站制作和网站推广的服务。
在了解了video标签之后，下面我们就使用html5的video标签来实现视频播放。
现在，我们打开浏览器，看一看具体的效果：
为了更好地兼容各种浏览器，你可以为一个video标签添加多个source子标签，每个source标签引用一个不同格式的视频文件。这样，html5浏览器会自动在这些source标签中从上到下依次寻找并识别出该浏览器可以播放的第一个视频文件并进行播放，从而实现兼容多个浏览器的视频播放功能。
注：html5的video标签目前只支持播放.mp4、.ogg、.webm等几种格式的视频文件，暂不支持其他格式的视频文件。此外，不同的html5浏览器支持的视频文件格式也略有不同，这种状况可能会在未来的html5中得以改善。
哔哩哔哩切换播放器，需要在播放的页面里选择，才可以切换到html5播放器，切换播放器的的具体步骤为：
1、首先打开哔哩哔哩直播间。
2、然后在直播页面的任意地点点击鼠标右键。
3、选择bilibili HTML5 Live Player，然后点击鼠标左键，即可切换到HTML5播放。
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是指全部平台都调用
);
功能模块概述
通过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）
并发待测试
掉帧待测试（网速影响大，网络好几乎不掉帧，网络差掉一半，用户体验差）
1、html还没有flash那么成熟，而且就视频标准这一块google、apple、微软等有一套自己的支持标准，比较分裂。尚未统一。
2、按照我国的国情，大部分用户还是比较低的版本。IE6用户太多。
3、视频地址泄漏：盗链 懂点技术的都知道可以用开发工具查看页面源代码，这样html5加载的视频地址也就处于裸奔状态了。
4、收入来源：广告 如果用html5来播视频内容，广告就得嵌入视频中，而且更换广告内容需要重新压制视频，成本太高并且不实际。
望采纳！谢谢