SpringBoot整合腾讯云点播 - 《SpringBoot 知识整理》

腾讯云点播介绍

腾讯云点播介绍

腾讯云点播（Video on Demand，VOD）基于腾讯多年技术积累与基础设施建设，为有音视频应用相关需求的客户提供包括音视频存储管理、音视频转码处理、音视频加速播放和音视频通信服务的一站式解决方案。

文档中心：https://cloud.tencent.com/document/product/266

2.1、开通”云点播”服务

2.2、管理控制台

2.3、上传视频

上传视频可将视频上传到云点播的存储中，以进行后续的处理和分发等。

单击左侧菜单栏【媒资管理 > 视频管理】，默认展示【已上传】标签页；
点击【上传视频】按钮；
单击【选择视频】，选择本地视频文件；
单击【开始上传】；
页面将自动跳转至【正在上传】标签页，本地文件所在行【状态】栏为“上传成功”时，单击【已上传】标签页，可见完成上传的视频；

单击【管理】，可以查看视频详情；

2.4、前端集成

前端集成有两种方式，使用“超级播放器预览”与“web播放器预览”，后者代码已经不更新，推荐使用前者，因此“web播放器预览”仅做了解。

1、查看“web播放器预览”；

说明：需要将视频进行转码，才能支持超级播放器播放，转码为：自适应码流

2、查看“任务流设置”

3、查看详情

当前任务流就是系统默认的“自适应码流”任务流

4、在【音视频管理】重新上传视频

5、查看详情

6、复制代码index.html到项目，即可播放

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
        <title>腾讯云视频点播示例</title>
        <!-- 引入播放器 css 文件 -->
        <link href="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">
        <!-- 如需在IE8、9浏览器中初始化播放器，浏览器需支持Flash并在页面中引入 -->
        <!--[if lt IE 9]>
        <script src="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/ie8/videojs-ie8.js"></script>
        <![endif]-->
        <!-- 如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，需要在 tcplayer.v4.1.min.js 之前引入 hls.min.0.13.2m.js -->
        <script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
        <!-- 引入播放器 js 文件 -->
        <script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>
        <!-- 示例 CSS 样式可自行删除 -->
    </head>
    <body>
        <!-- 设置播放器容器 -->
        <video id="player-container-id" preload="auto" width="600" height="400" playsinline webkit-playsinline x5-playsinline></video>
        <!--
        注意事项：
        * 播放器容器必须为 video 标签
        * player-container-id 为播放器容器的ID，可自行设置
        * 播放器区域的尺寸请按需设置，建议通过 css 进行设置，通过css可实现容器自适应等效果
        * playsinline webkit-playsinline x5-playsinline 这几个属性是为了在标准移动端浏览器不劫持视频播放的情况下实现行内播放，此处仅作示例，请按需使用
        -->
        <script>
            var player = TCPlayer("player-container-id", { /**player-container-id 为播放器容器ID，必须与html中一致*/
                fileID: "387702305041937695", /**请传入需要播放的视频fileID 必须 */
                appID: "1313350282", /**请传入点播账号的子应用appID 必须 */
                psign: ""
                /**其他参数请在开发文档中查看 */
                });
        </script>
    </body>
</html>