欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue聊天功能模块(十三)视频预览

程序员文章站 2022-05-20 11:14:04
...

vue聊天功能模块(十三)视频预览

视频预览用的是html5 video 标签
点击视频,把地址赋值到src中,同时显示盒子即可

<div class="msgVideoShowBox" v-if="showVideoViewer">
<div class="msgVideoShowContainer">
    <div class="shoutDownMsgVideo" @click="showVideoViewer=false">x</div>
    <video class="msgVideoSelf" width="100%" height="100%" controls="controls"
           controlslist="download fullscreen noremoteplayback"
           :disablePictureInPicture="false"
           autoplay>
        <source :src="msgVideoUrl" type="video/ogg">
        <source :src="msgVideoUrl" type="video/mp4">
        <source :src="msgVideoUrl" type="video/webm">
        <object :data="msgVideoUrl">
            <embed :src="msgVideoUrl">
        </object>
        您的设备不支持视频播放
    </video>
</div>
</div>
相关标签: 聊天功能