这是加密的 且适用于app端
css
对于UNI APP端的开发而言，由于上并没有document
不能进行相关的DOM操作，同时有关DOM渲染的第三方库(echart、openlayer等)也无法有效的使用，
因此官方推出了renderjs方案，来解决上述问题。二、其他博主的记录 可以详细看看怎么使用 uniapp中使用renderjs的一些细节
因为业务需要记录获取用户学习时长，
所以在这基础上加了 存储 当前播放记录以及全屏 其他的一些 的功能，
在另一篇有详细记录的代码⬇
以下是基础的播放器 功能
javascript
<template>
<view class="container">
<div
ref="videoContent"
@tap="renderScript.handleClick"
id="url-player-test"
:videoData="videoData"
:change:videoData="renderScript.receiveMsg"
></div>
</view>
</template>
<script>
import $http from "@/config/requestConfig.js"; //封装的请求方法
export default {
data() {
return {
options: {},//上个页面获取的视频参数（视频id）
playAuth: "",//播放凭证
videoId: "",//阿里云视频id
videoData: {},//阿里云视频其他参数
}
},
//第一次加载
onLoad(options) {
this.options = JSON.parse(options.data);//根据自己上个页面的传参来接受
this.videoId = this.options.video;//阿里云视频id
methods: {
// 获取数据
getLive() {
var data = {
...this.options,
};
$http
.request({
url: `xxxx`,//接口地址
method: "Post",
data,//后端需要的参数主要为阿里云视频id
header: {
"Content-Type": "application/json",
},
})
.then((res) => {
//playAuth 是播放凭证 通过后端自己根据api去获取，返回时不知道为什么结束会带有= 有时候甚至是2个 所以要截取等号 不然不能播放
var playAuth = res.video.playAuth.replace(/=/g, "");
this.videoData = {
...res.video,//视频其他信息
videoId: res.video.video,//阿里云视频id
playAuth: playAuth,//阿里云播放凭证
};
this.playAuth = playAuth;
this.$forceUpdate();
});
},
},
created() {
this.getLive();//获取播放凭证
},
};
</script>
<script module="renderScript" lang="renderjs">
export default {
mounted() {
// 在适合的生命周期，通过script和link标签引入播放器sdk、css
this.loadWebPlayerSDK()
},
data() {
return {
player: null,
}
},
methods: {
getLive() {
//配置播放器
var player = new Aliplayer({
id: "url-player-test",
"vid": this.videoData.videoId, // 必选参数，可以通过点播控制台（路径：媒资库>音/视频）查询。示例：1e067a2831b641db90d570b6480f****。
"playauth": this.videoData.playAuth, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
"encryptType": 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
"playConfig": {
"EncryptType": 'AliyunVoDEncryption'
},
width: '100%', //容器的大小
height: '100%', //容器的大小
}, function(player) { });
this.player = player;
player.one('canplay', function() {
// console.log('canplay', this.player.tag);
player.tag.play();
});
},
//监听获取播放凭证的方法
checkValue() {
console.log(this.videoId, this.authId, "1111888888")
if (!this.videoData.playAuth) {
setTimeout(() => {
this.checkValue();
}, 1000);
} else {
this.getLive();
}
},
loadWebPlayerSDK() {
return new Promise((resolve, reject) => {
const s_tag = document.createElement('script'); // 引入播放器js
s_tag.type = 'text/javascript';
s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/aliplayer-min.js';
s_tag.charset = 'utf-8';
s_tag.onload = () => {
this.checkValue();
resolve();
}
document.body.appendChild(s_tag);
const l_tag = document.createElement('link'); // 引入播放器css
l_tag.rel = 'stylesheet';
l_tag.href =
'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css';
document.body.appendChild(l_tag);
});
},
loadComponent() {
return new Promise((resolve, reject) => {
const s_tag = document.createElement('script');
s_tag.type = 'text/javascript';
// 需要先下载组件 js 文件，放到项目 /static/ 目录下
// 下载地址：https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/customComponents/dist/aliplayer-components/aliplayercomponents-1.0.9.min.js
s_tag.src = './static/aliplayercomponents-1.0.9.min.js';
s_tag.charset = 'utf-8';
s_tag.onload = () => {
resolve();
}
document.body.appendChild(s_tag);
});
}
}
}
</script>
<style>
.container {
width: 100vw;
height: 100vh;
}
</style>