前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >腾讯云服务视频,腾讯云点播的视频上传和转码功能

腾讯云服务视频,腾讯云点播的视频上传和转码功能

原创
作者头像
用户6592874
修改2019-10-30 10:45:34
34.2K0
修改2019-10-30 10:45:34
举报
文章被收录于专栏:云点播的视频上传和转码功能

有些用户烦恼腾讯云储存上传大文件的各种不方便,比如不能转码(要转码得先把mp4文件从云存储上下载下来,然后通过服务器执行ffmpeg操作,最后再把切割的ts文件上传到腾讯云,过程复杂且容易出错),不能获取实时的上传进度等等,所以就发现腾讯云点播这项技术。相对来说通过腾讯云点播既能实现上传进度的获取,而且还能上传完成后自动转码,比如自动把mp4转换为m3u8格式的清单文件来进行分片加载,这样子既能大大加快加载速度,还能保护视频链接的url,所以就记录一下这种技术的使用原理。

  云点播视频上传Js端的sdk如下http://video.qcloud.com/sdk/upload.html,现在的官方sdk页面做的比较挫,希望腾讯云以后能改进,毕竟寻找一个方法还要点击“查看网页源代码”让人感觉很方。

  首先在html头部引入云点播的js,

代码语言:txt
复制
<script src="http://qzonestyle.gtimg.cn/open/qcloud/js/vod/sdk/uploaderh5.js" charset="utf-8"></script>

然后在页面写上一个button因为云点播是通过绑定一个button的方法来实现input type='file':

代码语言:txt
复制
<button class="btn btn-default" id="video">选择文件</button>

页面长成这个样子

 接着在js里定义一个初始化云点播上传条件的方法initUpload(),绑定后只要在页面上拉取了文件,每隔1s腾讯服务器就会给你一个回调,你可以根据回调里不同的返回码来写上自己的处理方法。另外,当你在页面选择好一个文件后,js代码会去计算其SHA值,在计算完后才能调用qcVideo.uploader.startUpload()进行上传操作,否则会报错。在上传完成后云点播会返回一个已上传文件在腾讯服务器上的唯一标识args.serverFileId,其实现代码如下:

//初始化直播上传

function initUpload()

{

代码语言:txt
复制
//检测浏览器是否支持
代码语言:txt
复制
var $ = qcVideo.get('$');
代码语言:txt
复制
var Version = qcVideo.get('Version');
代码语言:txt
复制
if( !qcVideo.uploader.supportBrowser() )
代码语言:txt
复制
{
代码语言:txt
复制
    if(Version.IS\_MOBILE)
代码语言:txt
复制
    {
代码语言:txt
复制
        alert('当前浏览器不支持上传,请升级系统版本或者下载最新的chrome浏览器');
代码语言:txt
复制
    }
代码语言:txt
复制
    else
代码语言:txt
复制
    {
代码语言:txt
复制
        alert('当前浏览器不支持上传,请升级浏览器或者下载最新的chrome浏览器');
代码语言:txt
复制
    }
代码语言:txt
复制
    return;
代码语言:txt
复制
}
代码语言:txt
复制
//绑定按钮及回调处理
代码语言:txt
复制
accountDone('video',‘你的云点播secretId’,1,1,'你的转码成功后得回调url',null);

}

/**

*

* @param upBtnId 上传按钮ID

* @param secretId 云api secretId

* @param isTranscode 是否转码

* @param isWatermark 是否设置水印

* @param transcodeNotifyUrl 转码成功后的回调

* @param classId 分类ID

*/

function accountDone(upBtnId,secretId, isTranscode, isWatermark,transcodeNotifyUrl,classId)

