利用阿里云加密播放视频

vue3+vite项目中，使用阿里云加密播放视频，防止用户私自保存下载传播，保护视频资源的数据安全。

index.html的head标签中添加这两行代码

// 本地文件放public文件夹里
<link rel="stylesheet" href="/ali/2.9.17/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="/ali/2.9.17/aliplayer-min.js"></script>
// 或者使用线上地址
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>

页面中写一个div容器

// id与loadVideo()中的id对应
<div id="ali-video"></div>

后台接口：通过videoId请求接口，获取到阿里云解析需要的数据（示例）

{
    "playAuth": "eyJTZWN1cml0eVRva2VuIjoiQ0FJU2lBTjFxNkZ0NUIyeWZTaklyNWI3Rzg3L3ViMUU0THVGTUdHRXFsa1hUYnBLb2ZUbHJEejJJSHRQZkhKdUFlZ2R2djgwbEc1VjcvY2JscklxRThRZEhCeWZOSnNydnM0R3FGbitKb0hidk5ldTBic0hoWnY5cDV0KzkrT2lqcUhvZU96Y",
    "requestId": "5EC2E3DA-8D65-574D-9F9A-2A6B1F3E3A51",
    "videoMeta": {
        "status": "Normal",
        "duration": 2902.848,
        "title": "0411魏立新最终.mp4",
        "videoId": "efdb9be00be471ee867d34b6fdcb0102",
        "coverURL": "http://outin-2bb5bf4705d811eea2dc00163e038793.oss-cn-beijing.aliyuncs.com/efdb9be00be471ee867d34b6fdcb0102/snapshots/5dc1f505172a488eaa92e10d2e0c6962-00004.jpg?Expires=1689305797&OSSAccessKeyId=LTAI5tGo8c8H9HqS5BEfcU3U&Signature=gAbcb2i1pZhZjkaAx6V5iiYsukM%3D"
    }
}

调用阿里云方法

// 调用loadVideo方法，res.data是上文中的示例数据
loadVideo(res.data);

// 视频加密播放
function loadVideo(obj) {
    setTimeout(() => {
        const player = new Aliplayer({
            id: "ali-video",
            width: "100%",
            height: "100%",
            preload: true,
            autoplay: true,
            useH5Prism: true,
            playsinline: true,
            controlBarVisibility: "hover",
            isLive: false,
            rePlay: false,
            encryptType: "1", // 播放加密视频设置encryptType=1，非加密视频注释掉，调试可以注释防止debugger
            vid: obj.videoMeta.videoId, //必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
            playauth: obj.playAuth, //必选参数。音视频播放凭证。
        });
    }, 100);
}