同一页面 点击div中的视频 在不同div中展示播放

今天在写后台的时候碰到一个需求 感觉挺有意思的 就给大家一起分享一下

在同一个页面 点击左侧两个小视频（红色） 在右侧播放（黄色）

实现思路：
给右侧黄色区域的视频的 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中展示播放
今天的分享到此结束 欢迎小伙伴留言交流 一起进步