详细记录

如果把这个封装成组件 因为我的播放进度需要进行存储势必会用到定时器，这时候必须 在 beforeDestroy或者 destroy 中 清空 ；不然就算 离开父页面也还是会无法销毁

阿里云播放器 基础功能 官方文档

继 根据业务开发了其他功能 大家可以结合 上一篇 基础阿里云播放器使用 使用

一、使用播放器组件

官网文档-- 插件组件

1、播放器动态水印（ID跑马灯）

根据终端用户特性，将ID等信息以文字水印的形式展示在视频画面上，震慑侵权行为。用户可以自定义文字水印出现的位置，文字颜色和字体大小。更多信息。

在在上篇文章基础上

<script module="renderScript" lang="renderjs">

//1 、 在 方法 loadWebPlayerSDK 引入 aliplayercomponents-1.0.9.min.js

loadWebPlayerSDK (){
....
 s_tag.onload = () => {
  const s_tag1 = document.createElement('script'); // 引入播放器js
                s_tag1.type = 'text/javascript';
                s_tag1.src = 'https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js';
                s_tag1.charset = 'utf-8';
                s_tag1.onload = () => {
                    this.checkValue();
                    resolve();

                }
                document.body.appendChild(s_tag1);


}

.....

}

2、在 方法 getLive 的 Aliplayer中 增加  components
getLive(){
...
 var player = new Aliplayer({
...
components:[
 {
  name: 'BulletScreenComponent',//走马灯
  type: AliPlayerComponent.BulletScreenComponent,
                  ]
  args: ['本课程版权归所有，翻版必究!', {fontSize: '16px', color: 'red',}, 'random']
},

]

...
})
}
</script>

二、使用播放器 自定义组件

由于播放器的全屏播放是根据屏幕方向来进行旋转缩放的，如果观看视频是跳页实现的那没问题，但是我想参照爱奇艺优酷等在当前页面进行播放，那么播放器自带的全屏功能就会有很多问题，所以就自己去写了按钮

效果图

一、 视频代码 同级 添加 要插入的全屏按钮 标签

<templete>
....
//全屏按钮 标签
<div class="fullScreenButton-container">
				<div :class="`prism-fullscreen-btn ${isFullScreen ? 'fullscreen' : ''}`"
					@tap="renderScript.changeVideoScreen"></div>
			
			</div>


....


</templete>

2、在renderScript 中

<script module="renderScript" lang="renderjs">

//1 、 在 方法 loadWebPlayerSDK 引入 aliplayercomponents-1.0.9.min.js

loadWebPlayerSDK (){
....
 s_tag.onload = () => {
  const s_tag1 = document.createElement('script'); // 引入播放器js
                s_tag1.type = 'text/javascript';
                s_tag1.src = 'https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js';
                s_tag1.charset = 'utf-8';
                s_tag1.onload = () => {
                    this.checkValue();
                    resolve();

                }
                document.body.appendChild(s_tag1);


}

.....

}

2、在 方法 getLive 的 中 增加  fullScreenButtonComponent 
getLive(){

//在 方法 getLive 的 中 增加  fullScreenButtonComponent 
	var fullScreenButtonComponent = Aliplayer.Component({
					/**
					 * 初始函数，在new对象时调用
					 *
					 * @param {string} adAddress - 广告视频地址
					 * @param {string} toAddress - 广告链接地址
					 */
					init: function(status, toAddress) {

						this.fullScreenStatus = status
						// this.adAddress = adAddress;
						// this.toAddress = toAddress;

						this.$html = $('.fullScreenButton-container');
						// this.$html.hide();
					},

					/**
					 * 创建广告Dom元素
					 */
					createEl: function(el) {


						this.$html.find('.ad').attr('src', this.adAddress);
						var $adWrapper = this.$html.find('.ad-wrapper');
						$adWrapper.attr('href', this.toAddress);
						$adWrapper.click(function() {
							// Aliplayer.util.stopPropagation();
						});
						// this.$html.find('.close').click(function () {
						//   this.$html.hide();
						// });
						// $(el).find('.prism-controlbar').append(this.$html);
						$(el).find('.prism-time-display').after(this.$html);
					},
					ready: function(player, e) {
						// this.$html.hide()
					},
					/**
					 * 隐藏广告
					 */
					play: function(player, e) {
						// this.$html.show();
					},
					/**
					 * 显示广告
					 */
					pause: function(player, e) {
						// this.$html.show();
					},
					/**
					 * 隐藏广告
					 */
					playing: function(player, e) {
						this.$html.show();
						// this.$html.hide();
					},
					waiting: function(player, e) {
						// this.$html.hide()
					},
					timeupdate: function(player, e) {},
					error: function(player, e) {},
					/**
					 * 显示广告
					 */
					ended: function(player, e) {
						// this.$html.show();
					}
				});

...
//Aliplayer 中引用
 var player = new Aliplayer({
...
components:[
 {
							name: 'adComponent',//名字随便 全屏组件
							type: fullScreenButtonComponent,
							args: [
								'http://101.201.146.165:8088/Pf-EH/statics/uploadFile/2024-05-10/b0f420c7-9178-41ad-9dd6-f59a64a6e190.png'
							]
						},
						{
							name: 'RateComponent',//单独的倍速组件
							type: AliPlayerComponent.RateComponent
						},

]

...
})
}


//改变屏幕方向
changeVideoScreen(event, ownerInstance) {
				var that = this;
				var status = this.player.fullscreenService.getIsFullScreen();

				if (status) {

					setTimeout(() => {
						plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
						this.player.fullscreenService.cancelFullScreen();
						
					}, 100);

				} else {

					
					this.player.fullscreenService.requestFullScreen();
					setTimeout(() => {
						
						plus.screen.lockOrientation("landscape-primary");

					}, 100);


				}
			},
</script>