{

代码语言:txt
复制
var $ = qcVideo.get('$'),
代码语言:txt
复制
ErrorCode = qcVideo.get('ErrorCode'),
代码语言:txt
复制
Log = qcVideo.get('Log'),
代码语言:txt
复制
JSON = qcVideo.get('JSON'),
代码语言:txt
复制
util = qcVideo.get('util'),
代码语言:txt
复制
Code = qcVideo.get('Code'),
代码语言:txt
复制
Version = qcVideo.get('Version');
代码语言:txt
复制
qcVideo.uploader.init(
代码语言:txt
复制
    {
代码语言:txt
复制
        web\_upload\_url: 'http://vod.qcloud.com/v2/index.php',
代码语言:txt
复制
        secretId: secretId, // 云api secretId
代码语言:txt
复制
        getSignature: function (argStr, done)
代码语言:txt
复制
        {//注意:出于安全考虑, 服务端接收argStr这个参数后,需要校验其中的Action参数是否为 "MultipartUploadVodFile",用来证明该参数标识上传请求
代码语言:txt
复制
            $.ajax({
代码语言:txt
复制
                'dataType': 'json',
代码语言:txt
复制
                'url': '你的签名路径' + encodeURIComponent(argStr),
代码语言:txt
复制
                'success': function (d)
代码语言:txt
复制
                {
代码语言:txt
复制
                    done(d['result']);
代码语言:txt
复制
                }
代码语言:txt
复制
            });
代码语言:txt
复制
        },
代码语言:txt
复制
        upBtnId: upBtnId, //上传按钮ID(任意页面元素ID)
代码语言:txt
复制
        isTranscode: isTranscode,//是否转码
代码语言:txt
复制
        isWatermark: isWatermark,//是否设置水印
代码语言:txt
复制
        after\_sha\_start\_upload: false,//sha计算完成后,开始上传 (默认关闭立即上传)
代码语言:txt
复制
        sha1js\_path: '/calculator\_worker\_sha1.js', //计算sha1的位置
代码语言:txt
复制
        disable\_multi\_selection: false, //禁用多选 ,默认为false
代码语言:txt
复制
        transcodeNotifyUrl: transcodeNotifyUrl,//(转码成功后的回调地址)isTranscode==true,时开启; 回调url的返回数据格式参考  http://www.qcloud.com/wiki/v2/MultipartUploadVodFile
代码语言:txt
复制
        classId: classId,
代码语言:txt
复制
        // mime\_types, 默认是常用的视频和音频文件扩展名,如MP4, MKV, MP3等, video\_only 默认为false,可允许音频文件上传
代码语言:txt
复制
        filters: {max\_file\_size: '8gb', mime\_types: [], video\_only: true}
代码语言:txt
复制
    }
代码语言:txt
复制
    //2: 回调
代码语言:txt
复制
    , {
代码语言:txt
复制
        /\*\*
代码语言:txt
复制
         \* 更新文件状态和进度 code:1、准备计算SHA 2、计算完SHA,准备上传 3、SHA计算中 4、即将上传 5、上传进度更新 6、上传完成
代码语言:txt
复制
         \* @param args { id: 文件ID, size: 文件大小, name: 文件名称, status: 状态, percent: 进度 speed: 速度, errorCode: 错误码,serverFileId: 后端文件ID }
代码语言:txt
复制
         \*/
代码语言:txt
复制
        onFileUpdate: function (args)
代码语言:txt
复制
        {
代码语言:txt
复制
            if(args.code == 1 || args.code == 3)//计算SHA中
代码语言:txt
复制
            {
代码语言:txt
复制
                //你的逻辑,比如显示文件名等信息
代码语言:txt
复制
            }
代码语言:txt
复制
            else if(args.code == 2) //计算完SHA
代码语言:txt
复制
            {
代码语言:txt
复制
                //计算完SHA值,准备开始上传,这步执行完之后才能执行qcVideo.uploader.startUpload()即上传操作
代码语言:txt
复制
            } 
代码语言:txt
复制
            elseif(args.code == 5 )//上传中 
代码语言:txt
复制
            {
代码语言:txt
复制
                //获取实时进度 
代码语言:txt
复制
                var percent=args.percent+'%'; 
代码语言:txt
复制
                $(".progress-bar").css({'width':percent}); 
代码语言:txt
复制
            } 
代码语言:txt
复制
            elseif(args.code == 6 )//上传完成 
代码语言:txt
复制
            { 
代码语言:txt
复制
                $(".progress-bar").css({'width':'100%'}); //取得回调的视频serverFileId,用于后面更新字段用 
代码语言:txt
复制
                var file\_id=args.serverFileId; console.log(params); 
代码语言:txt
复制
             } 
代码语言:txt
复制
         }, 
代码语言:txt
复制
     /\*\* \* 文件状态发生变化,暂时不用 \* @param info { done: 完成数量 , fail: 失败数量 , sha: 计算SHA或者等待计算SHA中的数量 , wait: 等待上传数量 , uploading: 上传中的数量 } \*/ 
代码语言:txt
复制
     onFileStatus: function (info) 
代码语言:txt
复制
     { 
代码语言:txt
复制
         $('#count').text('各状态总数-->' + JSON.stringify(info)); 
代码语言:txt
复制
     }, 
代码语言:txt
复制
     /\*\* \* 上传时错误文件过滤提示,暂时不用 \* @param args {code:{-1: 文件类型异常,-2: 文件名异常} , message: 错误原因 , solution: 解决方法} \*/ 
代码语言:txt
复制
     onFilterError: function (args) 
代码语言:txt
复制
     {
代码语言:txt
复制
         var msg = 'message:' + args.message + (args.solution ? (';solution==' + args.solution) : ''); console.log(msg); 
代码语言:txt
复制
     } 
代码语言:txt
复制
  } ); 

}

