点播服务开发指南 微吼云

服务介绍    

基本描述

微吼云视频点播基于微吼多年的技术和经验积累，为有点播服务需求的用户提供点播上传、音视频转码、音视频存储、CDN加速、iOS/Android/PC多终端播放的一体化解决方案。点播服务提供控制台上传，iOS、Android、Javascript端的播放器SDK，web端管理控制台及服务端API接口，帮助用户快速完成点播平台的搭建。

目前，微吼云点播服务面向微吼云注册用户开放。

服务架构

主要功能

类别 功能名称 详细内容
视频上传 控制台上传 进入点播控制台页面，可选择本地视频文件进行上传
SDK上传 支持微吼云提供的Java、Javascript上传 SDK
上传格式 视频：RMVB、MP4、AVI、WMV、MKV、FLV、MOV；音频：MP3、WAV；文件大小：5G内
视频转码 转码设置 支持转码设置，转码输出支持720P、480P、360P、音频
点播观看 观看协议 支持MP4、HLS三种播放协议
观看方式 支持微吼云提供的iOS、Android、Javascript播放 SDK
点播回调 回调设置 设置回调URL，主动将回放转码状态返回给用户
视频管理 管理方式 支持通过控制台和API两种方式对视频进行管理
控制台管理 支持点播视频上传、点播视频查询、点播视频预览和点播视频删除
API管理 支持生成点播文件、删除点播、获取点播视频列表、配置点播转码、指定回放文件转码
数据统计 控制台统计 查询空间、流量、观众访问数据
API统计 查询流量、观众访问数据

服务优势

1.视频上传

支持控制台本地上传、支持直播录制转点播，适应不同场景下的上传需求；支持多种音视频格式上传。

2.极致加速体验

具备大规模全网分发能力，支持百万级并发直播观看需求，为音视频点播提供加速服务，带来更快速、更流畅的视听体验。

3.支持多平台播放

提供多终端播放器SDK，支持Android/iOS/Web平台，开发者可通过集成SDK快速接入点播服务。

4.数据统计

提供多维度的数据统计分析，用户可快速查看服务的使用量和服务访问统计的情况。

快速开始    

点播流程

微吼云点直播流程图

点播前准备

1 前提条件

  • 上传与播放工具

    完成一次点播需要具备上传点播和观看点播的工具，微吼云提供上传/播放器SDK及体验Demo，可以通过Demo进行视频的推流与播放

    通过微吼云提供的下载页，下载安装上传/播放器SDK及Demo。

2 操作步骤

2.1 登录

登录微吼云控制台

2.2 创建应用

详情参考如何创建应用

2.3 获取app_id

详情参考如何获取app_id

2.4 设置包名&签名

如需集成移动端SDK，则需设置包名&签名，详情参考设置包名&签名

2.5 添加服务

创建应用后，点击添加服务，弹出添加服务对话框，选择点播服务，点击确定，点播服务添加成功。

2.6 获取record_id

record_id即为点播文件的视频ID，用户可通过控制台查询视频ID，也可通过接口和API在线测试工具进行查询。

2.6.1 控制台查询

在点播管理视频管理页面可查询点播文件的视频ID，具体如下图

2.6.2 接口查询

可通过接口获取record_id，具体参考生成点播接口

2.6.3 API在线测试工具查询

参考通过在线测试接口工具完成获取record_id。

2.7 获取access_token

access_token即权限，调用接口生成access_token将传入SDK，SDK在请求时会附带access_token，具体方式参考生成access_token接口和API在线测试工具。

注： access_token过期时间，默认为一天，最大为一天，过期后需要重新生成access_token。

2.7.1 接口获取

可通过接口获取access_token，具体参考生成access_token接口。

2.7.2 API在线测试工具获取

参考通过在线测试接口工具完成获取access_token。

上传点播

上传点播可通过微吼云提供的推流SDK（包含JAVA、JS）、控制台进行上传,同时还支持通过接口将直播录制文件生成点播文件，以下分别以SDK Demo和控制台为例进行说明。

JS SDK Demo

1 演示地址

https://static.vhallyun.com/demand-upload-jssdk-vhallcloud/dist/1.0.0/index.html?appKey=appKey&secretKey=secretKey

地址中需传入app_id和secret_key

2 上传点播

选择需要上传的视频文件，点击保存，视频文件上传成功。

JAVA SDK Demo

具体参考Demo使用指南

控制台

点击视频上传按钮，本地选择视频文件，点击上传，视频文件上传成功。

观看点播

观看点播可通过微吼云提供的播放器SDK（包含iOS、Android、JS）,以下以SDK Demo为例进行说明。

JS SDK Demo

1 演示地址

https://static.vhallyun.com/jssdk/vhall-jssdk-live/test/demo.html

2 接口配置

接口配置页面依次输入app_id（应用ID）、record_id（点播ID）、accountId（第三方用户ID：开发者自有用户系统里用户的唯一标识），详情参考：第三方用户ID（third_party_user_id）是什么？、token（access_token），点击保存，跳转至观看页面。

3 观看

进入观看页面选择PC点播点击播放即可进行点播观看。

注：观看还可通过点击页面的观看演示，不进行接口设置，直接进入观看页面。

iOS SDK Demo

具体参考Demo使用指南

Android SDK Demo

具体参考Demo使用指南

控制台使用指南    

成为开发者

详情参考如何成为开发者

创建应用

详情参考如何创建应用

添加服务

创建应用后，点击添加服务，弹出添加服务对话框，选择点播服务，点击确定，点播服务添加成功。

添加点播服务

添加点播服务1

添加点播服务2

点播管理

点击点播服务的直播管理，进点播管理页面，页面中包含点播配置、视频管理、流量空间、统计分析几部分，用户可分别通过这几个部分来对点播服务进行管理。

点播配置

点播服务添加成功后，可对服务进行配置，点播配置包含应用信息、转码设置两部分

应用信息

应用信息包含app_id、回调URL

app_id的含义，参考什么是app_id

回调URL：设置回调URL，填写完成，点击保存，回调URL设置成功。

点播回调URL设置成功后，会主动将视频转码&点播文件生成状态通过配置的URL通知用户。

转码设置

点击配置，可选择需要转码的码率，支持720P、480P、360P、音频。

转码设置还可以通过API进行控制，具体操作参考配置点播转码接口。

规格说明：

720P:分辨率720P 码率650kb

480P:分辨率480P 码率450kb

360P:分辨率360P 码率330kb

音频：AAC

提醒：开启转码后会产生对应费用，请根据实际情况留意相关成本支出。

视频管理

视频管理支持对视频进行上传、查询、删除、预览、下载操作。

视频上传

点击视频上传按钮，本地选择视频文件，点击上传，视频文件上传成功。

规格说明：

上传视频：RMVB、MP4、AVI、WMV、MKV、FLV、MOV

上传音频：MP3、WAV

文件大小：5G内

提醒：上传视频时会产生空间存储费用，请根据实际情况留意相关成本支出。

视频查询

搜索框中输入视频ID/视频文件名称，列表中依照搜索条件将检索出的视频文件显示在列表中

视频删除

选中需要删除的视频，点击删除或批量删除按钮，视频文件被彻底删除。

视频预览

选择某个视频，点击预览，可预览该视频文件，观看视频效果。

视频下载

可下载一条视频记录下的全部文件，也可以下载视频记录中的每个文件，下载时先点击生成下载，进行下载文件生成，文件生成完毕，按钮会变为下载，此时即可进行视频下载。

流量空间

支持用户在指定时间范围内查询空间、流量信息，颗粒度为1个小时。

统计分析

支持用户在指定时间范围内对观众人数、观看次数、观众的地理位置分布、观看终端分布、观看浏览器分布信息进行查询，数据颗粒度为1个小时。

客户端集成

客户端SDK下载：

SDK下载

