视频自动添加字幕-数据万象-文档中心-腾讯云

概览

本文将介绍如何使用 COS SDK 调用数据万象的语音识别能力生成视频字幕文件，并使用腾讯云点播超级播放器（TCPlayer）播放挂载了字幕的视频。

业务场景

适用于短视频制作时，原始视频无字幕，需要自动识别视频语音内容并生成字幕的场景。可应用于 PGC/UGC 平台、视频网站、短视频应用、资讯平台等对媒体内容制作有较高智能化和时效性需求的行业。

准备工作

已创建和绑定存储桶，详情请参见存储桶操作。
已开通语音识别功能。
上传视频文件
在页面中引入 COS SDK 与 TCPlayer 相关脚本文件：

<!--播放器样式文件-->
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.min.css" rel="stylesheet" />
<!--播放器脚本文件-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.6.0/tcplayer.v4.6.0.min.js"></script>
<!--COS SDK-->
<script src="https://cdn.jsdelivr.net/npm/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js"></script>

设置播放器容器节点:
在需要展示播放器的页面位置加入播放器容器。例如，在 index.html 中加入如下代码（容器 ID 以及宽高都可以自定义）。

<video id="player-container" width="414" height="270" preload="auto" playsinline webkit-playsinline></video>

生成字幕文件

步骤 1：初始化 COS SDK 并配置相关信息

// 密钥请在访问管理控制台获取。https://console.cloud.tencent.com/cam/capi
const cos = new COS({
  SecretId: 'AKID*******',
  SecretKey: '**********',
});

步骤 2：创建语音识别任务

构造提交语音识别任务接口并发起请求请求参数：

// 存储桶配置请在 cos 控制台获取。https://console.cloud.tencent.com/cos/bucket
// 格式参考：Bucket: 'abc-1250000000', Region: 'ap-shanghai'
const config = {
  // 需要替换成您自己的存储桶信息
  Bucket: '***-125********' /* 存储桶，必须 */,
  Region: '**-*****' /* 存储桶所在地域，必须字段 */,
  FileName: 'demo.mp4' /* 文件名 */,
};
//需在地址前拼接/asr_jobs，即：`https://<BucketName-APPID>.ci.<Region>.myqcloud.com/
const host = config.Bucket + '.ci.' + config.Region + '.myqcloud.com';
const url = 'https://' + host + '/asr_jobs';
//使用 cos sdk 发起语音识别任务请求
const body = COS.util.json2xml({
  Request: {
    Tag: 'SpeechRecognition' /* 创建任务的 Tag：SpeechRecognition ,必须*/,
    Input: {
      Object:config.FileName /* 需要语音识别的视频文件，存储桶里的路径 */,
    },
    Operation: {
      SpeechRecognition: {
        EngineModelType: '16k_zh_video' /* 引擎模型类型:16k 音视频领域 ,必须 */,
        ChannelNum: 1 /* 语音声道数，必须 */,
        ResTextFormat: 1 /* 识别结果返回形式，必须 */,
        OutputFileType: 'srt',
      },
      Output: {
        Bucket: config.Bucket /*     存储结果的存储桶 ,必须 */,
        Region: config.Region /*     存储结果存储桶地域 ,必须 */,
        Object: `demo.srt` /* 结果文件的名称 ,必须 */,
      },
    },
    QueueId: '******************' /* 任务所在的队列 ID ,必须 */,
  },
});
cos.request(
  {
    Bucket: config.Bucket,
    Region: config.Region,
    Method: 'POST',
    Url: url,
    Key: '/asr_jobs' /** 固定值，必须 */,
    ContentType: 'application/xml' /** 固定值，必须 */,
    Body: body,
  },
  (err, data) => {
    console.log(err || data);
  }
);

请求方式为 POST，Content-Type 为 application/xml，Tag 为 SpeechRecognition 语音识别，Input.Object 为准备工作中上传的视频文件,Operation.Output 为结果输出地址可以填准备工作中创建的存储桶，需要注意 Output.Object 文件名称后缀名应为 .srt 格式，Operation.SpeechRecognition 为语音识别配置参数。
接口响应参数，JobsDetail 节点下为下面 获取提语音识别任务接口接口响应 任务信息。其中 JobId 为关键信息，下面 构造查询语音识别任务链接 会用到。