在文件上传完成后如果选择了转码,腾讯云点播会去对文件转码,并在成功后给你设置的回调url发请求,根据回调里的$_POST'file_id'来更新DB为转码完成即可。

  js端说完了,现在来看php端,要通过后台向云点播发请求相对来说比较复杂,首先你要定义一个方法,方法可从官网上找到实例:

https://www.qcloud.com/doc/api/257/1976,简易修改后方法如下:

public function CreateRequest($HttpUrl, $HttpMethod, $COMMON_PARAMS, $secretKey, $PRIVATE_PARAMS, $isHttps)

代码语言:txt
复制
{
代码语言:txt
复制
    $FullHttpUrl = $HttpUrl . "/v2/index.php";
代码语言:txt
复制
    /\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*对请求参数 按参数名 做字典序升序排列,注意此排序区分大小写\*\*\*\*\*\*\*\*\*\*\*\*\*/
代码语言:txt
复制
    $ReqParaArray = array\_merge($COMMON\_PARAMS, $PRIVATE\_PARAMS);
代码语言:txt
复制
    ksort($ReqParaArray);
代码语言:txt
复制
    /\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*生成签名原文\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*
代码语言:txt
复制
     \* 将 请求方法, URI地址,及排序好的请求参数  按照下面格式  拼接在一起, 生成签名原文,此请求中的原文为
代码语言:txt
复制
     \* GETcvm.api.qcloud.com/v2/index.php?Action=DescribeInstances&Nonce=345122&Region=gz
代码语言:txt
复制
     \* &SecretId=AKIDz8krbsJ5yKBZQ    ·1pn74WFkmLPx3gnPhESA&Timestamp=1408704141
代码语言:txt
复制
     \* &instanceIds.0=qcvm12345&instanceIds.1=qcvm56789
代码语言:txt
复制
     \* \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/
代码语言:txt
复制
    $SigTxt = $HttpMethod . $FullHttpUrl . "?";
代码语言:txt
复制
    $isFirst = true;
代码语言:txt
复制
    foreach ($ReqParaArray as $key => $value) {
代码语言:txt
复制
        if (!$isFirst) {
代码语言:txt
复制
            $SigTxt = $SigTxt . "&";
代码语言:txt
复制
        }
代码语言:txt
复制
        $isFirst = false;
代码语言:txt
复制
        /\*拼接签名原文时,如果参数名称中携带\_,需要替换成.\*/
代码语言:txt
复制
        if (strpos($key, '\_')) {
代码语言:txt
复制
            $key = str\_replace('\_', '.', $key);
代码语言:txt
复制
        }
代码语言:txt
复制
        $SigTxt = $SigTxt . $key . "=" . $value;
代码语言:txt
复制
    }
代码语言:txt
复制
    /\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*根据签名原文字符串 $SigTxt,生成签名 Signature\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/
代码语言:txt
复制
    $Signature = base64\_encode(hash\_hmac('sha1', $SigTxt, $secretKey, true));
代码语言:txt
复制
    /\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*拼接请求串,对于请求参数及签名,需要进行urlencode编码\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/
代码语言:txt
复制
    $Req = "Signature=" . urlencode($Signature);
代码语言:txt
复制
    foreach ($ReqParaArray as $key => $value) {
代码语言:txt
复制
        $Req = $Req . "&" . $key . "=" . urlencode($value);
代码语言:txt
复制
    }
代码语言:txt
复制
    /\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*发送请求\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/
代码语言:txt
复制
    if ($HttpMethod === 'GET') {
代码语言:txt
复制
        if ($isHttps === true) {
代码语言:txt
复制
            $Req = "https://" . $FullHttpUrl . "?" . $Req;
代码语言:txt
复制
        } else {
代码语言:txt
复制
            $Req = "http://" . $FullHttpUrl . "?" . $Req;
代码语言:txt
复制
        }
代码语言:txt
复制
        $Rsp = file\_get\_contents($Req);
代码语言:txt
复制
    }

// var_export(json_decode($Rsp,true)) ;

代码语言:txt
复制
    return json\_decode($Rsp, true);
代码语言:txt
复制
}

