需求

项目中需要在轮播图中播放视频时连声音一起播放，并且网页自带的背景音乐也需要进行播放

分析

1. 音乐的自动播放

动播放流程是这样的，分为三个阶段：

1. 加载阶段
   父组件传入 musicData(URL)
   → watch 同步到 musicUrl
   → 刷新
   → 浏览器开始加载音频文件
   → 加载完成触发 @canplay

2. 自动播放尝试（会被浏览器拦截）
   @canplay → onCanPlay()
   → audio.play() 尝试播放
   → 浏览器阻止（NotAllowedError，因为尚无用户交互）
   → catch 中启动 setInterval 每 1 秒轮询

这里第一次 play() 必然失败，浏览器禁止带声音的音频自动播放。

3. 用户交互触发真正播放
   用户点击/触摸页面任意位置
   → onUserInteraction()
   → userInteracted = true
   → playAudio() → audio.play() → 浏览器允许播放 → 声音出来
   → clearInterval 停止轮询

所以它并非真正意义上的"自动"播放，而是 依赖用户第一次点击页面来绕过浏览器策略。由于页面本身有轮播图
等内容，用户几乎总会点击页面，所以感觉上像是自动播放的。

2. 视频的自动播放

页面加载
→ 视频 slide 出现，尝试 play() → 被浏览器阻止 → 跳过
→ 用户点击页面（触发 BgMusic 的交互处理）
→ 浏览器解除媒体播放限制
→ 下一个视频 slide → play() 成功 → 带声音播放

如果用户始终不点击页面，视频会播放失败，Swiper
直接跳到下一张图片。但实际使用中几乎总会有点击，所以看起来是自动播放。

3. 开启无人交互自动播放【建议方法B】

开启这个后就会跳过手动点击才播放声音

Windows 系统（Edge 或 Chrome）
方法 A：使用组策略（推荐企业/受控部署）
下载策略模板（ADMX）
Edge：Microsoft Edge Policy Templates
Chrome：Chrome Enterprise Policy Templates
安装模板
将 ADMX 文件放到 C:\Windows\PolicyDefinitions
将对应的 ADML 文件放到 C:\Windows\PolicyDefinitions\en-US
打开组策略编辑器
Win + R → 输入 gpedit.msc → Enter
找到策略位置
Edge: 计算机配置 → 管理模板 → Microsoft Edge → 内容设置
Chrome: 计算机配置 → 管理模板 → Google → Google Chrome → 内容设置
配置策略
找到 AutoplayAllowed 或 Allow autoplay of media
设置为 Enabled 或 True
可以选择 全部网站允许 或 只允许指定域名（AutoplayAllowlist）
应用并重启浏览器
方法 B：注册表直接配置（无需组策略）
打开注册表编辑器
Win + R → 输入 regedit → Enter
定位注册表路径
Edge:
HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Edge
Chrome:
HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome
如果路径不存在，可以手动创建。
添加 DWORD 值
名称：AutoplayAllowed
类型：DWORD (32-bit)
值：1 （表示允许有声自动播放）
重启浏览器，网页视频即可在无人交互下播放声音。

源码

BgMuic.vue

<BgMusic :music-data="audioUrls"/>

