用vue3 开发一个视频播放 点机可以更换视频播放
时间: 2024-06-09 16:11:50 浏览: 7
好的,针对您的问题,我可以提供一些思路和代码示例。
首先,我们需要在 Vue.js 中引入视频播放器,推荐使用开源的 video.js 插件。在 Vue.js 3 中,我们可以通过以下方式安装和引入该插件:
1. 安装 video.js 插件:
```
npm install video.js --save
```
2. 在 Vue.js 组件中引入插件:
```vue
<template>
<div>
<video ref="videoPlayer" class="video-js" controls>
<source :src="videoUrl" type="video/mp4" />
</video>
<button @click="changeVideo">Change Video</button>
</div>
</template>
<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
export default {
name: 'VideoPlayer',
data() {
return {
videoUrl: 'https://example.com/video1.mp4',
};
},
mounted() {
// 初始化视频播放器
this.player = videojs(this.$refs.videoPlayer);
},
methods: {
changeVideo() {
// 更换视频地址
this.videoUrl = 'https://example.com/video2.mp4';
this.player.src(this.videoUrl);
this.player.load();
this.player.play();
},
},
};
</script>
```
在上面的代码中,我们定义了一个 VideoPlayer 组件,其中包含一个 video 标签和一个更换视频的按钮。在组件的 mounted 钩子函数中,我们使用 video.js 初始化了视频播放器,并将 video 标签的 ref 属性指向了 videoPlayer,这样就可以在组件中通过 this.$refs.videoPlayer 来操作视频播放器了。
在 changeVideo 方法中,我们通过修改 videoUrl 属性来更换视频地址,并使用 video.js 的 src、load 和 play 方法来更新视频播放器的状态。
希望这个示例能够对您有所帮助!
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)