JS播放器 集成更新时间：2019-07-06 18:04:50

本文档是介绍微吼云 JS 播放器，它可以帮助微吼云客户通过灵活的接口，快速与自有应用集成，实现视频播放功能。

使用微吼云JS SDK，只需三大步再5小步，就能快速观看直播。

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

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

能力介绍

说明

1、由于MSE本身的影响，在选择开启MSE时，播放器切换视频到音频会产生闪屏的现象

2、使用iOS系统的微信、QQ浏览器，同时选择flv播放，会发生播放异常，提示不支持MSE，建议选择hls播放

3、由于浏览器本身的影响，在使用微信和QQ浏览器的时候会出现被劫持的情况，导致进入全屏失败

一.观看准备

1. 注册微吼开发者账号

2. 创建应用 获取AppID

3. 创建直播间 获取roomId

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

4. 获取直播间包含看直播权限的access_token

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

时序图

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

二.引入sdk文件

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

<script src="vhall-jssdk-player-VERSION.js"></script>

• VERSION 为SDK版本号
• 引用时务必使用HTTPS协议。
• 详见播放器SDK获取

注意：

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

三.代码对接

1.页面创建播放器容器

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

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

2.初始化SDK配置

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

 // 创建实例参数
var opt = {
	appId:'',// 应用ID，必填
	accountId: '', // 第三方用户ID，必填
	token: '', // access_token，必填
	type: '',   // live 直播  vod 点播  必填
	videoNode: "videoNode", // 播放器的容器， div的id 必填
	poster: 'http://xxx.jpg',  // 封面地址  仅支持.jpg
	liveOption:{
		type:'hls'  // 直播播放类型  hls | flv
		roomId: '', // 直播房间ID
	} ,
	vodOption: {
		recordId:''  // 回放 ID
	}
};
// 成功回调
var success = function (event) {
 // 实例句柄
 var vhallplayer= event.vhallplayer;
};
// 失败回调
var failure = function (event) {
  console.log(event);
};
 
// 创建实例
VhallPlayer.createInstance(opt, success, failure);

注意：

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

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

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