67 lines
1.5 KiB
Vue
67 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<view style="height: 250px"></view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
src: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
poster: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
playTime: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
webview: null
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.createWebView()
|
||
|
|
},
|
||
|
|
beforeDestroy() {
|
||
|
|
plus.webview.close('video')
|
||
|
|
this.webview.removeEventListener('titleUpdate', this.handlePostMessage)
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
createWebView() {
|
||
|
|
this.webview = plus.webview.create('/hybrid/html/video.html', 'video', {
|
||
|
|
top: uni.getSystemInfoSync().statusBarHeight + 44 + 'px',
|
||
|
|
height: '250px',
|
||
|
|
videoFullscreen: "landscape"
|
||
|
|
}, {
|
||
|
|
src: this.src,
|
||
|
|
poster: this.poster,
|
||
|
|
playTime: this.playTime
|
||
|
|
});
|
||
|
|
this.webview.show()
|
||
|
|
this.webview.addEventListener('titleUpdate', this.handlePostMessage)
|
||
|
|
},
|
||
|
|
handlePostMessage(event) {
|
||
|
|
const {eventName, currentTime} = JSON.parse(event.title)
|
||
|
|
const eventNameKeys = ['ready', 'seeking', 'seeked', 'play', 'pause', 'ended', 'timeupdate']
|
||
|
|
if (eventNameKeys.includes(eventName)) {
|
||
|
|
this.$emit(eventName, currentTime)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
fn(event) {
|
||
|
|
const eventKeys = ['play', 'pause', 'destroy', 'fullscreen.exit']
|
||
|
|
if (eventKeys.includes(event)) {
|
||
|
|
this.webview.evalJS(`htmlMessage('${event}')`);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
</style>
|