vue聊天功能模块(十三)视频预览
程序员文章站
2022-05-20 11:14:04
...
视频预览用的是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>
上一篇: 居家搞笑,家庭生活小乐段儿
下一篇: 112、路径总和 113、路径总和II
推荐阅读