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的运行方式…

【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 保证为正整数。 你可以认为输入字符串总是…

Netty教程之NIO基础

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

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 。 图示两个链表在节…

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;用户可以设定和…

海外媒体宣发技巧解析从而提升宣发效果

在当今全球化的媒体环境下&#xff0c;海外媒体宣发是企业和品牌推广的重要手段。然而&#xff0c;要在海外市场取得成功&#xff0c;一味地复制国内的宣发策略是行不通的。要想提升宣发效果&#xff0c;就必须了解并掌握一些海外媒体宣发的技巧。世媒讯一家从事海内外媒体的推…

git配置SSH 密钥

git配置SSH 密钥 1.window配置ssh1.安装ssh2.安装 Git&#xff08;安装教程参见安装Git&#xff09;并保证版本大于 1.9![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/e59f4e16b83c45649f1d9d7bd6bf92c0.png)3.SSH 尽量保持最新&#xff0c;6.5之前的版本由于使用…

用ChatGPT出题,完全做不完

最近小朋友正在学习加减法&#xff0c;正好利用ChatGPT来生成加减法练习题&#xff0c;小朋友表示够了&#xff0c;够了&#xff0c;完全做不完。本文将给大家介绍如何利用ChatGPT来生成练习题。 尚未获得ChatGPT的用户&#xff0c;请移步&#xff1a;五分钟开通GPT4.0。 角色…

Cadence HDL原理图创建时多个VCC或GND处理方法

1.先new一个 2. 下面的Global pin 的name处不要直接使用GND&#xff0c;不然后期画图容易混淆。 数字地使用VSS&#xff1b;模拟地使用VEE等 3. 之后继续按照普通原理图进行绘制即可。 原理图封装绘制 4. 最后在原理图中要对该网络进行说明&#xff01;&#xff01;&#…

判断点在多边形内的算法

在计算几何中&#xff0c;判定点是否在多边形内&#xff0c;是个非常有趣的问题。通常有两种方法&#xff1a; 一、Crossing Number&#xff08;交叉数&#xff09; 它计算从点P开始的射线穿过多边形边界的次数。当“交叉数”是偶数时&#xff0c;点在外面;当它是奇数时&…

【蓝桥杯第十三届省赛B组】(详解)

九进制转十进制 #include <iostream> #include<math.h> using namespace std; int main() {cout << 2*pow(9,3)0*pow(9,2)2*pow(9,1)2*pow(9,0) << endl;return 0; }顺子日期 #include <iostream> using namespace std; int main() {// 请在此…