vue实现跳转播放
实现跳转播放的基本方法
在Vue中实现跳转播放功能通常涉及路由跳转和参数传递。假设需要跳转到播放页并传递视频ID或其他标识符，可以通过以下方式实现。
路由配置 确保路由文件中已配置播放页的路由，例如：
// router/index.js
{
path: '/player/:id',
name: 'Player',
component: () => import('@/views/Player.vue')
}跳转代码示例
在需要触发跳转的组件中，使用router.push方法：
// 方法1：通过路径跳转
this.$router.push(`/player/${videoId}`);
// 方法2：通过命名路由跳转
this.$router.push({
name: 'Player',
params: { id: videoId }
});播放页接收参数
在播放页组件中，通过this.$route.params获取传递的参数：
export default {
mounted() {
const videoId = this.$route.params.id;
// 调用播放逻辑，例如初始化播放器
this.initPlayer(videoId);
}
}动态加载播放器
根据参数动态加载视频内容，以常见的video.js为例：
// Player.vue
<template>
<video ref="videoPlayer" class="video-js"></video>
</template>
<script>
import videojs from 'video.js';
export default {
methods: {
initPlayer(videoId) {
this.player = videojs(this.$refs.videoPlayer, {
sources: [{
src: `https://example.com/videos/${videoId}.mp4`,
type: 'video/mp4'
}]
});
}
},
beforeDestroy() {
if (this.player) this.player.dispose();
}
}
</script>带时间戳跳转
如果需要跳转到指定播放位置，可追加查询参数：
// 跳转时传递时间参数（单位：秒）
this.$router.push({
name: 'Player',
params: { id: videoId },
query: { t: 120 } // 跳转到2分钟位置
});在播放页处理时间跳转：
mounted() {
const startTime = parseInt(this.$route.query.t) || 0;
this.initPlayer(this.$route.params.id).then(() => {
this.player.currentTime(startTime);
});
}注意事项
- 路由需使用history模式或确保服务器配置支持SPA
- 播放器库需提前引入（如video.js、plyr等）
- 移动端可能需要处理全屏API的兼容性
- 跨域视频需服务端支持CORS或使用代理
以上方法适用于大多数视频播放场景，可根据实际需求调整参数传递方式和播放器初始化逻辑。