同时再写一个通用的调用API的方法,把API的名称以及参数传过去即可:

public function videoApi($action, $private_params)

代码语言:txt
复制
{
代码语言:txt
复制
    /\*DescribeInstances 接口的 URL地址为 cvm.api.qcloud.com,可从对应的接口说明 “1.接口描述” 章节获取该接口的地址\*/
代码语言:txt
复制
    $HttpUrl = "vod.api.qcloud.com";
代码语言:txt
复制
    /\*除非有特殊说明,如MultipartUploadVodFile,其它接口都支持GET及POST\*/
代码语言:txt
复制
    $HttpMethod = "GET";
代码语言:txt
复制
    /\*是否https协议,大部分接口都必须为https,只有少部分接口除外(如MultipartUploadVodFile)\*/
代码语言:txt
复制
    $isHttps = true;
代码语言:txt
复制
    /\*需要填写你的密钥,可从  https://console.qcloud.com/capi 获取 SecretId 及 $secretKey\*/
代码语言:txt
复制
    $secretKey = '你的SecretKey';
代码语言:txt
复制
    /\*下面这五个参数为所有接口的 公共参数;对于某些接口没有地域概念,则不用传递Region(如DescribeDeals)\*/
代码语言:txt
复制
    $COMMON\_PARAMS = array(
代码语言:txt
复制
        'Nonce' => rand(),
代码语言:txt
复制
        'Timestamp' => time(NULL),
代码语言:txt
复制
        'Action' => $action,
代码语言:txt
复制
        'SecretId' => '你的secretId',
代码语言:txt
复制
        'Region' => 'gz',
代码语言:txt
复制
    );
代码语言:txt
复制
    /\*下面这两个参数为 DescribeInstances 接口的私有参数,用于查询特定的虚拟机列表\*/

// $PRIVATE_PARAMS = array(

// 'pullset.0.fileId'=> '14651978969383094681',

// 'width'=>200,

// 'height'=>200

// );

代码语言:txt
复制
    $PRIVATE\_PARAMS = $private\_params;
代码语言:txt
复制
    /\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/
代码语言:txt
复制
    return $this->CreateRequest($HttpUrl, $HttpMethod, $COMMON\_PARAMS, $secretKey, $PRIVATE\_PARAMS, $isHttps);
代码语言:txt
复制
}

具体调用如下:

代码语言:txt
复制
$getParams = array('fileId' => $fileId);
$resultArray = $this->videoApi('DescribeVodPlayUrls', $getParams);

这样就通过后台发了一个请求,并把返回结果写在$resultArray里,最后再根据其返回值作自己需要的处理即可。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
作者已关闭评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云点播
面向音视频、图片等媒体,提供制作上传、存储、转码、媒体处理、媒体 AI、加速分发播放、版权保护等一体化的高品质媒体服务。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档