qrcode-app/pages/apply/viewVideoplyplayer.nvue

<template>
	<!-- 视频查看  待开发-->
	<view class="content">
		<view class="container">
			<view class="form-sub">
				<u-form ref="uForm" label-width="90px" class="demo-ruleForm" size="mini">
					<view style="font-size: 15px; font-weight: bold;color: #3d4b70;margin-bottom: 10px;">视频服务播放</view>
					<div id="player"></div>
				</u-form>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				vodPlayerJs: 'https://player.polyv.net/resp/vod-player/latest/player.js',
				vid: '',
			}
		},
		onLoad(option) {
			this.vid = option.vid
		},
		mounted() {
			this.loadPlayerScript(this.loadPlayer);
		},
		methods: {
			loadPlayerScript(callback) {
				if (!window.polyvPlayer) {
					const myScript = document.createElement('script');
					myScript.setAttribute('src', this.vodPlayerJs);
					myScript.onload = callback;
					document.body.appendChild(myScript);
				} else {
					callback();
				}
			},
			loadPlayer() {
				const polyvPlayer = window.polyvPlayer;
				this.player = polyvPlayer({
					wrap: '#player',
					// width: 300,
					with: '100%' ,
					height: 300,
					vid: this.vid,
				});
			},
		},
		destroyed() {
			if (this.player) {
				this.player.destroy();
			}
		}
	}
</script>

<style>
	.content {
		background-color: #f4f7ff;
		width: 100%;
		/* #ifndef APP-PLUS */
		height: calc(100vh - 44px - 50px); // 非APP平台下生效
		/* #endif */
		/* #ifdef APP-PLUS */
		height: calc(100vh); // APP平台下生效
		/* #endif */
	}

	.container {
		padding: 20px 16px 10px 16px;
	}

	.form-sub {
		/* margin: 20px 16px 10px 16px; */
		/* border: 1px solid #EBEEF5; */
		padding: 20px 10px 10px 10px;
		/* box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px; */
		background-color: #ffffff;
		border-radius: 10px;
	}

	.demo-ruleForm>>>.u-form-item__body__left__content__label {
		font-size: 14px;
		color: #8e8b9c;
		/* justify-content: flex-start; */
	}

	.demo-ruleForm>>>.u-form-item__body__left__content__ {
		left: -11px;
		top: 0px
	}

	.demo-ruleForm>>>.u-textarea__field {
		font-size: 14px;
	}

	.demo-ruleForm>>>.u-cell__title-text {
		font-size: 14px;
	}

	.demo-ruleForm-thr>>>.u-textarea {
		padding: 9px 9px 25px 9px;
	}

	.demo-ruleForm-thr>>>.u-form-item__body__left__content__label {
		font-size: 14px;
		color: #8e8b9c;
		/* justify-content: flex-start; */
	}

	.demo-ruleForm-thr>>>.u-form-item__body__left__content__ {
		left: -11px;
		top: 0px
	}

	.demo-ruleForm-thr>>>.u-textarea__field {
		font-size: 14px;
	}

	.demo-ruleForm-thr>>>.u-cell__title-text {
		font-size: 14px;
	}
</style>