uniapp 基础阿里云点播使用

这是加密的且适用于app端

对于UNI APP端的开发而言，由于上并没有document
不能进行相关的DOM操作，同时有关DOM渲染的第三方库(echart、openlayer等)也无法有效的使用，
因此官方推出了renderjs方案，来解决上述问题。

一、官方 renderjs 文档
二、其他博主的记录可以详细看看怎么使用 uniapp中使用renderjs的一些细节

因为业务需要记录获取用户学习时长，
所以在这基础上加了 存储 当前播放记录以及全屏 其他的一些 的功能，
在另一篇有详细记录的代码⬇

其他功能

以下是基础的播放器功能

<template><view class="container"><divref="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: "",//阿里云视频idvideoData: {},//阿里云视频其他参数}},//第一次加载onLoad(options) {this.options = JSON.parse(options.data);//根据自己上个页面的传参来接受this.videoId = this.options.video;//阿里云视频idmethods: {// 获取数据getLive() {var data = {...this.options,};$http.request({url: `xxxx`,//接口地址method: "Post", data,//后端需要的参数主要为阿里云视频idheader: {"Content-Type": "application/json",},}).then((res) => {//playAuth 是播放凭证 通过后端自己根据api去获取，返回时不知道为什么结束会带有= 有时候甚至是2个 所以要截取等号 不然不能播放var playAuth = res.video.playAuth.replace(/=/g, "");this.videoData = {...res.video,//视频其他信息videoId: res.video.video,//阿里云视频idplayAuth: playAuth,//阿里云播放凭证};this.playAuth = playAuth;this.$forceUpdate();});},},created() {this.getLive();//获取播放凭证},
};
</script><script module="renderScript" lang="renderjs">
export default {mounted() {// 在适合的生命周期，通过script和link标签引入播放器sdk、cssthis.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'); // 引入播放器jss_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'); // 引入播放器cssl_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.jss_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>