85 lines
1.6 KiB
Vue
85 lines
1.6 KiB
Vue
<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> |