客户端SDK集成文档：

如何通过JS SDK上传视频

如何通过JAVA SDK上传视频

如何通过iOS SDK观看视频

如何通过Android SDK观看视频

如何通过JS SDK观看视频

服务端集成

服务端API手册

如何通过接口完成点播准备

如何通过接口生成回放

点播API    

API名称 功能
create 生成点播
delete 删除点播
lists 点播列表
set-trans-code-info 配置点播转码
get-stream-flow 获取点播流量数据
trans-record 指定回放文件转码
get-record-info 获取点播详情
get-room-use-info 获取点播属性信息
get-room-join-info 获取点播访问记录
live-record 获取直播房间下的点播列表

如何通过接口完成点播准备    

通过接口测试工具    

本文将引导通过接口测试工具，获取access_token。

进入接口测试页面

为使 SDK 可以在无需服务端代码即可运行，微吼云提供了API 请求工具为 SDK 完成准备工作。 点击这里 进入 API 请求工具页面。

生成 AccessToken

通过接口获取 AccessToken (注：播放点播无需特殊权限，仅填必选参数即可)

  • 选择服务 : Base , API 名称 ：create-access-token
  • 按 生成AccessToken接口文档 填写参数
  • 返回数据中 的 access_token 即为 SDK 观看点播所需要的access_token

如下图 :

参考链接

完成本页的步骤后，您可能需要阅读以下文档。

通过服务端代码    

本文将引导通过服务器端代码请求微吼云 API，获取access_token。

获取 app_id 和 secret_key

微吼云 API 使用app_id来标识应用，使用secret_key来作为双方通讯的传输秘钥，两者为使用微吼云 API 的必要参数。

点击这里 查看如何获取app_id和secret_key。

PHP代码实现

引入公共代码

我们对调用 API 过程中一些公用代码做了简单封装，作为工具库，您可以 点击这里 获取。然后在代码中引用。

/**
 * 引入公共代码
 */
include_once("vhall_paas.php");

本文后面的 PHP 示例代码将以此工具库为基础。

运行服务端代码

当微吼云代码工具库引入到项目中后，您可以开始运行下列 API 调用代码来获取 access_token。

获取 access_token

// 引用微吼云PHP代码工具库
include 'vhall_paas.php';

/**
 * 初始化应用&秘钥信息
 * 获取方式 微吼云控制台 -> 应用 -> 设置 -> 应用信息
 * http://www.vhallyun.com/console/app/index
 */
VhallPaas::$app_id = '';
VhallPaas::$secret_key = '';

// 生成AccessToken接口请求地址
$accessTokenAddress = 'api.yun.vhall.com/api/v1/base/create-access-token';

/**
 * 生成 AccessToken 参数
 * AccessToken 为 SDK 中鉴别用户权限使用，针对不同的服务需要不同的参数来生成 AccessToken
 * 当前例子无需特殊权限
 * 您可以通过阅读 www.vhallyun.com/docs/show/1013 来获取不同权限的 AccessToken 生成方式
 */
$createAccessTokenParams = [
    // 第三放用户ID，根据实际情况编写 （这里使用当前时间）
    'third_party_user_id' => 'vhall_paas_test_' . time(),
    // 过期时间,最大时间为一天，默认一天 （这里使用10小时做例子）
    'expire_time' => date("Y-m-d H:i:s", time() + (10 * 3600)),
];

// 加载公共参数&运算签名
$createAccessTokenParams = VhallPaas::createRealParam($createAccessTokenParams);

// 获取accessToken
try {
    $result = VhallPaas::request($accessTokenAddress, $createAccessTokenParams);
    $accessToken = $result['access_token'];
} catch (Exception $e) {
    exit("请求发生错误 错误信息为 {$e->getMessage()} . 错误码为 {$e->getCode()}");
}
var_dump($accessToken);

参考链接

完成本页的步骤后，您可能需要阅读以下文档。

如何通过接口生成回放    

通过接口测试工具完成    

本文将引导通过接口测试工具，生成回放。

进入接口测试页面

为使 SDK 可以在无需服务端代码即可运行，微吼云提供了API 请求工具为 SDK 完成准备工作。 点击这里 进入 API 请求工具页面。

生成回放

通过接口生成回放、获取回放 ID（注：直播房间正在推流时无法调用该接口）

  • 选择服务 : Record , API 名称 ：create
  • 按 生成回放接口文档 填写参数
  • 返回数据中的 record_id 即为 回放 ID

如下图 :

参考链接

完成本页的步骤后，您可能需要阅读以下文档。

通过服务端代码完成    

本文将引导通过服务器端代码请求微吼云 API，生成回放

获取 app_id 和 secret_key

微吼云 API 使用 app_id 来标识应用，使用 secret_key 来作为双方通讯的传输秘钥，两者为使用微吼云 API 的必要参数。

点击这里 查看如何获取 app_id 和 secret_key。

PHP代码实现

引入公共代码

我们对调用 API 过程中一些公用代码做了简单封装，作为工具库，您可以 点击这里 获取。然后在代码中引用。

/**
 * 引入公共代码
 */
include_once("vhall_paas.php");

本文后面的 PHP 示例代码将以此工具库为基础。

运行服务端代码

当微吼云代码工具库引入到项目中后，您可以开始运行下列 API 调用代码，来生成回放

生成回放

// 引用微吼云PHP代码工具库
include 'vhall_paas.php';

/**
 * 初始化应用&秘钥信息
 * 获取方式 微吼云控制台 -> 应用 -> 设置 -> 应用信息
 * http://www.vhallyun.com/console/app/index
 */
VhallPaas::$app_id = '';
VhallPaas::$secret_key = '';

// 创建点播接口请求地址
$createRecordAddress = 'api.yun.vhall.com/api/v1/record/create';

// 创建点播参数
$createRecordParams = [
    // 通过创建房间拿到房间ID（直播推流结束后）
    'room_id' => 'lss_45978ec6',
    // 开始时间&结束时间（按实际的开始直播时间传入，这里取前10分钟作为测试）
    'start_time' => date("Y-m-d H:i:s", time() - 600),
    'end_time' => date("Y-m-d H:i:s")
];
// 加载公共参数&运算签名
$createRecordParams = VhallPaas::createRealParam($createRecordParams);

// 创建点播
try {
    $result = VhallPaas::request($createRecordAddress, $createRecordParams);
    $recordId = $result['record_id'];
} catch (Exception $e) {
    exit("请求发生错误 错误信息为 {$e->getMessage()} . 错误码为 {$e->getCode()}");
}

var_dump($recordId);

参考链接

完成本页的步骤后，您可能需要阅读以下文档。

如何通过SDK上传视频    

如何通过JS SDK上传视频    

使用微吼云JS SDK，只需简单几步，就能快速上传视频。

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

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

一.上传准备

  1. 注册微吼开发者账号

  2. 创建应用 获取AppID

  3. 创建直播间 获取roomId 测试工具获取、 API获取

  4. 获取直播间 access_token 测试工具获取、 API获取

二.引入sdk文件

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

<script src="http://cnstatic01.e.vhall.com/3rdlibs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script><!--依赖的JQuery库-->
<script src="https://static.vhallyun.com/demand-upload-jssdk-vhallcloud/dist/1.0.0/vhallDemandSDK-vhallcloud.js"></script>

