如果不是想看基础就直接翻到:2021.07.19更新看实现业务

一、音频

解释:

代码:

<body>
<audio src="../mp3/aa.mp3" controls></audio>  
</body>

 //controls:属性;显示音乐控制器,如下图:

二、视频

解释:

代码:

<body>
<video src="../mp3/bb.mp4" controls poster="../image/a1.png" height="200"></video>
</body>

效果图:

但是注意了,有些浏览器是不支持一些视频格式的,例如谷歌就不支持flv格式,所以需要要注意一下,多准备一些视频格式

2021.07.19更新

实现文件预览:视频、音频、pdf、图片等格式文件

html:
<el-dialog
    title="预览"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    width="1180px"
    :before-close="beforeClose"
  >
    <div v-if="['mp4','avi','wmv','mp3'].includes(format)">
      <!-- 音视频预览 -->
      <video
        id="_video"
        width="100%"
        height="100%"
        controls="controls"
        preload="auto"
      >
        <source
          src=""
          :type="`'video/'${format}`"
        >
      </video>
    </div>
    <div v-else-if="['pdf','pptx','docx'].includes(format)">
      <!-- embed标签定义嵌入的内容,这里插入pdf预览-->
      <embed
        id="embedPdf"
        type="application/pdf"
        class="pdf-style"
      >
    </div>
    <div v-else-if="['png','jpg'].includes(format)">
      <!-- 图片预览 -->
      <img
        id="img"
        class="pdf-style img-style"
        :src="imgUrl"
      >
    </div>
  </el-dialog>
js:
 mounted() {
        this.getFile(this.viewFileData);
},
methods:{
        //文件数据
        getFile(val){
            //文件预览的流数据处理
            if(val !== {}) {
                let fileRes = val.fileName;
                let format = fileRes.substring(fileRes.lastIndexOf(".") + 1);
                this.format = format;
                let data = {
                    fileKey: this.previewStateLogo === 'Release' ? val.fileIdentify : val.ossNo,
                    fileName: fileRes,
                    fileType: this.format,
                }
                //ppt、word就要使用pdfOssNo标识,使用后端转成pdf的流标识,根据需求来,没必要就不用它
                if(['pptx','docx'].includes(format)){
                    data.fileKey = val.pdfOssNo
                }
                //请求后端得到返回的流数据
                meetingApi.previewFileDetail(data).then(response => {
                    const res = response;
                    if (res.status === 200) {
                        if (['mp4','avi','wmv','mp3'].includes(format)) {
                            let videoUrl = window.URL.createObjectURL(new Blob([res.data], {type: `"application/${format}"`}));
                            document.getElementById('_video').src = videoUrl;   //把videoUrl渲染到指定的容器中
                        } else if(['pdf','pptx','docx'].includes(format)){
                            let pdfUrl = window.URL.createObjectURL(new Blob([res.data],{type: "application/pdf;chartset=UTF-8;"}));
                            document.getElementById('embedPdf').src = pdfUrl;   //把pdfurl渲染到指定的容器中
                        }else if(['png','jpg'].includes(format)){
                            let blob = new Blob([res.data]); // 文件转化成二进制文件
                            this.imgUrl = URL.createObjectURL(blob); //转化成ur
                        }
                    }
                })
            }
}

这样你想要的文件就会根据你格式渲染出来预览

 视频学习于:https://xuexi.boxuegu.com/video.html?courseId=1044&moduleId=101478&type=PATH&phaseId=629

Logo

前往低代码交流专区

更多推荐