100 lines
2.0 KiB
Vue
100 lines
2.0 KiB
Vue
<template>
|
|
<view class="myVideo_view" v-html="innerHtml" :id="id" :change:id="MyVideo.updateId" :isPlay="isPlay" :change:isPlay="MyVideo.handelPlay" ></view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
item: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
// 添加控制播放和暂停的prop
|
|
isPlay: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
},
|
|
computed: {
|
|
id() {
|
|
return this.item.id
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
innerHtml: '',
|
|
};
|
|
},
|
|
created() {
|
|
console.log('item',item)
|
|
this.initVideoHtml();
|
|
},
|
|
methods: {
|
|
isHttpOrHttps(url) {
|
|
const regex = /^(http|https):\/\//;
|
|
return regex.test(url);
|
|
},
|
|
initVideoHtml() {
|
|
let { url } = this.item.image
|
|
let bool = this.isHttpOrHttps(url)
|
|
console.log('url',url)
|
|
if(!bool) {
|
|
url = plus.io.convertLocalFileSystemURL(url);
|
|
}
|
|
this.innerHtml = `<video class="swiper-video" id="Video${this.item.id}" src="${url}" width="100%" height="100%" style="object-fit: contain;" autoplay/>`;
|
|
},
|
|
// 通知父组件播放完成
|
|
ended() {
|
|
this.$emit('onEnded')
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
<script module="MyVideo" lang="renderjs">
|
|
export default {
|
|
data() {
|
|
return {
|
|
id: '',
|
|
video: null,
|
|
}
|
|
},
|
|
computed: {
|
|
videoId() {
|
|
return 'Video' + this.id
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initVideoElement()
|
|
},
|
|
methods: {
|
|
initVideoElement() {
|
|
let video = document.getElementById(this.videoId)
|
|
this.video = video
|
|
video.addEventListener('loadedmetadata', () => {
|
|
this.video.play().then(res => {
|
|
this.video.pause()
|
|
})
|
|
})
|
|
video.addEventListener('ended', () => {
|
|
this.video.pause()
|
|
this.$ownerInstance.callMethod('ended')
|
|
})
|
|
},
|
|
handelPlay(isPlay) {
|
|
if(!this.video) return
|
|
isPlay ? this.video.play() : this.video.pause()
|
|
},
|
|
updateId(id) {
|
|
this.id = id
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.myVideo_view {
|
|
height: 100%;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
background-color: #000;
|
|
}
|
|
</style> |