<template>
	<view>
		<video :controls="controls" :autoplay="autoplay" @fullscreenchange="fullscreenchange"
			:style="{width: vWidth + 'px',height: vHeight + 'px'}" :src="src" :poster="poster"
			:id="`article_video_${articleId}`"></video>
	</view>
</template>

<script>
	export default {
		name: "article-video",
		props: {
			articleId: {
				type: Number,
				default: null
			},
			width: {
				type: Number,
				default: 750
			},
			height: {
				type: Number,
				default: 250
			},
			src: {
				type: String,
				default: ''
			},
			poster: {
				type: String,
				default: ''
			},
			autoplay: {
				type: Boolean,
				default: false
			},
			controls: {
				type: Boolean,
				default: false
			},

		},
		data() {
			return {
				vWidth: 750,
				vHeight: 250
			};
		},
		created() {
			console.error(
				"------------------------------- article-video created-------------------------------------------------"
				);
			const maxWidth = uni.upx2px(750)
			const maxHeight = 250
			// 获得长边
			const wL = this.width > this.height
			if (wL) {
				this.vWidth = maxWidth
				this.vHeight = this.height / this.width * maxWidth
			} else {
				this.vHeight = maxHeight
				this.vWidth = this.width / this.height * maxHeight
			}
		},
		methods: {
			pause() {
				uni.createVideoContext(`article_video_${this.articleId}`).pause()
			},
			fullscreenchange(e) {
				const {
					fullScreen,
					direction
				} = e.detail
				// #ifdef APP-PLUS
				plus.screen.unlockOrientation();
				// #endif
				console.log(fullScreen, direction);
			}
		}
	}
</script>

<style>

</style>