使用微吼云JS SDK,只需简单几步,就能快速观看直播。

跟随本文的步骤,即使你对Javascript语言不熟悉,也完全可以做到。

其中,一、二步为准备工作,第三步为代码接入,下面,就分步来说明。

一.观看准备

  1. 注册微吼开发者账号

  2. 创建应用 获取AppID

  3. 获取 点播ID recordId

    可以通过【控制台上传】或【测试工具】或【API】获得

  4. 获取包含点播权限的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:// 开头)才能正常调试。
  1. 上面两个文件都需要引用,而且顺序需要保持与上面一致。
  2. 建议直接复制上面代码

三.代码对接

至此,你已完成所有观看直播准备工作,距离完成,只差以下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必填
 })     

4.播放器初始化

观看直播之前,需要初始化播放器对象VhallPlayer

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

        }
    });

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;
/*      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>
  /**
   * 注册ready事件
   */
  Vhall.ready(function(){
    /**
     * 播放器初始化
     */
    VhallPlayer.init({
      roomId:'lss_c063b5c9', //房间ID,直播必填,点播不写
      recordId:'',//回放Id,点播必填,直播不写
      type:'vod',//播放类型,必填,live 直播, vod 为点播
      videoNode:'myVideo',//推流视频回显节点id,必填
      complete:function(){
      	/**
      	 * 播放
      	 */
        VhallPlayer.play();
      }
    });

  });

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


</script>
</html>

其他相关文档

  1. 快速开始
  2. 观看点播参考手册