vue H5短视频列表

最新推荐文章于 2024-07-14 11:16:56 发布

置顶

D_evin_

最新推荐文章于 2024-07-14 11:16:56 发布

阅读量327

点赞数

文章标签： vue.js 前端 javascript video 短视频列表

本文链接：https://blog.csdn.net/D_evin_/article/details/130604838

版权

自适应布局点击视频全屏播放，点击下一个视频暂停上一个视频

全部代码：

<template>
    <div class="container">
        <div class="box" v-if="meData.length > 0">
            <div class="box-item" v-for="item in meData" :key="item.id">
                <div
                    class="video"
                    :style="{
                        'background-image': 'url(' + item.backgroundImage + ')'
                    }"
                    @click="btnFullScr('video' + item.id)"
                >
                    <img
                        src="https://wx.applet.style.51dsx.cn/h5img/video1@2x.png"
                        alt=""
                    />
                    <video
                        :id="'video' + item.id"
                        :poster="item.videologo"
                        controls="false"
                        style="object-fit: fill"
                        :src="item.videoUrl"
                        class="video_video"