注意：

  1. 直接用本地网页(file协议，地址栏以file:///开头)是调试不了的，需要运行在Server上(https或http协议，地址栏以https:// 或http:// 开头)才能正常调试。
  1. 上面两个文件都需要引用，而且顺序需要保持与上面一致。
  2. 建议直接复制上面代码

三.代码对接

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

1.页面创建相关容器

在需要web上传的页面位置加入如下dom结构作为容器，也就是放几个页面元素，然后给每个对应的元素起个名字，示例代码如下：

	<input type="file" id="upload"/> <!--文件上传域 -->
	<input type="text" id='rename'> <!--用于承载文件名称的input 可用于修改上传文件标题 若用不到可设置为隐藏 -->
	<button id="confirm" class="saveBtn">保存</button>  <!--上传成功后用于保存文件的按钮 -->

2.初始化SDK配置

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


 /**
  * 初始化SDK配置
  */
  vhallCloudDemandSDK('#upload',{
    params: {
      confirmBtn:'#confirm', //保存按钮的ID
      name:'#rename',//用于修改文件名称的input的ID
      sign:signTag.str, //生成的鉴权信息
      signed_at:signTag.time, //鉴权信息生成的时间戳
      app_id:appId //用户的appid
    }
  })

注意：

  1. appId获取方式：登陆微吼云>>进应用管理>>取得对应AppId
  2. sign和signed_at：通过API生成，生成sign接口说明
  3. confirmBtn：保存按钮的ID，需要开发者自己创建一个dom，然后给Id命名，再将id名称写入此参数
  4. name：用于修改文件名称的input的ID，需要开发者自己创建一个input标签，然后给Id命名，再将id名称写入此参数

3.监听回调函数

代码如下：

    
    /**
     * 监听回调函数
     */
    vhallCloudDemandSDK('#upload',{
        params: {
            confirmBtn:'#confirm', //保存按钮
            name:'#rename',//用于修改文件名称的input
            sign:signTag.str, //生成的鉴权信息
            signed_at:signTag.time, //鉴权信息生成的时间戳
            app_id:appId //用户的appid
        },
       /**
        * 初始化完成的回调函数
        */
        ready: function() {

        },
       /**
        * 准备中...（文件进行MD5转换过程）
        * 可以已loader形式展现该过程
        */
        beforeUpload:function() {

        },
       /**
        * 上传中...'
        * 'percent 上传进度百分比'
        * 'file 上传文档具体信息
        */
        progress:function(percent, file){

        },
       /**
        * 上传成功!'
        */
        uploadSuccess: function(res){

        },
       /**
        * 点击保存按钮后保存成功'
        * res返回record_id
        */
        saveSuccess:function(res) {

        },
       /**
        * 上传出错'
        * 'msg 错误返回的状态码信息'
        */
        error: function(msg,file,e){

        }
    })

完整例子代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>点播上传</title>
	<script src="http://cnstatic01.e.vhall.com/3rdlibs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script><!--依赖的JQuery库-->
	<script src="https://static.vhallyun.com/demand-upload-jssdk-vhallcloud/dist/1.0.0/vhallDemandSDK-vhallcloud.js"></script>
</head>
<body>
	<input type="file" id="upload"/> <!--文件上传域 -->
	<input type="text" id='rename'> <!--用于承载文件名称的input 可用于修改上传文件标题 若用不到可设置为隐藏 -->
	<button id="confirm" class="saveBtn">保存</button>  <!--上传成功后用于保存文件的按钮 -->
	<script>
       /**
        * 监听回调函数
        */
		vhallCloudDemandSDK('#upload',{
            params: {
                confirmBtn:'#confirm', //保存按钮
                name:'#rename',//用于修改文件名称的input
                sign:signTag.str, //生成的鉴权信息
                signed_at:signTag.time, //鉴权信息生成的时间戳
                app_id:appId //用户的appid
            },
            /**
             * 初始化完成的回调函数
             */
            ready: function() {
               
            },
            /**
             * 准备中...（文件进行MD5转换过程）
             * 可以已loader形式展现该过程
             */
            beforeUpload:function() {
                 
            },
            /**
             * 上传中...'
             * 'percent 上传进度百分比'
             * 'file 上传文档具体信息
             */
            progress:function(percent, file){
            },
            /**
             * 上传成功!'
             */
            uploadSuccess: function(res){
                
            },
            /**
             * 点击保存按钮后保存成功'
             * res返回record_id
             */
            saveSuccess:function(res) {
                
            },
            /**
             * 上传出错'
             * 'msg 错误返回的状态码信息'
             */
            error: function(msg,file,e){
                
            }
        })
	</script>

其他相关文档

  1. 快速开始
  2. 点播上传参考手册

如何通过JAVA SDK上传视频    

上传录播准备

  1. 注册微吼开发者账号

  2. 创建应用 获取AppID

  3. 获取secretkey

集成过程:

  • 复制commons-codec-1.9.jar到工程lib目录下
  • 复制commons-logging-1.2.jar到工程lib目录下
  • 复制hamcrest-core-1.1.jar到工程lib目录下
  • 复制httpclient-4.4.1.jar到工程lib目录下
  • 复制httpcore-4.4.1.jar到工程lib目录下
  • 复制jdom-1.1.jar到工程lib目录下
  • 复制json-20170516.jar到工程lib目录下
  • 复制vhalluploadkit_pass-1.0-release.jar到工程lib目录下

对接流程:

1、获取VhallUploadKit实例

/**
 * 获取VhallUploadKit实例
 */
util = VhallUploadKit.getInstance();

2、初始化

请先完成录播上传准备工作，完成录播上传准备工作后，会获取AppId和SecretKey，参数获取成功后在调用此方法。

/**
 * @param APPID 应用的唯一标识
 * @param SecretKey 应用的唯一秘钥
 */
public void initData(String APPID, String SecretKey)

3、是否可用

初始化成功后，VhallUploadKit才会处于可用状态，才能上传录播

/**
 * @return true 可以上传录播 / false 上传不可用
 */
public boolean isEnable()

4、上传视频并自动生成录播

/**
 * @param file 需要上传的文件
 * @param videoName 录播名称
 * @param callback 服务器回调
 * @param listener 上传过程监听，返回当前上传状态及上传进度
 * @return 文件对应OSS路径
 */
 String uploadAndBuildVideo(File file, String videoName,Callback callback, ProgressListener listener)

5、停止上传

录播上传服务支持断点续传，上传过程中，本地会生成一个ucp文件，保存当前上传进度，如果上传操作被异常或手动中断，下次上传会自动定位到最后一次的上传位置继续上传。

/**
 * 中断上传
 * @param fileKey 上传返回的文件ID
 * @return 是否成功
 */
boolean stopUpload(String fileKey)

6、取消上传

取消本次上传操作，取消操作会删除本地及服务器上传纪录和服务器上的文件碎片，重新从0开始上传

/**
 * 取消上传
 * @param fileKey 上传返回的文件ID
 * @return 是否成功
 */
boolean abortUpload(String fileKey)

代码演示

public class SampleWithWindow extends JFrame {
	private static final long serialVersionUID = 560684569647135515L;
	// APP_ID 获取地址 http://www.vhallyun.com/console/app/add
	public static final String APP_ID = "d0d7b081";// 微吼APP_ID
	// SECRETKEY 获取地址 
	public static final String SECRET_KEY = "98294813a6d553b2a2dadd8a5375e21f";
	public static final String callbackurl = "http://t.e.vhall.com/api/callback";
	public static final String videoName = "";

	static Callback callback;
	static JLabel fileLabel;
	static JLabel tipsLabel;
	static JProgressBar bar;

	static VhallUploadKit util;
	static File file;
	static String fileKey = "";

	public SampleWithWindow() {
		util = VhallUploadKit.getInstance();
		callback = new Callback();
		callback.setCallbackUrl(callbackurl);
		callback.setCallbackBody("{\\\"mimeType\\\":${mimeType},\\\"size\\\":${size}}");
		callback.setCalbackBodyType(CalbackBodyType.JSON);
	}

	public static void main(String[] args) {

		SampleWithWindow window = new SampleWithWindow();
		window.setTitle("vhall upload kit");
		window.setSize(600, 300);
		window.setResizable(false);
		window.setLocationRelativeTo(null);
		window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		window.setContentPane(initUI());
		window.setVisible(true);

		util.initData(APP_ID, SECRET_KEY);
		if (util.isEnable()) {
			tipsLabel.setText("初始化成功！");
		} else {
			tipsLabel.setText("初始化失败！");
		}

	}

	private static JPanel initUI() {
		final JPanel contentPanel = new JPanel();
		contentPanel.setLayout(new GridLayout(10, 1));
		fileLabel = new JLabel();
		fileLabel.setText("请选择文件！");
		fileLabel.setHorizontalAlignment(SwingConstants.CENTER);
		bar = new JProgressBar();
		bar.setMaximum(100);
		bar.setMinimum(0);
		bar.setValue(0);
		bar.setStringPainted(true);

		JButton selectBtn = new JButton("选择文件");
		selectBtn.addActionListener(new ActionListener() {

			@Override
			public void actionPerformed(ActionEvent e) {
				selectFile(contentPanel);
			}
		});
		JButton uploadBtn = new JButton("上传文件");
		uploadBtn.addActionListener(new ActionListener() {

			@Override
			public void actionPerformed(ActionEvent e) {
				startUpload();
			}
		});
		JButton stopBtn = new JButton("停止上传");
		stopBtn.addActionListener(new ActionListener() {

			@Override
			public void actionPerformed(ActionEvent e) {
				stopUpload();
			}
		});
		JButton cancelBtn = new JButton("取消上传");
		cancelBtn.addActionListener(new ActionListener() {

			@Override
			public void actionPerformed(ActionEvent e) {
				abortUpload();
			}
		});
		tipsLabel = new JLabel();
		tipsLabel.setText("初始化，请稍等...");
		tipsLabel.setHorizontalAlignment(SwingConstants.CENTER);

		contentPanel.add(fileLabel);
		contentPanel.add(new JLabel());
		contentPanel.add(bar);
		contentPanel.add(selectBtn);
		contentPanel.add(uploadBtn);
		contentPanel.add(stopBtn);
		contentPanel.add(cancelBtn);
		contentPanel.add(new JLabel());
		contentPanel.add(tipsLabel);

		return contentPanel;
	}

	/**
	 * 开始上传，请上传前判断下isEnable 是否初始化成功。
	 */
	private static void startUpload() {
		if (file == null) {
			tipsLabel.setText("请先选择文件...");
			return;
		}
		String key = util.uploadAndBuildVideo(file, videoName,null, new PutObjectProgressListener(file.length()));
		if (!TextUtils.isEmpty(key))
			fileKey = key;
	}

	private static void stopUpload() {
		if (file == null) {
			tipsLabel.setText("请先选择文件...");
			return;
		}
		if (TextUtils.isEmpty(fileKey)) {
			tipsLabel.setText("请先上传...");
			return;
		}
		if (util.stopUpload(fileKey))
			tipsLabel.setText("上传已停止...");
	}

	private static void abortUpload() {
		if (file == null) {
			tipsLabel.setText("请先选择文件...");
			return;
		}
		if (TextUtils.isEmpty(fileKey)) {
			tipsLabel.setText("请先上传...");
			return;
		}
		if (util.abortUpload(fileKey)) {
			tipsLabel.setText("上传已取消...");
			fileKey = "";
		}

	}

	/**
	 * 获取上传进度回调
	 */
	static class PutObjectProgressListener implements ProgressListener {

		private long bytesWritten = 0;
		private long totalBytes = -1;
		private boolean succeed = false;
		private long fileLength = 0;

		public PutObjectProgressListener(long fileLength) {
			super();
			this.fileLength = fileLength;
		}

		@Override
		public void progressChanged(ProgressEvent progressEvent) {
			long bytes = progressEvent.getBytes();
			ProgressEventType eventType = progressEvent.getEventType();
			switch (eventType) {
			case TRANSFER_STARTED_EVENT:
				tipsLabel.setText("开始上传...");
				break;
			case REQUEST_CONTENT_LENGTH_EVENT:
				this.totalBytes = bytes;
				this.bytesWritten = fileLength - totalBytes;
				break;
			case REQUEST_BYTE_TRANSFER_EVENT:
				this.bytesWritten += bytes;
				if (this.totalBytes != -1) {
					int percent = (int) (this.bytesWritten * 100.0 / this.fileLength);
					bar.setValue(percent);
					System.out.println(bytes + " bytes have been written at this time, upload progress: " + percent
							+ "%(" + this.bytesWritten + "/" + this.fileLength + ")");
				} else {
					System.out.println(bytes + " bytes have been written at this time, upload ratio: unknown" + "("
							+ this.bytesWritten + "/...)");
				}
				break;

			case TRANSFER_COMPLETED_EVENT:
				this.succeed = true;
//				tipsLabel.setText("上传成功!");
				fileKey = "";
				break;

			case TRANSFER_FAILED_EVENT:
				tipsLabel.setText("上传失败!");
				break;

			default:
				break;
			}
		}

		public boolean isSucceed() {
			return succeed;
		}

		@Override
		public void webinarCreate(String fileKey, String webinarId, String recordId) {
			tipsLabel.setText("上传成功,文件ID：" + fileKey + " 生成录播成功，recordID：" + recordId);
		}
	}

	/**
	 * 请选择要上传的文件
	 */
	private static void selectFile(Component parent) {
		int result = 0;
		JFileChooser fileChooser = new JFileChooser();
		FileSystemView fsv = FileSystemView.getFileSystemView();
		fileChooser.setCurrentDirectory(fsv.getHomeDirectory());
		fileChooser.setDialogTitle("请选择要上传的文件...");
		fileChooser.setApproveButtonText("确定");
		fileChooser.setFileSelectionMode(JFileChooser.FILES_ONLY);
		result = fileChooser.showOpenDialog(parent);
		if (JFileChooser.APPROVE_OPTION == result) {
			file = new File(fileChooser.getSelectedFile().getPath());
			fileLabel.setText("待上传文件：" + file.getAbsolutePath());
			// 停止正在上传的文件
			if (!TextUtils.isEmpty(fileKey))
				stopUpload();
			fileKey = "";
		}
	}

}

如何通过SDK播放视频    

如何通过iOS SDK观看视频    

观看点播准备

  1. 注册微吼开发者账号

  2. 创建应用 获取AppID

  3. 设置应用Bundle ID

  4. 获取 点播ID recordId

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

  5. 获取包含点播权限的access_token

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

工程配置

在开始使用sdk之前，我们要配置好IDE和创建基础的工程代码。相关内容在【工程配置】中有详细说明。

时序图

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

对接流程

1: 引入点播播放器头文件

#import "VHVodPlayer.h"

2: 创建点播播放器

SDK 中的 VHVodPlayer 模块负责实现直播播放功能。

_vodPlayer = [[VHVodPlayer alloc] init];

3: 设置 渲染View、delegate

  • delegate 设置播放器代理
  • 接下来我们要给播放器的视频画面找个地方来显示，iOS系统中使用 view 作为基本的界面渲染单位，所以您只需要准备一个 view 并调整好布局就可以了。
_vodPlayer.delegate = self;
_vodPlayer.view.frame = self.view.bounds;
[self.view insertSubview:_vodPlayer.view atIndex:0];

4: 开始播放

recordId 和 accessToken 参考页首观看点播准备

NSString* recordId = @"xxxxxx";
NSString* accessToken = @"xxxxxxxxxx";
[_vodPlayer startPlay:recordId accessToken:accessToken];

5: 画面调整

_vodPlayer.scalingMode = VHPlayerScalingModeAspectFit;
可选值 含义
VHPlayerScalingModeFill 将图像拉伸填充
VHPlayerScalingModeAspectFit 将图像等比例缩放，适配最长边，缩放后的宽和高都不会超过显示区域，居中显示，画面可能会留有黑边
VHVPlayerScalingModeAspectFill 将图像等比例铺满整个屏幕，多余部分裁剪掉，此模式下画面不会留黑边，但可能因为部分区域被裁剪而显示不全

6: 清晰度切换

_vodPlayer.curDefinition = VHDefinitionOrigin;
可选值 含义
VHDefinitionOrigin 原画
VHDefinitionUHD 超高清
VHDefinitionHD 高清
VHDefinitionSD 标清
VHDefinitionAudio 纯音频

7: 暂停/恢复播放

// 暂停
[_vodPlayer pause];
// 恢复
[_vodPlayer resume];

8: 结束播放

结束当前直播，播放器资源并未释放

[_vodPlayer stopPlay];

9: 销毁播放器

释放播放器资源

[_vodPlayer destroyPlayer];

播放器皮肤

/**
 设置播放器皮肤
 @param skinView 播放器皮肤，继承于VHPlayerSkinView的子类view。
 @discussion 可继承VHPlayerSkinView自定义播放器皮肤，并实现父类的相关方法。也可不使用此方法，完全自定义播放器皮肤并添加到播放器view上。
 */
- (void)setPlayerSkinView:(VHPlayerSkinView *)skinView;

微吼云提供了设置播放器皮肤的Api和播放器皮肤源代码（见Demo），用户可自定义播放器皮肤，也可直接使用系统提供的开源皮肤。只需要设置皮肤到播放器即可实现播放控制等。

事件处理

  • 播放状态监听

SDK 通过 VHVodPlayerDelegate 代理来监听播放器相关的状态和事件

具体 VHVodPlayerDelegate 中方法参考【发起直播参考手册】

状态 含义
VHPlayerStatusLoading 加载中
VHPlayerStatusPlaying 播放中
VHPlayerStatusStop 停止播放
VHPlayerStatusPause 播放暂停

快速集成代码

可以把观看点播代码写到 ViewController.m 的 viewDidLoad 方法中测试观看，代码如下：

//
//  ViewController.m
//  TestProject
//
//  Created by vhall on 2018/3/12.
//  Copyright © 2018年 vhall. All rights reserved.
//

#import "ViewController.h"

#import "VHVodPlayer.h"

@interface ViewController ()<VHVodPlayerDelegate>
@property (nonatomic,strong)VHVodPlayer *vodPlayer;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    //构造并初始化播放器
    _vodPlayer = [[VHVodPlayer alloc] init];
    //设置代理
    _vodPlayer.delegate = self;
    //设置显示区域
    _vodPlayer.view.frame = self.view.bounds;
    //加入显示view
    [self.view insertSubview:_vodPlayer.view atIndex:0];
    
    //开始播放
    NSString* recordId      = @"xxxxxxxxxx";//recordId 获得方式 参考页面开始处
    NSString* accessToken   = @"xxxxxxxxxx";//accessToken 获得方式 参考页面开始处
    [_vodPlayer startPlay:recordId accessToken:accessToken];
}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)viewDidLayoutSubviews
{
    //刷新播放器画面位置
    _vodPlayer.view.frame = self.view.bounds;
}

