如何通过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. 点播上传参考手册