html/vue中的多媒体标签使用以及响应式设置src

目录

前言

视频标签

响应式ref写法

图片标签

音频标签

源码

---

前言

该项目为vue的一个demo,项目结构是这样的：

视频标签

<video>标签的使用，使用响应式数据方式ref设置src,src为网络地址。若不使用响应式数据方式，src不仅可以设置为本地资源（要拼对地址），也可直接设置为网络地址。

一般写法：

属性：

src：视频路径
controls：显示播放的控件
autoplay：自动播放（谷歌浏览器中配合muted实现自动静音播放）
loop：循环播放

响应式ref写法

<template>
<div class="div">
  <video :src="url" class="video" controls>
  </video>
</div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
 const url:any=ref('http://10.70.223.225/paper/test.mp4')
</script>

video标签里图片地址设置为   :src="url"

script中，先引入ref，再定义前面的url

图片标签

<img src="./assets/logo.png" alt="一张测试图片" class="img"/>

该标签为单标签。

属性：

src:目标图片的路径

alt：替换文本（当图片加载不出来时显示的文本）

title：提示文本（当鼠标悬停时显示的文本）

width和height：宽度和高度，如果只设置其一，则按照图片原尺寸进行等比例缩放。

音频标签

<audio controls autoplay loop>
      <source src="./assets/background.mp3">
    </audio>

属性：

src：音频路径
controls：显示播放的控件
autoplay：自动播放（部分浏览器不支持）
loop：循环播放

设置音频自动播放，可设置不循环播放，再隐藏该控件style="display: none;"

源码

<template>
   <div class="div">
    <video :src="url1" class="video" controls></video>
    <img src="./assets/logo.png" alt="一张测试图片" class="img"/>
    <audio controls autoplay loop>
      <source src="./assets/background.mp3">
    </audio>
  </div>
</template>


<script setup lang="ts">
import { ref } from 'vue'
  const url1:any=ref("http://10.70.223.225/paper/test.mp4")
</script>
<style>
  .div{
    background-color: rgb(251, 233, 253);
    width: 100wh;
    height: 100vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .video{
    width: 800px;
    height: 600px;
  }
  img{
    width: 100px;
    height: 100px;
  }

</style>

页面效果如下：（我使用了弹性布局让三个控件水平排列）

keep coding        (等双休版嘻嘻)