tcplayer在vue3中的应用

最新推荐文章于 2024-07-29 22:00:00 发布

菠萝流星酥

最新推荐文章于 2024-07-29 22:00:00 发布

阅读量967

点赞数 12

文章标签： js php 前端

本文链接：https://blog.csdn.net/qq_68262470/article/details/136556744

版权

1.开发背景

公司的服务器架构是腾讯云服务器（标准版）+ 云点播 + vue3的方式做的一个学会网，然后在前端调用tcplayer的水印api显示在前端，要求水印有用户id。

可能有人要问为什么不直接在前端的video之上加一个遮罩什么的，这种方式确实可以看起来有水印，但是在多端兼容和全屏显示的时候会出现问题。因为全屏的时候浏览器直接将video拉到顶层，虽然设置-webkit-transform-style: preserve-3d;这种方式但是遮罩会不显示（使用vue3测试过，可能有什么地方没有做对），还有一种方式就是通过api上传到云点播的时候进行一个转码，将水印加上，但是这时候会出现的问题是不能给每个用户设置一个专属水印，这样太费钱了，而且存储的压力非常大，对于预算有限的公司就只能说拜拜了。

2.解决方案

目前最低成本的就是调用tcplayer的api实现用户的水印，其他的我查看了一下文档不仅操作复杂，基本上都是要收费的项目。

云点播文档

dome示例

tcplayer api文档

引入

 <link href="https://aaa.xxx.ccc/tcplayer.min.css" rel="stylesheet"/>
 <!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，需要在 tcplayer.vx.x.x.min.js 之前引入 hls.min.x.xx.m.js。-->
 <script src="https://aaa.xxx.ccc/libs/hls.min.x.xx.m.js"></script>
 <!--播放器脚本文件-->
 <script src="https://aaa.xxx.ccc/tcplayer.vx.x.x.min.js"></script>

通过npm

npm install tcplayer.js

    vue的引入

import TCPlayer from 'tcplayer.js';
import 'tcplayer.js/dist/tcplayer.min.css';

html

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

此处需要注意的是使用video组件。

//这里options的参数可以在上面的api中找到相关的配置
var player = TCPlayer('player-container-id', options);
// player.on(type, function);
player.on('error', function(error) {
   // 做一些处理
});

播放视频

// 第一种通过视频的url来实现
// player-container-id 为播放器容器 ID，必须与 html 中一致
var player = TCPlayer('player-container-id', {
    sources: [{
      src: 'path/to/video', // 播放地址
    }],
    licenseUrl: 'license/url', // license 地址，参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
});


// player.src(url); // url 播放地址



// 第二种方式，通过后端传入的psign播放签名播放，当然前端也可以通过获取到的视频信息拼接签名
/**
    这里是php后端的
*/
 public function getTCToken($param)
    {
        $appId = 你的appid; // 用户 appid，此处注意使用的不是字符串
        $fileId = 你的视频文件id; // 目标 FileId
        $audioVideoType = "RawAdaptive"; // 播放的音视频类型，有原始视频，转码加密等类型，这个需要根据你的需求来选择
        $currentTime = time();
        $playKey = 你的播放密匙;


        $payload = array(
            "appId" => $appId,
            "fileId" => $fileId,
            "contentInfo" => array(
                "audioVideoType" => $audioVideoType,
            ),
            "currentTimeStamp" => $currentTime,
            "urlAccessInfo " => array(
                "scheme" => 'HTTP',
                "domain" => "你的播放域名",
            ),
            "ghostWatermarkInfo"=>array(
                "text"=>"这是我的幽灵水印" // 这里需要使用幽灵水印的设置文字
            )

        );
        $jwt = JWT::encode($payload, $playKey, 'HS256'); // JWT包下载可以去搜索相对应的教程比较简单就不说了
        return $jwt;
    }

//前端
 localStorage.setItem("ghostWatermarkFirstShow", 0);
  var player = TCPlayer("player-container-id", {
    fileID: param.video_id,//视频文件id
    appID: param.appId, // 应用id
    psign: param.video_token // 从后端获取到的签名
}
}

到此视频可以正常播放并且全屏的水印也会存在。

注意！！！！！！！！！！！！

在使用的过程中会有一些问题。

1.版本问题：官方目前2024-3的版本是5.1.0版本，这个版本是支持幽灵水印，并且显示和颜色都是正常的，但是会出现license url 异常的错误，这时候需要去设置license这是5.0.0版本之后都要设置的，目前存在多种license，只提供了两种免费的，免费两周，这种方式会产生费用，具体多少请查阅文档。基于这种问题我将版本降低到4.8.0，在这个版本中可以正常播放，并且也没有出现丢帧的情况，但是！！！！！幽灵水印失效了？？？？，我查看了编译后的代码这一块处理是有问题的（好像他们没有开源），所以幽灵水印用不了了，不过可以通过其他方式让浮动水印实现幽灵水印的效果，原理和文档中的差不多。

2.关于在设置签名或者license时：要准备好备案域名等（有特殊的需求）。