dev/dcp-web-gate/src_old/views/conferenceServices/modelView/video.vue

<template>
  <div>
      <ul>
        <li v-for="(item, i) in videoData" :key="i" @click="playVideo(item.videoUrl)">
            <div class="img-content" :style="{background: item.videoCover?'url(./api/file/pub/'+item.videoCover+')': '#000', backgroundSize: '100% 100%'}">
                <img class="play-img" width="100" height="100" src="@/assets/img/conference/player.png" alt />
            </div>
            <p class="title">{{lang=='en'? item.titleEn: item.title}}</p>
        </li>
    </ul>
    <div class="mask" v-show="maskShow" @click="closeMask">
        <video 
            :src="currentUrl" width="500" height="350" controls="controls"
            id="ConferenceResultVideo">
            Your browser does not support the video tag.
        </video>
    </div>
  </div>
</template>

<script>
import { getConfrenceDetail } from "@/api/meeting/meetingOutInfo";
export default {
    data(){
        return {
            videoData: [],
            lang: '',
            currentUrl: '',
            maskShow: false,
        }
    },
    created(){
        this.lang = this.$i18n.locale;
    },
    watch: {
        '$i18n.locale'(val){
            this.lang = val;
        }
    },
    mounted(){
        getConfrenceDetail(this.$route.query.key).then((res) => {
            this.videoData = res.data.meetingOutInfo.video.filter(item =>{
                return (item.outType == "VIDEO" && item.videoUrl);
            });
            console.log('视频',this.videoData)
        });
    },
    methods: {
        closeMask(){
            this.maskShow = false;
            let videoEl = document.getElementById('ConferenceResultVideo');
            videoEl.pause();
        },
        playVideo(url){
            this.currentUrl = './api/file/pub/'+ url;
            this.maskShow = true;
            let videoEl = document.getElementById('ConferenceResultVideo');
            videoEl.play();
        },
    }
}
</script>

<style scoped>
*{
    box-sizing: border-box;
}
ul{
    display: flex;
    flex-wrap: wrap;
    padding: 20px 10px;
}
li{
    width: 33.3%;
    min-height: 247px;
    padding: 10px;
}
.img-content{
    width: 100%;
    height: 240px;
    position: relative;
}
.img-content img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    opacity: 0.8;
}
.img-content img:hover{
    opacity: 1;
}
.title{
    text-align: center;
    margin: 10px 0;
}
video{
    background: #000;
    border: 1px solid #000;
}
.mask{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0 ,0 , 0, 0.7);
    z-index: 9;
}
.mask video{
    max-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    outline: none;
}
</style>