#pragma mark - VHVodPlayerDelegate
/**
 *  错误回调
 *  @param player   播放器实例
 *  @param error    错误
 */
- (void)player:(VHVodPlayer *)player stoppedWithError:(NSError *)error
{
    NSLog(@"错误： %@",error );
}

@end

其他相关文档

  1. 快速开始
  2. 观看点播参考手册
如何通过Android SDK观看视频    

观看点播准备

  1. 注册微吼开发者账号

  2. 创建应用 获取AppID

  3. 设置应用包名、签名

  4. 获取 点播ID recordId

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

  5. 获取包含点播权限的access_token

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

工程配置

在开始使用sdk之前，我们要配置好IDE和创建基础的工程代码。相关内容在【工程配置】中有详细说明。

时序图

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

播放器渲染View--VodPlayerView

1 构造方法

/**
 * 获取View的布局方式，需要现在XML中定义
 */
mSurfaceView = this.findViewById(R.id.surfaceview);
/**
 * XML中定义，代码展示
 */
<com.vhall.player.vod.VodPlayerView
	android:id="@+id/surfaceview"
	android:layout_width="match_parent"
	android:layout_height="match_parent"/>

2 方法说明

    /**
     * 设置水印
     *
     * @param drawable
     */
    public void setWaterMark(Drawable drawable){}
    /**
     * 设置水印的相对位置
     *
     * @param gravity Gravity.LEFT
     */
	 public void setWaterMarkGravity(int gravity) {}
    /**
     * 获取截图
     * @return
     */
    public Bitmap getBitmap() {}
	/**
	* 设置清晰度
	* Constants.VideoMode.DRAW_MODE_NONE  默认，铺满全屏
	* Constants.VideoMode.DRAW_MODE_ASPECTFIT    等比缩放居中;
	* Constants.VideoMode.DRAW_MODE_ASPECTFILL   等比拉伸居中;
	*/
	public void setDrawMode(int mode){}

