1-5 video></video>标签和<audio></audio>标签详解

本文详细介绍了HTML5中的video和audio标签,用于插入视频和音频流。这两个标签在IE9及以上版本得到支持。关键属性包括controls、autoplay、loop、muted、preload等。video标签还具有width、height和poster属性,允许设置视频尺寸和预加载图像。audio标签则不支持这些属性。预加载属性preload有auto、meta和none三种设置,分别对应不同的加载策略。文章提及了标签的兼容性问题,并指出在不支持的环境下可以添加备用文字。作者为大三学生,正在学习前后端交互的express阶段,欢迎大家指正交流。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录

1. video标签

2. audio


1. video标签

双标签

H5新增的标签,如果是IE,IE9及以上支持,

作用:插入视频流

<video src="./swim.mp4" width="300px" height="300px" controls autoplay loop muted poster="1111.jpg" preload="auto">我们不支持这个视频的格式</video>

属性:

width: 设置视频页面的宽度

height: 设置视频页面的高度

controls: 布尔属性,可以只写一个controls,也可以写controls="controls";如果不需要就不写。

 autoplay: 布尔属性。视频加载就绪就自动播放。

 loop:布尔属性。视频放完后再次循环播放

 preload:视频如何加载,进行预先处理,处理的好能够提高页面的加载速度和性能。【如果设置了autoplay,会自动忽略这个属性】

        auto:页面加载后马上需要加载视频。

        meta:页面加载后只载入元数据,不需要马上加载,但是需要获取视频的时长、大小等信息。

        none:页面加载后不载入视频的数据,用户确认打开视频时才播放。

备注:参考了文章:HTML5 audio标签使用 preload属性 规定是否在页面加载后载入音频_babybk的博客-CSDN博客_audio 预加载

muted: 视频播放的时候设置静音。

poster: 用户点击播放之前,或者是视频下载时,显示的图像。类比想象img标签,图片路径显示不全时显示的图像。

备注:可以在video标签中间加文字,如果视频存在兼容性问题,就会显示这个文字。

兼容性问题:

---------------------------------------还会二次更新

2. audio

和video的属性基本是一致的。

双标签

H5新增的标签,如果是IE,IE9及以上支持,

作用:插入音频流

<video src="./swim.mp4" controls autoplay loop muted preload="auto">我们不支持这个音频的格式</video>

属性:

这里只提不同点

没有width、height、poster属性。【无法设置宽度和高度,也无需调整音频加载不全时显示的图片】

其它都和video标签一致

兼容性问题:

---------------------------------------还会二次更新

结尾:

学习id: 201903090124-3

现在是大三学生,学习到了前后端交互的express阶段,如有不对的地方,欢迎指正,一起努力呀。如有转载请注明出处。

<template> <div class="clearfix"> <a-upload :listType="listType" accept="video/*" :multiple="multiple" :action="uploadUrl" :headers="headers" :data="{ biz: bizPath }" v-model:fileList="uploadFileList" :beforeUpload="beforeUpload" :disabled="disabled" @change="handleChange" @preview="handlePreview" > <div v-if="uploadVisible"> <div v-if="listType == 'picture-card'"> <LoadingOutlined v-if="loading" /> <UploadOutlined v-else /> <div class="ant-upload-text">{{ text }}</div> </div> <a-button v-if="listType == 'picture'" :disabled="disabled"> <UploadOutlined></UploadOutlined> {{ text }} </a-button> </div> </a-upload> <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false"> <video controls width="100%"> <source :src="previewImage" type="video" /> 您的浏览器不支持视频播放 </video> <div style="margin-top: 16px"> <a-button @click="downloadVideo">下载视频</a-button> </div> </a-modal> </div> </template> <script lang="ts"> import {computed, defineComponent, nextTick, ref, watch} from 'vue'; import {LoadingOutlined, UploadOutlined} from '@ant-design/icons-vue'; import {useRuleFormItem} from '/@/hooks/component/useFormItem'; import {propTypes} from '/@/utils/propTypes'; import {useAttrs} from '/@/hooks/core/useAttrs'; import {useMessage} from '/@/hooks/web/useMessage'; import {getFileAccessHttpUrl, getHeaders, getRandom} from '/@/utils/common/compUtils'; import {uploadUrl} from '/@/api/common/api'; const { createMessage, createErrorModal } = useMessage(); export default defineComponent({ name: 'JUploadVideo', components: { LoadingOutlined, UploadOutlined }, inheritAttrs: false, props: { //绑定值 value: propTypes.oneOfType([propTypes.string, propTypes.array]), //按钮文本 listType: { type: String, required: fals
最新发布
03-29
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值