<template><!-- 背景音乐组件（视觉隐藏，仅提供音频功能） --><divstyle="display: none"><audioref="audioRef":src="musicUrl"looppreload="auto"@canplay="onCanPlay"@error="onError"/></div></template><script setuplang="ts">import{ref, watch, onMounted, onBeforeUnmount,typePropType}from'vue'const props=defineProps({// 由父组件传入的背景音乐地址 musicData:{type: String as PropType<string|null>, default: null}})const audioRef=ref<HTMLAudioElement|null>(null)const musicUrl=ref('')letplayAttemptTimer: ReturnType<typeof setInterval>|null=nullletuserInteracted=false/** 父组件数据变化时自动同步 */ watch(()=>props.musicData,(val)=>{if(typeof val==='string'){musicUrl.value=val}},{immediate:true})functionplayAudio(){const audio=audioRef.valueif(!audio||!musicUrl.value)returnaudio.play().catch(()=>{})}functiononUserInteraction(){if(userInteracted)returnuserInteracted=trueplayAudio()if(playAttemptTimer){clearInterval(playAttemptTimer)playAttemptTimer=null}}functiononCanPlay(){if(userInteracted){playAudio()return}const audio=audioRef.valueif(!audio)returnaudio.play().catch(()=>{if(!playAttemptTimer){playAttemptTimer=setInterval(()=>{if(userInteracted){playAudio()if(playAttemptTimer){clearInterval(playAttemptTimer)playAttemptTimer=null}}},1000)}})}functiononError(err: Event){console.warn('[BgMusic] 音频加载失败:', err)}/** WebSocket 推送更新 */functionupdateMusic(url: string){if(typeof url==='string'){musicUrl.value=url}}onMounted(()=>{document.addEventListener('click', onUserInteraction,{once:true})document.addEventListener('touchstart', onUserInteraction,{once:true})})onBeforeUnmount(()=>{if(playAttemptTimer){clearInterval(playAttemptTimer)playAttemptTimer=null}document.removeEventListener('click', onUserInteraction)document.removeEventListener('touchstart', onUserInteraction)})defineExpose({updateMusic})</script>

MediaSwiper.vue

视频如果想要静音播放，添加参数muted

<MediaSwiper :media-data="middleBannerUrls"class="carousel"/>

<template><!-- 顶部轮播区域 --><divclass="carousel-wrapper"><divclass="carousel-inner"><Swiperref="swiperRef":modules="modules":loop="true":allow-touch-move="false":autoplay="{ delay: CAROUSEL_INTERVAL, disableOnInteraction: false, pauseOnMouseEnter: false }"@slide-change="onSlideChange"class="carousel-swiper"><SwiperSlide v-for="(item, index) in mediaList":key="index"><!-- 视频 --><video v-if="item.type === 'video'":src="item.url":ref="el => setVideoRef(index, el)"playsinlinepreload="auto"class="carousel-media"@playing="onVideoPlaying"@ended="onVideoEnded"/><!-- 图片 --><img v-else :src="item.url":alt="item.alt || '轮播图片'"class="carousel-media"/></SwiperSlide></Swiper></div></div></template><script setuplang="ts">import{ref, watch, onBeforeUnmount}from'vue'import{Swiper, SwiperSlide}from'swiper/vue'importtype{Swiper as SwiperClass}from'swiper/types'import{Autoplay, Pagination}from'swiper/modules'// @ts-expect-error swiper ships CSS files withouttypedeclarationsimport'swiper/css'// @ts-expect-error swiper ships CSS files withouttypedeclarationsimport'swiper/css/pagination'import{CAROUSEL_INTERVAL}from'../../../utils/constants'interface MediaItem{type:'video'|'image'url: string alt?: string}const props=defineProps({// 由父组件传入的轮播列表数据 mediaData:{type: Array as()=>(string|MediaItem)[]|null, default: null}})const swiperRef=ref<{$el:{swiper: SwiperClass}}|null>(null)const mediaList=ref<MediaItem[]>([])const videoRefs=ref<Record<number, HTMLVideoElement|null>>({})letisVideoPlaying=false// Autoplay 模块驱动图片轮播，视频播放时暂停 autoplay const modules=[Autoplay, Pagination]/** 将 URL 字符串标准化为{type, url}对象 */functionnormalizeItem(item: string|MediaItem): MediaItem{if(typeof item==='string'){const path=item.split('?')[0].split('#')[0]const isVideo=/\.(mp4|webm|ogg|mov)$/i.test(path)return{type: isVideo ?'video':'image', url: item}}if(!item.type){const path=item.url.split('?')[0].split('#')[0]const isVideo=/\.(mp4|webm|ogg|mov)$/i.test(path)item.type=isVideo ?'video':'image'}returnitem}/** 父组件数据变化时自动同步 */watch(()=>props.mediaData,(val)=>{ if(Array.isArray(val)){mediaList.value=val.map(normalizeItem)}},{immediate:true})/** 获取 Swiper 实例 */functiongetSwiper(): SwiperClass|null{returnswiperRef.value?.$el?.swiper ?? null}/** 启停 autoplay */functionstopAutoplay(){getSwiper()?.autoplay?.stop()}functionstartAutoplay(){getSwiper()?.autoplay?.start()}/** 存储视频 DOM 引用 */functionsetVideoRef(index: number, el: any){if(el){videoRefs.value[index]=el as HTMLVideoElement}}/** Slide 切换时的处理 */functiononSlideChange(swiper: SwiperClass){const currentIndex=swiper.realIndex const item=mediaList.value[currentIndex]Object.values(videoRefs.value).forEach(video=>{if(video&&!video.paused)video.pause()})if(item&&item.type==='video'){stopAutoplay()isVideoPlaying=trueconst videoEl=videoRefs.value[currentIndex]if(videoEl){videoEl.currentTime=0videoEl.play().catch(()=>{ isVideoPlaying=false startAutoplay()})} else { isVideoPlaying=false startAutoplay()} } else { isVideoPlaying=false startAutoplay()} } function onVideoPlaying(){//autoplay 已在 onSlideChange 中停止 } function onVideoEnded(){ isVideoPlaying=false const swiper=getSwiper()if(swiper){ swiper.slideNext()} startAutoplay()}/**外部（WebSocket）推送更新*/function updateMediaList(data:(string|MediaItem)[]){ if(Array.isArray(data)){mediaList.value=data.map(normalizeItem)}}onBeforeUnmount(()=>{stopAutoplay()})defineExpose({updateMediaList})</script><style scoped>.carousel-wrapper{width:100%;height: 600px;overflow: hidden;position: relative;display: flex;justify-content: center;align-items: center;}.carousel-inner{width: 956px;height: 543px;border-radius: 4px;overflow: hidden;}.carousel-swiper{width:100%;height:100%;}.carousel-media{width:100%;height:100%;object-fit: cover;display: block;}</style>