66 lines
1.1 KiB
Vue
66 lines
1.1 KiB
Vue
<template>
|
|
<div class="Video">
|
|
<video-player v-show="show" class="video-player-box"
|
|
ref="videoPlayer"
|
|
:options="playerOptions"
|
|
:playsinline="true"
|
|
customEventName="customstatechangedeventname">
|
|
</video-player>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Video',
|
|
props: {
|
|
url: {
|
|
type: Array ,
|
|
default: () => []
|
|
},
|
|
show: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
data () {
|
|
|
|
return {
|
|
playerOptions: {
|
|
muted: false,
|
|
language: 'en',
|
|
aspectRatio: "16:9", //视频的宽高比
|
|
playbackRates: [0.7, 1.0, 1.5, 2.0, 3.0],
|
|
sources: this.url,
|
|
poster: "/static/images/author.jpg",
|
|
}
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
url(newVal) {
|
|
this.playerOptions.sources = newVal;
|
|
}
|
|
},
|
|
mounted(){
|
|
},
|
|
|
|
computed: {
|
|
player() {
|
|
return this.$refs.videoPlayer.player
|
|
}
|
|
},
|
|
methods: {
|
|
play() {
|
|
this.player.play()
|
|
},
|
|
pause() {
|
|
this.player.pause()
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
|
|
</style>
|