一.观看准备

注册微吼开发者账号
创建应用获取AppID
创建直播间获取roomId

可以通过【测试工具】或【API】获得
获取直播间包含看直播权限的access_token

可以通过【测试工具】或【API】获得

时序图

注:已知直播间ID的情况下虚线框部分无需请求。

二.引入sdk文件

接下来，我们正式接入sdk：将下面sdk引入代码，插入页面的head标签里。

<link rel="stylesheet" href="https://static.vhallyun.com/jssdk/videojs.min.css?v=1.0.0"><!--播放器默认样式，需要引用在包含在页面的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.6.2.js"></script>
<script src="https://static.vhallyun.com/jssdk/vhall-jssdk-base-1.0.0.js"></script>

注意：

1.直接用本地网页(file协议，地址栏以file:///开头)是调试不了的，需要运行在Server上(https或http协议，地址栏以https:// 或http:// 开头)才能正常调试。

2.上面两个文件都需要引用，而且顺序需要保持与上面一致。

3.建议直接复制上面代码

三.代码对接

至此，你已完成所有观看直播准备工作，距离完成，只差以下4步：

1.页面创建播放器容器

在需要web播放的页面位置加入播放器对象容器,也就是放一个div，然后给它取个名字，比如: my-video 。之后推流回显画面都会在这个容器里渲染，容器的大小控制您可以使用div的属性进行控制，示例代码如下：

<div id="my-video" style="width:100%; height:450px;"></div>

2.注册ready事件

接下来，在页面里写javascript代码，调用sdk提供的接口，注册sdk ready事件，接口调用方法如下：

 /**
  * 注册ready事件
  */
  Vhall.ready(function(){
    //TODO
  })

注意:所有观看逻辑需要写在此事件里。

3.初始化SDK配置

接下来需要传入相关参数，初始化配置：

  /**
   * 初始化配置
   */
   Vhall.config({
     appId :'',//应用 ID ,必填
     accountId :'',//第三方用户唯一标识,必填
     token:'',//token必填
   })

注意：

1.appId获取方式，参考[推流准备]的“创建应用获取AppID”

2.token生成方式,参考[推流准备]的“获取直播间 access_token”

3.此处的toekn，即为参考准备的access_token。

4.播放器初始化

观看直播之前，需要初始化推流对象VhallPlayer

   /**
    * 播放器初始化
    */
    VhallPlayer.init({
        roomId:'', //房间ID,直播必填，点播不写
        recordId:'',//回放Id，点播必填，直播不写
        type:'live',//播放类型,必填，live 直播, vod 为点播
        videoNode:'',//推流视频回显节点id，必填
        complete:function(){

        },
        //播放器错误事件监听
        error:function(reason){
            console.log('player error');
        }
    });

注意：

1.此方法必需写在Vhall.ready事件里。

2.roomId获取方式，登陆微吼云>>进入应用管理>>找到对应需要推流的应用>>点“直播管理”>>房间管理>>取得相应房间ID。

3.videoNode,为推流回显容器的Id，需要开发者自己在需要显示回显的地方，创建一个空div，然后给Id命名，再将id名称写入此参数。

5.播放

最后一步，播放。示例：

 /**
  * 播放
  */
  VhallPlayer.play();

注意：此方法必需写在Vhall.ready事件里。

完整例子代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>观看直播</title>
  <link rel="stylesheet" href="https://static.vhallyun.com/jssdk/videojs.min.css?v=1.0.0"><!--播放器默认样式，需要引用在包含在页面的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;
    }
    .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>
  
 /**
  * 注册ready事件
  */
  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:'',//token必填
   });


</script>
</html>

JS SDK 如何观看直播