Html提高——视频标签音频标签及其相关属性

HTML5 在不使用插件的情况下,也可以原生的支持音视频格式文件的播放,当然,支持的格式是有限的。

1、video标签

1.1、video标签的语法

 <video src="文件地址" controls="controls"></video>

video标签的内部执行顺序是从上往下执行的

 <video controls="controls" width="300"><source src="move.ogg" type="video/ogg" ><source src="move.mp4" type="video/mp4" >您的浏览器暂不支持 <video> 标签播放视频</ video >

若ogg格式的视频不能兼容,则试图播放MP4格式的视频,如果也不能的话则显示不支持

1.2、video的常见属性

1.3、代码展示以及效果图

  •  poster=“图片地址”

视频没加载好的时候展示的就是poster图片

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main {width: 800px;height: 600px;background-color: skyblue;margin: 0 auto;position: relative;}.bfq {width: 600px;height: 400px;background-color: pink;display: block;position: absolute;left: 50%;margin-left: -300px;top: 50%;margin-top: -200px;}</style>
</head><body><div class="main"><video class="bfq" src="./pokemon.mp4" autoplay="autoplay" controls="controls" poster="./迪幻.jpg" muted="muted"loop="loop"></video></div>
</body></html>

2、audio标签

 1、语法

<audio src="文件地址" controls="controls"></audio>

2、载入方式

 < audio controls="controls" ><source src="happy.mp3" type="audio/mpeg" ><source src="happy.ogg" type="audio/ogg" >您的浏览器暂不支持 <audio> 标签。</ audio>

从上往下加载

3、常用属性

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/785174.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

接口自动化框架Pytest —— 配置文件pytest.ini的详细使用

前言 我们在执行用例的时候&#xff0c;每次都在命令行中输入-v&#xff0c;-s等一些命令行参数的时&#xff0c;比较麻烦。其中pytest.ini这个配置文件可以快速的帮助我们解决这个问题。 配置文件 pytest.ini文件是pytest的主配置文件&#xff0c;可以改变pytest的运行方式…

vue实现在进入页面之前自动刷新一次页面(适用于首次进入页面空白,刷新才显示的问题)

有时候会莫名出现一个问题&#xff0c;首次进入页面的时候空白&#xff0c;刷新才会显示&#xff0c;如果实在排查不到原因&#xff0c;以及如何解决&#xff0c;那就直接在进入页面之前去自动执行一次刷新操作&#xff0c;实现方法如下 <script setup> import {onBefor…

MyBatis报Parameter ‘title‘ not found的Exception 处理

mybatis的操作中抛出了Caused by: org.apache.ibatis.binding.BindingException: Parameter title not found. Available parameters are [1, 0, param1, param2] 原因是什么呢&#xff1f;现在我们通常使用mybatis操作数据库的时候写的都是mapper接口加mapper.xml组合的方式操…

【python】pip清华大学镜像

1、修改pip源为清华源&#xff1a; pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple2、结果是自动给我创建了一个文件&#xff1a; 3、打开这个文件所在的文件夹&#xff1a; 4、打开文件&#xff1a; 5、如果不想指定清华的&#xff0c;就删掉…

提升K8S故障排除效率:详解Pod内抓包的高效策略!

在Kubernetes环境中&#xff0c;故障排除是管理者日常工作中不可或缺的一部分。随着容器化应用的广泛采用&#xff0c;需要一种高效的方法来诊断和解决Pod内部的问题。本文将重点介绍如何利用抓包技术提升Kubernetes环境中Pod内部故障排除的效率。 为什么需要Pod内抓包 在Kube…

【MySQL】DQL-案例练习-DQL基本介绍&语法&执行顺序(代码演示)

前言 大家好吖&#xff0c;欢迎来到 YY 滴MySQL系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C Linux的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的…

Baidu Comate

Baidu Comate 他来了 描述功能支持的编程语言支持的 IDE支持的操作系统IDEA安装操作 描述 智能代码助手&#xff0c;其实就是写代码的辅助工具&#xff0c;可以很大程度的帮你提升编码效率&#xff0c;作为一个白嫖党&#xff0c;我觉得这个还可以。 功能 注释生成代码、增强…

Flutter 拦截系统键盘,显示自定义键盘

一、这里记录下在开发过程中&#xff0c;下单的时候输入金额需要使用自定义的数字键盘 参考链接: https://juejin.cn/post/7166046328609308685 效果图 二、屏蔽系统键盘 怎样才能够在输入框获取焦点的时候&#xff0c;不让系统键盘弹出呢&#xff1f;同时又显示我们自定义的…

