今天在写后台的时候碰到一个需求 感觉挺有意思的 就给大家一起分享一下
在同一个页面 点击左侧两个小视频(红色) 在右侧播放(黄色)
实现思路:
给右侧黄色区域的视频的 src动态绑定,点击红色的第一个的时候,把src赋值给黄色,让黄色自动播放,点击红色第二个的时候,把红色第二个src赋值给黄色,让黄色播放
看重点
定义url 并给定默认视频
右侧黄色区域动态绑定src
左侧红色区域添加点击事件
点击事件内部处理
代码如下
右侧黄色区域
<p>区域监控</p>
<div class="area">
<div class="tv" style="width: 100%;height: 100%;">
<div ref='centertv' id="centertv" ></div>
<video autoplay="autoplay" controls="controls" width="100%" height="100%" :src="url">
</source>
</video>
</div>
</div>
左侧红色区域
<p>视频</p>
<div style="height: 240px;border: 1px solid #1e4aa3; display: flex;justify-content:space-between;" class="twoshipin">
<video autoplay="autoplay" controls="controls" width="45%" height="100%" @click.prevent="play1" >
<source src="./image/3.mp4" type="video/mp4" ref='tv1'>
</source>
<!-- <video autoplay="autoplay" controls="controls" width="45%" height="100%" @click.prevent="showbig=1" ref='tv'> -->
</video>
<video autoplay="autoplay" controls="controls" width="45%" height="100%" @click.prevent="play2" >
<source src="./image/webwxgetvideo.mp4" type="video/mp4" ref='tv2'>
</source>
</video>
</div>
事件处理函数
play1(){
this.url = this.$refs.tv1.src
},
play2(){
this.url = this.$refs.tv2.src
},
这样就可以实现 同一页面 点击div中的视频 在不同div中展示播放
今天的分享到此结束 欢迎小伙伴留言交流 一起进步