Nuxt（Vue）+elementUI走马灯组件+html ＜video＞实现轮播视频，并自定义视频播放按钮_使用element走马灯 + video-player实现图片和视频混合轮播-CSDN博客

本文链接：https://blog.csdn.net/The_Fuir_ye/article/details/116926215

本文介绍了如何在Nuxt.js项目中，结合ElementUI的走马灯组件和HTML的`<video>`标签，实现图片与视频轮播效果。通过引入vue-video-player插件并自定义播放按钮，详细展示了相关配置和代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Nuxt（Vue）+elementUI走马灯组件+html ＜video＞实现轮播视频，并自定义视频播放按钮

项目是用nuxt.js搭建的，最近需求需要首页的banner部分要图片+视频的轮播
一下是完整的代码例子，因项目首页还有其他内容，我只提取出有关banner的部分相关代码

首先需要安装一个插件（video.js）
安装命令：npm install vue-video-player --save

plugins文件夹下新建一个video-player.js文件

在这里插入图片描述
video-player.js里添加以下内容：
import Vue from ‘vue’
const VueVideoPlayer = require(‘vue-video-player/dist/ssr’)
Vue.use(VueVideoPlayer)

修改配置文件nuxt.config.js
css下添加：
{ src: ‘video.js/dist/video-js.css’ }

在这里插入图片描述
plugins下添加：
{ src: ‘@/plugins/video-player’, ssr: f
alse }

<template>
	<div class="page">
		<div class="new-index">
			<!-- bannner图 -->
	        <div>
	          <el-carousel  
	            class="banner-box"
	            :interval="cutTime"
	            arrow="always"
	            :autoplay="autoplay"
	            trigger="click"
	            :indicator-position="autoplay?'':'none'"
	            @change="getIndex">
	            <el-carousel-item v-for="(item, index) in BannersCn" :key="index" class="banner-item">
	              <nuxt-link v-if="item.addres" :to="item.addres || ''" target="_blank">
	                <img v-if="item.type== 'jpg'"  class="banner-img" :src="item.image" alt="">
	                <video v-if="item.type== 'mp4'" :ref="'videoPlayer' + index" :controls="isIn" >
	                    <source :src="item.image" type="video/mp4">
	                </video>
	              </nuxt-link>
	              <div v-else>
	                <img v-if="item.type== 'jpg'"  class="banner-img" :src="item.image" alt="">