对接流程

1.1 创建 VHVodPlayer

VHVodPlayer 是SDK中负责点播的模块，需要传入上下文，和视频渲染的View，也就是播放画面的View，SDK使用的是系统自带的SurfaceView或者VodPlayerView，将创建的Surface的实例传入VHVodPlayer即可创建。

/**
 * 获取View的布局方式，需要现在XML中定义
 * @Param Context 上下文
 * @Param SurfaceView surfaceView的实例
 */
VHVodPlayer mPlayer = new VHVodPlayer(this);
mPlayer.setDisplay(mSurfaceView);

/**
 * 添加监听事件
 * 具体参考本文 事件监听
 */
mPlayer.setListener(new MyPlayer());

2 创建 VHDocument （如果没有文档可以忽略）

如果需要文档服务，请参考文档 【OPS-SDK集成】

3 开始观看

 /**
 * 观看录播，传递在观看点播时配置的recordId (点播ID)和AccessToken;
 * @param String recordId ; // 点播ID   通过 API 调用获取
 * @param String accessToken; // 发起的Token  通过 API 调用获取
 */
public void start(String recordId  , String accessToken);

4 设置观看清晰度

从 IVHLivePlayer.EVENT_DPI_LIST 获取当前地址可用的分辨率，确定可用的情况下在切换

清晰度 描述
IVHLivePlayer.DPI_SD 低清
IVHLivePlayer.DPI_HD 高清
IVHLivePlayer.DPI_XHD 超清
IVHLivePlayer.DPI_AUDIO 纯音频
IVHLivePlayer.DPI_SAME 原画 
/**
 * 在设置清晰度时，需要先获取当前的视频可用的分辨率，确认可用的时在调用。
 * @param int dpi 定义的清晰度
 */
public void.setDPI(dpi);

5 暂停观看/ 恢复观看

停止拉流，而云端的视频源还在不断地更新着 ， 当重新恢复时，会从最新的时间点播放

/**
 * 暂停观看/ 恢复观看
 */
public void pause();
public void resume();

6 控制播放相关API

/**
 * 获取观看时长 （毫秒）
 */
public long getDuration();
/**
 * 获取当前进度 （毫秒）
 */
public long getPosition();
/**
 * Seek操作，通常配合SeekBai进行操作，
 * @param position 跳转到position的位置播放
 */
public void seek(long position);

7 结束观看

/**
 * 结束观看
 */
public void stop();

8 销毁

销毁播放器的实例

/**
 * 销毁播放器并释放相关的资源。
 */
public void release();

事件处理