LeetCode刷题【栈】

目录 栈394. 字符串解码739. 每日温度 栈 394. 字符串解码 给定一个经过编码的字符串&#xff0c;返回它解码后的字符串。 编码规则为: k[encoded_string]&#xff0c;表示其中方括号内部的 encoded_string 正好重复 k 次。注意 k 保证为正整数。 你可以认为输入字符串总是…

Hive详解(2)

​​Hive 表结构 分区表 多字段分区&#xff1a;需要使用多个字段来进行分区&#xff0c;那么此时字段之间会构成多层目录&#xff0c;前一个字段形成的目录会包含后一个字段形成的目录&#xff0c;从而形成多级分类的效果。例如商品的大类-小类-子类&#xff0c; 省市县、年…

Netty教程之NIO基础

NIO 介绍 NIO 全称java non-blocking IO&#xff08;非阻塞 I/O&#xff09;&#xff0c;后续提供了一系列改进的输入/输出的新特性&#xff0c;被统称为 NIO(即 New IO)&#xff0c;是同步非阻塞的。 阻塞和非阻塞是进程在访问数据的时候&#xff0c;数据是否准备就绪的一种…

内存泄漏是什么?如何避免内存泄漏?

1.2 内存泄漏 使用new开辟空间泄漏&#xff0c;抛出异常 int main() {int size 0;try{while (1){//int* p (int*)malloc(sizeof(int) * 1024 * 1024);/*if (p NULL){break;}*/int* p new int[1024 * 1024];size size 4 * 1024 * 1024;cout << p << endl;}}…

代码随想录算法训练营第二十五天|17.电话号码的字母组合、39.组合总和、40.组合总和Ⅲ

文档链接&#xff1a;https://programmercarl.com/ LeetCode17.电话号码的字母组合 题目链接&#xff1a;​​​​​​​https://leetcode.cn/problems/letter-combinations-of-a-phone-number/ 思路&#xff1a; 理解本题后&#xff0c;要解决如下三个问题&#xff1a; 数…

mongodb sharding分片模式的集群数据库,日志治理缺失导致写入数据库报错MongoWriteConcernException的问题总结(下)

一、接着上文 上文介绍了mongodb sharding的分片集群搭建&#xff0c;本文侧重于讲述日志治理。 这里使用linux自带的日志治理工具logrotate&#xff0c;无论是哪个端口的进程&#xff0c;其日志治理方式类似。 查看/data目录下的文件大小&#xff0c; du -hs *二、Logrota…

每日一题(相交链表 )

欢迎大家来我们主页进行指导 LaNzikinh-CSDN博客 160. 相交链表 - 力扣&#xff08;LeetCode&#xff09; 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节…

linux 中的syslog的含义和用法

在Linux系统中&#xff0c;syslog是一种系统日志服务&#xff0c;用于收集、存储和管理系统和应用程序生成的日志消息。syslog服务负责记录系统的运行状态、错误信息、警告、调试信息等&#xff0c;以便系统管理员可以监控系统的健康状况、故障排查和性能优化。 含义和作用&am…

RUST使用crates.io上的依赖完整教程

1.打开crates.io 2.搜索要使用的依赖,如rand 点击包名,进入包详情页面: 添加依赖方法有两种 1.使用cargo命令 2.直接修改Cargo.toml 使用cargo命令操作如下: 在工程目录执行如下命令: cargo add rand 执行完成后如自动向Cargo.toml中添加依赖如下: 手动修改Cargo.toml是…

漏洞挖掘 | ruoyi框架管理系统漏洞

前言&#xff1a; 在挖src的时候&#xff0c;可以通过信息收集收集弱口令&#xff0c;然后通过后台弱口令进入后台&#xff1a; 发现一个弱口令进去后&#xff1a; 【魔方老师提醒才发现&#xff0c;这个蓝色的草丛其实可以大致判断是若依系统】 看这界面&#xff0c;是不是…

XSS伪协议

XSS伪协议简介 XSS&#xff08;跨站脚本攻击&#xff09;中的伪协议是指利用一些浏览器允许的特殊协议来执行恶意脚本的一种方式。常见的伪协议包括 javascript:, data:, vbscript: 等。 攻击者可以通过构造特定的URL&#xff0c;将恶意脚本注入到网页中&#xff0c;从而实现…

基于8086密码锁可修改仿真

**单片机设计介绍&#xff0c;基于8086密码锁可修改仿真 文章目录 一 概要二、功能设计三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于8086的密码锁可修改仿真设计是一个结合了微处理器控制、密码管理和仿真技术的综合性项目。通过此设计&#xff0c;用户可以设定和…