vue-video-player切换视频
时间: 2023-09-30 07:12:07 浏览: 84
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
要在vue-video-player中切换视频,你需要使用`changeSource`方法。这个方法接受一个对象作为参数,该对象应该包含一个`src`属性,表示新视频的URL。
这里是一个示例代码:
```vue
<template>
<div>
<video-player ref="player" :options="playerOptions"></video-player>
<button @click="changeVideo">切换视频</button>
</div>
</template>
<script>
import VideoPlayer from 'vue-video-player'
export default {
components: {
VideoPlayer
},
data() {
return {
playerOptions: {
autoplay: false,
sources: [
{
type: 'video/mp4',
src: 'http://example.com/video1.mp4'
}
]
}
}
},
methods: {
changeVideo() {
this.$refs.player.changeSource({
type: 'video/mp4',
src: 'http://example.com/video2.mp4'
})
}
}
}
</script>
```
在这个例子中,我们首先定义了一个`VideoPlayer`组件,并将其配置为播放一个名为`video1.mp4`的视频。然后我们在页面中添加一个按钮,当用户点击该按钮时,会调用`changeVideo`方法来切换视频。
在`changeVideo`方法中,我们使用`this.$refs.player`来获取对`VideoPlayer`组件的引用,并调用其`changeSource`方法来切换到新视频。在这个例子中,新视频的URL是`http://example.com/video2.mp4`。
请注意,`changeSource`方法的参数应该是一个对象,其中至少包含一个`src`属性,表示新视频的URL。你也可以在这个对象中指定其他选项,如`type`属性来指定视频的MIME类型,以及`poster`属性来指定视频封面的URL。
阅读全文