事件监听 描述
VHVodPlayer.EVENT_STATUS_STARTING 正在运行
VHVodPlayer.EVENT_STATUS_STARTED 开始播放
VHVodPlayer.EVENT_STATUS_STOPED 停止播放
VHVodPlayer.EVENT_STATUS_END 播放结束
VHVodPlayer.EVENT_VIDEO_SIZE_CHANGED 视频的宽高发生改变
IVHLivePlayer.EVENT_DPI_LIST 可以的清晰度
IVHLivePlayer.EVENT_DPI_CHANGED 清晰度发生改变 
class MyPlayer implements VHPlayerListener {
        @Override
        public void onEvent(int event, String msg) {
            switch (event) {
                case VHVodPlayer.EVENT_STATUS_STARTING:
                    break;
                case VHVodPlayer.EVENT_STATUS_STARTED:
                    break;
                case VHVodPlayer.EVENT_STATUS_STOPED:
                    break;
                case VHVodPlayer.EVENT_STATUS_END:
                    break;
                case VHVodPlayer.EVENT_STATUS_WH:
                    break;
            }
        }

        @Override
        public void onError(int errorCode, String msg) {
        }
    }

示例代码:

public class VodPlayerActivity extends Activity {
    private static final String TAG = "LivePlayerActivity";
    private String roomId = "7a97e8c7";
    private String accessToken = "vhall";
    private SurfaceView mSurfaceView;
    private VHVodPlayer mPlayer;
    private boolean mPlaying = false;
    ImageView mPlayBtn;
    ProgressBar mLoadingPB;
    SeekBar mSeekbar;
    TextView mPosView, mMaxView;

    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            if (mPlaying) {
                int pos = (int) mPlayer.getPosition();
                mSeekbar.setProgress(pos);
                mPosView.setText(String.valueOf(pos));
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        roomId = getIntent().getStringExtra("roomid");
        accessToken = getIntent().getStringExtra("token");
        setContentView(R.layout.vod_layout);
        mPlayBtn = (ImageView) this.findViewById(R.id.btn_play);
        mLoadingPB = (ProgressBar) this.findViewById(R.id.pb_loading);
        mSeekbar = (SeekBar) this.findViewById(R.id.seekbar);
        mSurfaceView = (SurfaceView) this.findViewById(R.id.surfaceview);
        mPosView = (TextView) this.findViewById(R.id.tv_pos);
        mMaxView = (TextView) this.findViewById(R.id.tv_max);
        mPlayer = new VHVodPlayer(this, mSurfaceView);
        mPlayer.addListener(new MyPlayer());
        mSeekbar.setOnSeekBarChangeListener(new MySeekbarListener());
        handlePosition();
    }

    @Override
    protected void onPause() {
        super.onPause();
        if (mPlayer != null && mPlaying)
            mPlayer.pause();
    }

    @Override
    protected void onResume() {
        super.onResume();
        if (mPlayer != null && mPlayer.resumeAble()) {
            mPlayer.resume();
        }
    }


    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (mPlayer != null)
            mPlayer.release();
        if (timer != null) {
            timer.cancel();
            timer = null;
        }
    }

    public void play(View view) {
        if (mPlaying) {
            mPlayer.pause();
        } else {
            if (mPlayer.resumeAble())
                mPlayer.resume();
            else
                mPlayer.start(roomId, accessToken);
        }
    }

    class MyPlayer implements VHPlayerListener {

        @Override
        public void onEvent(int event, String msg) {
            switch (event) {
                case VHVodPlayer.EVENT_STATUS_STARTING:
                    mLoadingPB.setVisibility(View.VISIBLE);
                    break;
                case VHVodPlayer.EVENT_STATUS_STARTED:
                    int max = (int) mPlayer.getDuration();
                    mSeekbar.setMax(max);
                    mMaxView.setText(String.valueOf(max));
                    mLoadingPB.setVisibility(View.GONE);
                    mPlaying = true;
                    mPlayBtn.setImageResource(R.mipmap.icon_pause_bro);
                    break;
                case VHVodPlayer.EVENT_STATUS_STOPED:
                    mPlaying = false;
                    mPlayBtn.setImageResource(R.mipmap.icon_start_bro);
                    mLoadingPB.setVisibility(View.GONE);
                    break;
                case VHVodPlayer.EVENT_STATUS_END:
                    mPlaying = false;
                    mPlayBtn.setImageResource(R.mipmap.icon_start_bro);
                    mLoadingPB.setVisibility(View.GONE);
                    break;
                case VHVodPlayer.EVENT_STATUS_WH:
                    break;
            }
        }

        @Override
        public void onError(int errorCode, String msg) {
            mPlaying = false;
            mPlayBtn.setImageResource(R.mipmap.icon_start_bro);
            mLoadingPB.setVisibility(View.GONE);
            Toast.makeText(VodPlayerActivity.this, msg, Toast.LENGTH_SHORT).show();
        }
    }

    class MySeekbarListener implements SeekBar.OnSeekBarChangeListener {

        @Override
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
            mPosView.setText(String.valueOf(seekBar.getProgress()));
        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {

        }

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {
            mPlayer.seek(seekBar.getProgress());
        }
    }
    //每秒获取一下进度
    Timer timer;

    private void handlePosition() {
        if (timer != null)
            return;
        timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                handler.sendEmptyMessage(0);
            }
        }, 1000, 1000);
    }
}

其他相关文档

  1. 快速开始
  2. 观看点播参考手册
如何通过JS SDK观看视频    

使用微吼云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. 观看点播参考手册
JS SDK 集成    

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

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

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

一.观看准备

  1. 注册微吼开发者账号

  2. 创建应用 获取AppID

  3. 创建直播间 获取roomId

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

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

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

时序图

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

二.引入sdk文件

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

<script src="vhall-jssdk-player-VERSION.js"></script>
<script src="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.初始化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。

JS SDK 使用    
  • 播放器SDK主要分为： 实例创建与销毁、实例事件监听、实例接口使用、全局定义，四大部分。

播放器实例

  • 此SDK可支持创建多个实例，每一个实例对应一个播放器实例。

创建实例

// 创建实例参数
var opt = {
	appId:'', // 应用ID   必填
	accountId: '', // 第三方用户ID     必填
	token:'', // access_token  必填
	type:'', // live 直播  vod 点播  必填
	videoNode:'videoNode', // 播放器的容器
	poster:"http://xxx.jpg", // 封面地址
	liveOption:{
		type:'hls'    // 直播播放类型   hls | flv
		roomId:'', // 直播房间ID  必填
	},
	vodOption:{
		recordId:'' // 回放 ID
	}
}
// 成功回调
var vhallplayer;
var success = function(event){
	// 实例句柄
	vhallplayer = event.vhallplayer;
};
// 失败回调
var failure = function(event){
	console.log(event);
}
// 创建实例
VhallPlayer.createInstance(opt, success, failure);
  • videoNode为Dom容器的id
  • type为live时则使用liveOption，反之则使用vodOption
  • VhallPlayer 为SDK全局句柄
  • vhallplayer 为当前传入播放器实例句柄，故以下所有操作均必须在成功回调后执行。

销毁实例

vhallplayer.destroy();    // 销毁当前实例

实例事件监听

  • 在调用实例接口前，建议全部监听以下事件

事件监听

vhallplayer.on(event , handler);   // 事件监听

实例接口使用

  • 由于播放器内核原因，接口的成功或失败采用事件监听模式来判断。
  • 接口中的failure回调为参数校验

设置循环状态（仅点播可用）

var isLoop = true; // true 为循环    false 为非循环
// 失败回调
var failure = function(event){
	console.log(event);
};
vhallplayer.setLoop(isLoop  , failure); // 设置循环状态

获取循环状态（仅点播可用）

// 失败回调
var failure = function(event){
	console.log(event);
};
vhallplayer.getLoop(); // true 为循环状态   false为非循环状态

获取当前视频总时长（仅点播可用）

// 失败回调
var failure = function (event) {
  console.log(event);
};
vhallplayer.getDuration(failure);

获取当前视频播放时间（仅点播可用）

// 失败回调
var failure = function (event) {
  console.log(event);
};
vhallplayer.getCurrentTime(failure);