步骤 3：获取字幕文件

查询语音识别任务执行是否完成，获取字幕文件

// 存储桶配置请在 cos 控制台获取。https://console.cloud.tencent.com/cos/bucket
// 格式参考：Bucket: 'abc-1250000000', Region: 'ap-shanghai'
const config = {
  // 需要替换成您自己的存储桶信息
  Bucket: '***-125********' /* 存储桶，必须 */,
  Region: '**-*****' /* 存储桶所在地域，必须字段 */,
  FileName: 'demo.srt' /* 文件名 */,
};
// 需在对象地址前面拼接 ai_jobs/<jobId>，即：`https://<BucketName-APPID>.ci.<Region>.myqcloud.com/ai_jobs/<jobId>`
// jobId 即为刚刚创建的任务 ID

const host = config.Bucket + '.ci.' + config.Region + '.myqcloud.com';
const url = 'https://' + host + '/asr_jobs/' + JobId;
cos.request(
  {
    Bucket: config.Bucket,
    Region: config.Region,
    Method: 'GET',
    Url: url,
    Key: '/asr_jobs/' + JobId /** 固定值，必须 */,
    ContentType: 'application/xml' /** 固定值，必须 */,
  },
  (err, data) => {
    if (err) {
      // 语音识别任务查询失败，请在 console 查看报错信息;
      console.log(JSON.stringify(err));
      return;
    }
    const resp = data.Response || {};
    //判断语音识别任务是否执行中
    if (resp.JobsDetail.State !== 'Success') {
      console.log('...语音识别任务执行中');
      return;
    }
    //任务执行完成 字幕文件地址为
    const srtUrl = `https://${config.Bucket}.cos.${config.Region}.myqcloud.com/${config.FileName}`;
  }
);

返回体 Content-Type 为 application/xml，其中 State 为 Success 代表已经完成语音识别，读取到通过语音识别的字幕文件地址为 https://${Operation.Output.Bucket}.cos.${Operation.Output.Region}.myqcloud.com/${Operation.Output.Object}。

使用 TCPlayer 播放

获取上面 准备工作 创建的视频文件地址：
https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4
获取上面 生成字幕文件 创建的字幕文件地址：
https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.srt
初始化播放器，并设置视频地址和字幕文件：

// TODO: 使用 Web 播放器时，为获取更佳的兼容性，可将普通 srt 格式字幕文件转换为 webvtt 格式
const getWebvvtUrl = url => {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      const arr = text.split('\n');
      text = arr.slice(0, arr.length - 4).join('\n');
      const vvtText = 'WEBVTT\n' + '\n' + text.replace(/,/g, '.') + '\n';
      console.log(vvtText);
      return URL.createObjectURL(new Blob([vvtText]));
    });
};
// srt 文件格式转 webvvt 格式，非必须，TCPlayer 播放器字幕文件暂只支持 webvvt 格式
const webvvtUrl = await getWebvvtUrl(`https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.srt`);
// 初始化播放并设置播放地址及字幕文件
const Player = TCPlayer('player-container', {});
Player.src(`https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4`);
Player.on('ready', function () {
  // 添加语音识别任务生成的字幕文件
  const subTrack = Player.addRemoteTextTrack(
    {
      src: webvvtUrl, // 字幕文件
      kind: 'subtitles',
      srclang: 'zh-cn',
      label: '中文',
      default: 'true',
    },
    true
  );
});

若存在跨域问题，则需要进行存储桶跨域访问 CORS 设置，详情请参见设置跨域访问。
若存储桶为私有读写，则对象地址需要携带签名，详情请参见请求签名。

费用相关

Demo 体验

具体代码可参考cos-demo 视频自动添加字幕
使用 TCPlayer 播放 COS 视频文件。
通过数据万象语音识别并生成字幕文件能力，使用 COS 音视频播放器体验馆体验给视频设置字幕实际效果。

视频自动添加字幕

本页目录：

概览