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>
相关推荐
₯㎕星空&繁华4 小时前
阿里云服务器安装MySQL服务器
服务器·ubuntu·阿里云·云计算
2501_915106329 小时前
CDN 可以实现 HTTPS 吗?实战要点、部署模式与真机验证流程
网络协议·http·ios·小程序·https·uni-app·iphone
音视频牛哥12 小时前
系统级超低延迟音视频直播模块时代:如何构建可控、可扩展的实时媒体底座
人工智能·音视频·大牛直播sdk·rtsp播放器·rtmp播放器·rtsp服务器·rtmp同屏推流
aqi0014 小时前
FFmpeg开发笔记(八十一)FFmpeg代码对RTSP和RTMP的推流区别
ffmpeg·音视频·直播·流媒体
却道天凉_好个秋16 小时前
音视频学习(六十八):视频采集原理
音视频·视频采集
云雾J视界17 小时前
Flink Checkpoint与反压问题排查手册:从日志分析到根因定位
大数据·阿里云·flink·linq·checkpoint·反压
Gigavision17 小时前
SCAMPS视频生理信号测量数据集
音视频
你的大佬99917 小时前
阿里云百炼ai模型
人工智能·阿里云·云计算
EasyDSS1 天前
互联网视频云平台EasyDSS无人机技术在烟火巡检场景中的的应用
音视频·无人机
LoveEate1 天前
uniapp 运行/发版微信小程序
微信小程序·小程序·uni-app