设置当前播放时间（仅点播可用）

var time = 0;   // 秒
// 失败回调
var failure = function (event) {
  console.log(event);
};
vhallplayer.setCurrentTime(time , failure);

设置seek限制（仅点播可用）

var opt = {
	enable:true,  // true为开启seek限制 ， false为关闭seek限制
	maxTime:60   // seek最大值 number类型
};
var failure - function(event){
	console.log(event);
};
vhallplayer.setLimitSeek(opt , failure);

获取当前seek限制信息（仅点播可用）

var failure = function(event){
	console.log(event);
};
vhallplayer.getLimitSeek(failure);

获取当前可选倍速（仅点播可用）

vhallplayer.getUsableSpeed();  // 可选倍速列表

设置倍速播放（仅点播可用）

var list = vhallplayer.getUsableSpeed();  // 可选倍速列表
// 失败回调
var failure = function(event){
	console.log(event);
};
vhallplayer.setPlaySpeed(list[0] , failure);

  • 该方法参数只能为倍速列表已存在的一项

播放

vhallplayer.play();   // 播放

暂停

vhallplayer.pause();   // 暂停

获取当前暂停状态

vhallplayer.getIsPause();   // true 为暂停状态    false为播放状态

获取视频清晰度列表

vhallplayer.getQualitys();    // 获取视频清晰度列表
  • 该接口返回当前可用的视频清晰度列表。

获取当前视频清晰度

vhallplayer.getCurrentQuality();    // 获取当前视频清晰度

设置当前视频清晰度

var qualityList = vhallplayer.getQualitys();   // 获取清晰度列表
// 失败回调
var failure = function(event){
	console.log(event);
};
vhallplayer.setQuality(qualityList[0] , failure);  // 设置当前视频清晰度

  • 传入的清晰度应为清晰度列表中的一项。

进入全屏

// 失败回调
var failure = function(event){
	console.log(event);
};
vhallplayer.enterFullScreen(failure );   // 进入全屏

退出全屏

// 失败回调
var failure = function(event){
	console.log(event);
};
vhallplayer.exitFullScreen(failure);  // 退出全屏

获取当前是否是全屏

vhallplayer.isFullScreen();   // true为全屏状态   false为非全屏状态

设置静音

var isMute = true;  // true为静音  false为取消静音
// 失败回调
var failure = function(event){
	console.log(event);
};
vhallplayer.setMute(isMute , failure);   // 设置静音

获取音量

vhallplayer.getVolume(); // 0~100

设置音量

var volume = 50;   // 音量 0~100
// 失败回调
var failure = function (event) {
  console.log(event);
};
vhallplayer.setVolume(volume , failure );

获取当前网络状态

vhallplayer.getNetworkState();  //  获取当前网络状态
  • 0为 音频/视频尚未初始化
  • 1为 音频/视频是活动的且已选取资源，但并未使用网络
  • 2为 浏览器正在下载数据
  • 3为 未找到音频/视频来源

视频截图

var imgBase64Data = vhallplayer.videoScreenshot(); // 视频截图
  • 截图后生成Base64

全局定义

播放器事件参考表

可选值 事件 备注
VhallPlayer.CURRENTTIME_CHANGE 当前时间改变 点播当前播放时间被改变时触发
VhallPlayer.LOOP_CHANGE 循环状态改变 点播循环状态被改变时触发
VhallPlayer.MUTE_CHANGE 静音状态改变 静音状态被改变时触发
VhallPlayer.RATE_CHANGE 倍速改变 倍速被改变时触发
VhallPlayer.VOLUME_CHANGE 声音改变 声音被改变时触发
VhallPlayer.FULLSCREEN_CHANGE 全屏状态改变 全屏状态改变时触发
VhallPlayer.DEFINITION_CHANGE 当前清晰度改变 当前清晰度改变时触发(卡顿时自动切清晰度触发，手动切换不触发)
VhallPlayer.LAG_REPORT 卡顿 视频卡顿时触发
VhallPlayer.LAG_RECOVER 卡顿恢复 视频卡顿恢复时触发
VhallPlayer.PALY 开始播放 点播开始播放时触发
VhallPlayer.PAUSE 暂停 点播暂停时触发
VhallPlayer.PROGRESS 视频加载中 点播视频加载中时触发
VhallPlayer.LOADED 视频加载完成 点播视频加载完成时触发
VhallPlayer.ERROR 播放器出错 播放器自身出现错误时触发
VhallPlayer.ENDED 播放完毕 点播视频播放完毕时触发
VhallPlayer.OPEN_BARRAGE 开启弹幕 开启弹幕时触发
VhallPlayer.CLOSE_BARRAGE 关闭弹幕 关闭弹幕时触发
VhallPlayer.CLEAR_BARRAGE 清空弹幕 清空弹幕时触发
VhallPlayer.TIMEUPDATE 播放时间改变 播放时间改变时触发

错误码

code message
611000 初始化播放器失败
611001 无效的参数
611002 服务器返回错误
611004 此方法仅点播可用
611005 进入全屏失败
611006 退出全屏失败
611008 appId不存在
611009 roomId不存在
611010 token不存在
611011 recordId不存在
JS SDK v1.0集成(旧版)    

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

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

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

一.观看准备

  1. 注册微吼开发者账号

  2. 创建应用 获取AppID

  3. 创建直播间 获取roomId

    可以通过 【测试工具】 或 【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:// 开头)才能正常调试。

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。

Demo使用指南    
点播上传    
JAVA Demo    

1 下载地址

https://github.com/vhall/VhalluploadkitForPaas

2 初始化Demo

参考初始化教程

3 上传

使用Demo进行点播上传，点击选择文件选择需要上传的文件，点击上传文件，文件上传成功。

上传点播文件格式支持（视频：RMVB、MP4、AVI、WMV、MKV、FLV、MOV；音频：MP3、WAV），文件大小在5G内

JS Demo    

1 演示地址

https://static.vhallyun.com/demand-upload-jssdk-vhallcloud/dist/1.0.0/index.html?appID=appID&secretKey=secretKey

地址中需传入app_id和secret_key

2 上传点播

选择需要上传的视频文件，点击保存，视频文件上传成功。

点播观看    
iOS Demo    

1 下载地址

https://github.com/vhall/VHYun_SDK_iOS

2 填写app_id

进入iOS SDK Demo，弹出输入app_id对话框，对话框中填写应用管理页面获取到的app_id。

3 设置

点击设置，进入设置页面，可进行基础设置和点播设置

基础设置：填写第三方用户ID(是开发者自有用户系统里用户的唯一标识)，详情参考：第三方用户ID（third_party_user_id）是什么？

点播设置：填写获取的record_id（点播ID）和access_token值

4 观看点播

设置完成，选择观看点播，即可进行点播观看

Android Demo    

1 下载地址

https://github.com/vhall/VHYun_SDK_Android

2 填写app_id和用户ID

进入Android SDK Demo，页面中输入控制台应用管理中获取的app_id和用户ID（是开发者自有用户系统里用户的唯一标识），详情参考：第三方用户ID（third_party_user_id）是什么？，填写完毕点击进入，进入操作页面

3 填写互动直播房间ID和access_token

3 观看点播

操作页面中填写通过控制台、接口或API在线测试工具获取到的record_id和通过接口获取到的access_token值，点击看点播即可观看点播

JS Demo    

1 演示地址

https://static.vhallyun.com/jssdk/vhall-jssdk-live/test/player_new.html

2 接口配置

接口配置页面依次输入上述方法中获得的app_id（应用ID）、room_id（直播房间ID）、accountId（第三方用户ID：开发者自有用户系统里用户的唯一标识）,详情参考：第三方用户ID（third_party_user_id）是什么？、token（access_token），点击初始化播放器，跳转至观看页面。

初始化观看

  • poster为播放器的封面图链接
  • type可切换为观看点播或直播
  • 点播需要传入recordId

