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>

注意:

  1. 直接用本地网页是调试不了的
  2. 上面所有文件都需要引用,而且顺序需要保持与上面一致
  3. 建议直接复制上面代码

页面创建播放器容器

在需要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(){

        }
    });

注意:

  1. 此方法必需写在Vhall.ready事件里。
  2. roomId获取方式,登陆微吼云>>进入应用管理>>找到对应需要推流的应用>>点“直播管理”>>房间管理>>取得相应房间ID。
  3. videoNode,为推流回显容器的Id,需要开发者自己在需要显示回显的地方,创建一个空div,然后给Id命名,再将id名称写入此参数。

播放

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>