uniapp 基础阿里云点播使用

这是加密的且适用于app端

css 复制代码

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

一、官方 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>

uniapp 基础阿里云点播 使用

uniapp 基础阿里云点播使用