目录
前言
该项目为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 (等双休版嘻嘻)