HowTo点播
准备工作:注册微吼云账号,并拿到appId,如未则点击微吼云
页面引入依赖资源
在需要播放视频的页面(包括PC或H5)中引入初始化脚本
<link rel="stylesheet" href="https://static.vhallyun.com/jssdk/videojs.min.css?v=1.0.0"></script><!--播放器默认样式,需要引用在包含在页面的head标签里-->
<script src="https://static.vhallyun.com/jssdk/dvideo-plugin.js?v=1.0.0"></script><!--依赖的播放器资源-->
页面引用SDK文件
在需要播放视频的页面(包括PC或H5)中引入初始化脚本
<link rel="stylesheet" href="https://static.vhallyun.com/jssdk/videojs.min.css?v=1.0.0"></script><!--播放器默认样式,需要引用在包含在页面的head标签里-->
<script src="https://static.vhallyun.com/jssdk/dvideo-plugin.js?v=1.0.0"></script><!--依赖的播放器资源-->
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-player-1.0.0.js"></script>
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-base-1.0.0.js"></script>
注意:
- 直接用本地网页是调试不了的
- 上面所有文件都需要引用,而且顺序需要保持与上面一致
- 建议直接复制上面代码
页面创建播放器容器
在需要web播放的页面位置加入播放器对象容器,也就是放一个div,然后给它取个名字,比如: my-video 。之后推流回显画面都会在这个容器里渲染,容器的大小控制您可以使用div的属性进行控制,示例代码如下:
<div id="my-video" style="width:100%; height:450px;"></div>
注册ready事件
Vhall.ready(function(){
//todo
})
注意: 初始化完成之后,会执行ready回调事件,机制同jQuery ready事件,播放器调用逻辑需要写在此事件里。
初始化SDK配置
初始化配置:
Vhall.config({
appId :'',//应用 ID ,必填
accountId :'',//第三方用户唯一标识,必填
token:'',//token必填
})
注意: appId获取方式:登陆微吼云>>进应用管理>>取得对应AppId token生成方式:通过API生成,生成accessToken接口说明
播放器初始化
VhallPlayer.init({
roomId:'', //房间ID,直播必填,点播不写
recordId:'',//回放Id,点播必填,直播不写
type:'live',//播放类型,必填,live 直播, vod 为点播
videoNode:'',//推流视频回显节点id,必填
complete:function(){
}
});
注意:
播放
VhallPlayer.play 播放
VhallPlayer.play();
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo for push stream</title>
<link rel="stylesheet" href="https://static.vhallyun.com/jssdk/videojs.min.css?v=1.0.0"></script><!--播放器默认样式,需要引用在包含在页面的head标签里-->
<script src="https://static.vhallyun.com/jssdk/dvideo-plugin.js?v=1.0.0"></script><!--依赖的播放器资源-->
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-player-1.0.0.js"></script>
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-base-1.0.0.js"></script>
<style>
body{
background-color: #000;
/* height: 800px;
line-height: 800px;*/
}
.video-box{
margin:0 auto;
width: 854px;
height: 480px;
}
</style>
</head>
<body>
<div class="video-box" >
<div id="myVideo" style="width:100%; height:450px;"></div>
</div>
</body>
<script>
Vhall.ready(function(){
VhallPlayer.init({
roomId:'lss_c063b5c9', //房间ID,直播必填,点播不写
recordId:'',//回放Id,点播必填,直播不写
type:'live',//播放类型,必填,live 直播, vod 为点播
videoNode:'myVideo',//推流视频回显节点id,必填
complete:function(){
VhallPlayer.play();
}
});
});
Vhall.config({
appId :'76043aaf',//应用 ID ,必填
accountId :'10000126',//第三方用户唯一标识,必填
token:'vhall',//token必填
});
</script>
</html>