本文已参与「新人创作礼」活动,一起开启掘金创作之路。
参考链接: blog.csdn.net/yanmuchen/a…. h5stream 官网: 链接: www.linkingvision.cn/. 下载h5s-r9.0.0605-win64-release.zip 链接: www.linkingvision.cn/download/h5…. Windows vs2017 运行支持包vc_redist.x64.exe 链接: linkingvision.cn/download/h5….
百度网盘打包下载 链接: pan.baidu.com/s/1UVq8zRvh….
开始:
(1)双击vcredist_x64.exe进行安装,安装后需重启,这个安装包也保存着吧,如果已经安装成功的双击会显示修复和卸载
(2)解压产品包h5s-r9.0.0605-win64-release.zip,解压路径随意
(3)双击根目录中的regservice.bat自动注册
(4)修改\h5s-r8.7.0718.19-win64-release\conf目录下的h5ss.conf配置文件,将strUrl的流地址修改为你自己的
这里提供一个流地址:rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov
tip:你可以使用VLC播放器测试一下流地址是否正常,如果无法播放,请更换为其他的
(5)双击根目录下的h5ss.bat启动服务,切记不能关闭哦!
注意:如果无法运行,出现如下报错:那可能是vcredist_x64.exe安装出了问题,这里提供微软下载,重新安装下!
(6)打开网页,浏览器输入localhost:8080 ,看到如下界面代表成功 账号和密码 admin 12345
(7)你也可以直接浏览器输入localhost:8080/demo.html
那如何引入到自己的web项目中呢???
其实很简单,在h5s-r8.7.0718.19-win64-release\www目录下有个demo.html文件,复制到你的项目中去,然后引入相应的js文件,注意!!host 的 window.location.host 改为 localhost:8080,因为H5Stream默认端口为8080,所以为了避免冲突,将你web项目的端口号修改为8081,否则你启动H5Stream服务的时候,就无法启动项目了!
<!DOCTYPE HTML>
<html>
<head>
<title>H5STREAM VIDEO</title>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/adapter.js"></script>
<script src="js/platform.js"></script>
<script src="js/h5splayer.js"></script>
<script src="js/h5splayerhelper.js"></script>
<link rel = "stylesheet" type = "text/css" href = "css/h5splayer.css" />
</head>
<body>
<div class="h5videodiv">
<video class="h5video" id="h5sVideo1" autoplay webkit-playsinline playsinline>
</video>
<div class="playpause" id="playpause1" ></div>
</div>
</body>
<script>
if (H5siOS() === true
|| H5sSafariBrowser() === true)
{
$('#h5sVideo1').prop("controls", true);
}
var conf1 = {
videoid:'h5sVideo1',
protocol: window.location.protocol, //'http:' or 'https:'
host: "localhost:8080", //'localhost:8080'
rootpath:'/', // '/' or window.location.pathname
token:'token1',
hlsver:'v1', //v1 is for ts, v2 is for fmp4
session:'c1782caf-b670-42d8-ba90-2244d0b0ee83' //session got from login
};
var v1 = H5sPlayerCreate(conf1);
$('#h5sVideo1').parent().click(function () {
if($(this).children(".h5video").get(0).paused){
if(v1 != null)
{
v1.disconnect();
delete v1;
v1 = null;
}
v1 = H5sPlayerCreate(conf1);
console.log(v1);
v1.connect();
$(this).children(".playpause").fadeOut();
}else{
v1.disconnect();
delete v1;
v1 = null;
$(this).children(".h5video").get(0).pause();
$(this).children(".playpause").fadeIn();
}
});
</script>
</html>
重新启动h5ss.bat
然后运行web项目,就可以看到视频了。
我是将视频嵌套在我已有的html中,效果如下