3 观看

进入观看页面即可观看直播或点播

观看中

服务定价    

1、计费类型及说明

微吼云点播服务采用后付费方式，即使用服务后扣费的计费方式。您需要先在微吼云账户预先充值，系统会按照不同的功能实时或按天从您的账户余额中扣除实际消费产生的金额。

2、计费方式说明

您可以通过控制台查看微吼云点播服务的实际使用量，具体计费方式如下。

计费项 计费方式 付费方式
点播存储 按存储容量 后付费
点播流量 按下行流量 后付费
点播转码 按时长 后付费
点播下载 按下载流量 后付费

2.1 点播存储

计费规则

根据实际使用量收费，统计每天使用的存储空间（包含直播录制的视频文件、上传到微吼云点播服务的视频文件和转码后的视频文件占用的存储空间）量值为当天的计费值。统计一天内使用的存储空间，按照实际使用的存储空间乘以单价计费。

计费项 价格（元/G/天） 付费方式
点播存储 0.02 后付费

计费周期

按天扣费，按天出消费明细，按自然月出账单。每个月的账单会在次月1号生成。

计费公式：

存储空间（G/天） * 存储单价（元/G/天）

计费示例

当天使用的存储空间为100G，则收费为100*0.02=2元

计费说明

1.计费项为当天使用的点播存储空间。

2.按天进行扣费，请确保账户余额充足，以免影响您的业务。

2.2 点播流量

计费规则

统计观看产生的全网下行流量，实时进行扣费，按照实时消耗的流量乘以单价计费。

计费项 价格（元/G） 付费方式
点播流量 1.5 后付费

计费周期

实时扣费，按小时出消费明细，按自然月出账单。每个月的账单会在次月1号生成。

计费公式：

点播流量（G） * 流量单价（元/G）

计费示例

当天使用的流量为100G，则收费为100*1.5=150元

流量消耗示例：

点播流量消耗=（点播码率/8）*点播时长（秒）*观看人数

例如：点播码率为500kbps，观看人数为100人，点播时长为30分钟，则消耗的流量约为：11.25G。

计算方法： （500/8）*30*60*100=11250000K

11250000/1000/1000=11.25G

计算流量为观看点播过程中人数不发生变化的情况，点播过程中存在人员进入离开的情况，具体数据参考数据统计。

计费说明

1.计费点为观看过程中实际消耗的流量。

2.实时进行扣费，请确保账户余额充足，以免影响您的业务。

2.3 点播转码

计费规则

完成一个点播文件的转码后进行扣费，按照转码的时长乘以单价计费，时长精确到分钟，不足一分钟的不计入计费。

计费项 价格（元/分钟） 计费方式
转码时长 0.08 后付费
  • 注意：多码率场景下，您可以添加多条线路（2~3条），例如其中有N条线路涉及转码计费，则价格为N*0.08元/分钟。

计费周期

完成一个点播文件的转码后进行扣费，按小时出消费明细，按自然月出账单。每个月的账单会在次月1号生成。

计费公式：

转码时长（分钟） * 转码单价（元/分钟）

*注：转码时长等于点播时长

计费示例

当转码时长为100分钟，则收费为100*0.08=8元

  • 有N路转码流点播：总时长 = 所有点播的转码时长之和。

计费说明

1.功能默认关闭，可在微吼云控制台手动开启。

2.使用转码功能会相应的收取转码费用。

3.完成一个点播文件的转码后进行扣费，请确保账户余额充足，以免影响您的业务

2.4 点播下载

计费规则

统计下载产生的流量，实时进行扣费，按照实时消耗的流量乘以单价计费。

计费项 价格（元/G） 付费方式
点播下载流量 1.5 后付费

计费周期

实时扣费，按小时出消费明细，按自然月出账单。每个月的账单会在次月1号生成。

计费公式：

点播流量（G） * 流量单价（元/G）

计费示例

当天使用的下载流量为100G，则收费为100*1.5=150元

计费说明

1.计费点为下载实际消耗的流量。

2.实时进行扣费，请确保账户余额充足，以免影响您的业务。

3、欠费说明

1.欠费后工作人员会与您进行联系，如还未进行充值，将会停掉您的服务。

2.开通策略：账户充值余额为正后则会自动开通服务。

常见问题    
使用问题    

1、如何开通点播服务？

创建应用后，点击添加服务，弹出添加服务对话框，选择点播服务，点击确定，点播服务添加成功。

添加服务

2、如何上传点播文件？

登录控制台直接上传：适用于少量视频文件，且视频较小。

通过服务端进行上传： Java SDK，在服务器端上传。

通过网页端进行上传：JS SDK，可以通过网页直接上传。

3、点播文件支持格式？

上传视频：RMVB、MP4、AVI、WMV、MKV、FLV、MOV

上传音频：MP3、WAV

4、对上传视频文件的大小及上传速度有限制吗？

对视频上传速度没有限制，对视频大小有限制，上传视频文件不超过5GB。

5、视频上传成功后的转码操作是自动执行的吗？

是的，上传成功后，按照预设置的转码配置，自动进行转码。

6、录制下来的视频文件如何进行转码？

直播录制下来的视频不会自动转码，如果需要转码，可通过接口对指定的录制文件进行转码。

接口详情：http://www.vhallyun.com/document/detail/index?project_id=40&doc_id=1034。

7、转码规格如何规定的？

可以选择原画输出，也可以按照系统提供720P、480P、360P、音频几种转码规格进行转码设置。

转码设置 分辨率 码率 格式
720P 720P 650kb --
480P 480P 450kb --
360P 360P 330kb --
音频 -- 原码率 AAC

8、上传后多久可以发布成功？

上传完成后，会自动进行转码，转码时间与视频时长、码率、源视频是否标准等因素相关，因此每个视频转码时间略有差异，您可以根据实际情况，上传测试视频进行试验。

9、如何得知转码完成并发布成功？

可以在控制台设置回调地址，每个视频发布成功时，会将消息通知到回调地址中。

10、如何下载点播文件？

通过控制台/接口进行点播文件下载，可下载某个码率的视频文件，也可进行文件批量下载。下载需要先进行下载地址生成，地址生成后可进行下载，下载地址有效期为7天，过期后需重新请求生成下载地址。

11、如何获取视频播放地址？

目前只可通过控制台预览，以及集成JS SDK、Android SDK、iOS SDK的方式进行观看。

12、如何保障视频观看的安全性？

为确保观看安全，提供观看直播权限的access_token，在SDK集成时需要进行token验证，SDK将按您赋予的权限进行相关的权限验证，可设置access_token的有效期，有效期最长为1天，最小为1秒。

token生成可通过API在线测试工具，也可通过接口的方式。

13、支持哪些播放统计？

支持流量空间和点播视频：看分析方面的数据统计，具体数据信息可登录控制台进行查看：http://www.vhallyun.com/console/app/index

计费问题    

1、如何购买点播服务？

使用微吼云平台服务，需要预先在账户进行充值，账户中心中点击充值，输入充值金额，点击提交，订单完成后完成充值，或者联系您的客户经理。

账户充值链接：http://www.vhallyun.com/console/financing/index

2、点播服务的计费方式？

点播服务采用后付费的计费方式，计费项包含点播存储、点播流量、点播转码、点播下载几项。

具体的服务定价规则查看：http://www.vhallyun.com/document/detail/index?project_id=37&doc_id=887

3、账户余额不足时会进行提醒吗？

用户可在账户中心设置余额提醒，默认为0，低于设置的余额时会通过短信的方式对用户进行提醒，及时充值，确保服务的顺利使用。

4、欠费后会立刻停止服务吗？

欠费后工作人员会与您进行联系，如还未进行充值，将会停掉您的服务。 开通策略：账户充值余额为正后则会自动开通服务。