腾讯云视频上传和播放尝试总结

2019年6月1日 308次阅读 来源: voxer

项目中需要用到腾讯云视频，做了一个完整的流程尝试，总结一下。
基本需求是通过后台管理页面上传视频，然后通过网页，Android和iOS播放视频。
腾讯视频分三大部分：视频上传，视频处理，视频播放，相应都有很多SDK和备选功能，特别是视频处理功能非常多。

1. 准备工作

腾讯云账号首先必须认证，然后申请AppId和相应的密钥

《腾讯云视频上传和播放尝试总结》 image.png

最后要说腾讯云视频点播是需要付费的，免费的笔者测试了一个视频，有时候刷新播放的时候会超时。

2. 上传视频

上传视频可以直接在腾讯云的视频中心上传，但是很多情况是需要通过程序来上传的。提供了后台各种语言上传的SDK，也包括了Android和iOS的，基本就是腾讯COS（对象存储）上传文件的进一步封装。

我们这里主要是尝试通过Web来上传。上传分2部分，一部分是需要我们写一个服务端WebAPI来返回一个signature。这个完全可以拷贝腾讯提供的签名例子，主要是把密钥id和密钥key放在服务端计算POST返回签名值。我这里用的是NetCore的例子

[HttpPost]
public string Post()
{
    Signature sign = new Signature();
    sign.m_strSecId = "用自己的secid";
    sign.m_strSecKey = "用自己的seckey";
    sign.m_qwNowTime = Signature.GetIntTimeStamp();
    sign.m_iRandom = new Random().Next(0, 1000000);
    sign.m_iSignValidDuration = 3600 * 24 * 2;
    return sign.GetUploadSignature();
}

另外一部分是基于H5写的上传视频，腾讯提供了web的sdk，以下是一个包含上传视频，截图加进度的完整的例子

var uploadvideo = function () {
    var videoFile = document.getElementById("vname").files[0];
    var coverFile = document.getElementById("cname").files[0];
    qcVideo.ugcUploader.start({
        videoFile: videoFile,
        coverFile: coverFile,//封面，类型为 File
        getSignature: getSignature,
        error: function (result) {
            alert('上传失败的文件类型：' + result.type+"\n"+'上传失败的原因：' + result.msg);
        },
        progress: function (result) {
            document.getElementById("progress").value=result.shacurr*100;
        },
        finish: function (result) {
            var info ={
                "上传结果的 fileId":result.fileId,
                "上传结果的视频名称": result.videoName,
                "上传结果的视频地址":result.videoUrl,
                "上传结果的封面名称":result.coverName,
                "上传结果的封面地址":result.coverUrl
            }
            alert(JSON.stringify(info,null,2));
            console.log(JSON.stringify(result,null,2));
        }
    });
}

上传成功后截图如下：

《腾讯云视频上传和播放尝试总结》 image.png

注意这里要播放一个视频，只需要传递一个fileid，如果要下载视频文件才需要视频url。

上传成功后我们在视频中心可以看到上传的列表。

3. PC端播放视频

在PC端通过浏览器播放非常简单，直接基于腾讯的例子简单改一下AppId和fileid，在PC端各种浏览器兼容很好。

var player = TCPlayer('player-container-id', { // player-container-id 为播放器容器ID，必须与html中一致
    fileID: '7447398156669699331', // 请传入需要播放的视频filID 必须
    appID: '1256923424' // 请传入点播账号的appID 必须
    //其他参数请在开发文档中查看
  });

注意要在公众账号上使用，需要单独为一个视频申请，腾讯会审核：

《腾讯云视频上传和播放尝试总结》 image.png

4. 手机端播放视频

手机端播放有2种方式，一是也是基于webview播放以上例子，但是兼容不好，对于某些格式还不支持，如下图：

《腾讯云视频上传和播放尝试总结》 image.png

我们这里目前只使用点播mp4格式，手机端浏览器应该支持，在
AppWorker的IDE下使用
do_Webview组件加载这个html文件

ui("do_WebView_1").url="http://192.168.31.176:5555/videoplayer.html";

这个html是运行在局域网的一个web服务。
在Android手机上我们推荐使用do_TencentWebview组件效果会更好，这个组件就是集成腾讯的X5webview，可以规避Android不同系统下浏览器的差异。
播放的效果如下：

《腾讯云视频上传和播放尝试总结》 image.png

还有一种方式就是使用腾讯提供的Android和iOS SDK，这需要AppWorker官方封装一个do_TencentVideoPlayer的组件，效果肯定比基于webview的好很多，官方很快会封装这个组件。

最后所有示例都可以从Github上下载,包括生成证书的服务，上传视频和播放视频的html。需要运行在NetCore下。

    原文作者：voxer
    原文地址: https://www.jianshu.com/p/09daa8894201
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