课时53.video标签(掌握)

这节课来学习一下html5中新增的标签,我们先来看一下,html5中新增了哪些标签?

打开W3school的网页,点击参考手册中的HTML/HTML5标签,有一个按字母顺序排列的标签,但凡标签后面带有5标记的,都是html5新增的标签。

而有一些标签是css才用到的,这里先不学

有一些是用不到的,如command标签,五大浏览器都不支持,所以也不用学习

这节课主要学习了一个html5中的标志性标签,video标签,为什么video标签是html5的标志性标签呢?

因为在html5以前,html只能处理两种数据,一种是文本数据,一种是图片数据

1.什么是video标签?

作用:

播放视频

格式:

<video src=""></video>

video标签的属性:

src:用于告诉video标签需要播放的视频地址

autoplay:用于告诉video标签是否需要自动播放视频

controls:用于告诉video标签是否需要显示控制条

poster:用于告诉video标签视频没有播放之前显示的占位图片

loop:一般用于做广告视频,用于告诉video标签视频播放完毕之后是否需要循环播放

<video src=""images/test.mp4 autoplay="autoplay" loop="loop"></video>

如果是广告视频,不需要controls,poster,因为就是要让用户关闭不了,不能静音,只能不停的看

preload:预加载视频,但是需要注意preload与autoplay相冲,如果设置了autoplay属性,那么preload属性就会失效(因为都已经开始播放了,就没必要预加载了)

muted:静音

width/height:和img标签中的一摸一样,两个都设置可能会导致变形,所以只推荐设置一个

本文转载于:猿2048➽https://www.mk2048.com/blog/blog.php?id=c2ijhhj&title=课时53.video标签(掌握)

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

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

相关文章

Canvas制作的下雨动画

简介 在codepen上看到一个Canvas做的下雨效果动画&#xff0c;感觉蛮有意思的。就研究了下&#xff0c;这里来分享下&#xff0c;实现技巧。效果可以见下面的链接。 霓虹雨: http://codepen.io/natewiley/full/NNgqVJ/ 效果截图&#xff1a; Canvas动画基础 大家都知道&…

在Eclipse中有效使用JUnit

最近&#xff0c;我被卷入了讨论1和一些受感染的同伴2&#xff0c;他们关于我们如何在Eclipse IDE中使用JUnit 。 令人惊讶的是&#xff0c;对话带来了并非所有人都知道的一些“技巧”。 这使我有了写这篇文章的想法&#xff0c;总结了我们的演讲。 谁知道–也许有人也有新事物…

jquery文件上传控件 Uploadify

基于jquery的文件上传控件&#xff0c;支持ajax无刷新上传&#xff0c;多个文件同时上传&#xff0c;上传进行进度显示&#xff0c;删除已上传文件。 要求使用jquery1.4或以上版本&#xff0c;flash player 9.0.24以上。 有两个版本&#xff0c;一个用flash,一个是html5。html5…

php实现第三方邮箱登录_PHP实现用户异地登录提醒功能的方法

有时候你的网站账号被盗或你在别处登录操作后台时&#xff0c;右下角会弹出提示信息&#xff0c;提醒你的账号异地登录&#xff0c;或者会被强制下线。对于这种安全性要求比较高的web网站&#xff0c;很多后台管理都会做这种功能提醒。甄别自己的账号是否被盗或者是否有另一个人…

课时47.datalist标签(了解)

1.datalist标签 作用&#xff1a;给输入框绑定待选项 2.datalist格式&#xff1a; <datalist> <option>待选项内容</option> </datalist> 3.如何给输入框绑定待选列表&#xff1f; 搞一个输入框搞一个datalist列表给datalist列表标签添加一个id给…

postgis安装_从零开始,构建电子地图网站:0_2_数据处理postgis

软件安装完&#xff0c;开始数据处理。从China Historical GIS下载一份数据。一、数据下载数据来源&#xff1a;China Historical GIS&#xff1a;https://sites.fas.harvard.edu/~chgis/data/chgis/v6/先下载一份时间序列数据&#xff1a;Download CHGIS V6 TIME SERIES Datah…

sar图像去噪matlab,一种基于总曲率的SAR图像变分去噪方法与流程

本发明属于数字图像处理技术领域&#xff0c;具体涉及一种基于总曲率的SAR图像变分去噪方法。背景技术&#xff1a;&#xff1a;相干斑噪声是合成孔径雷达(Synthetic Aperture Radar&#xff0c;简称SAR)图像的重要特征&#xff0c;严重影响SAR图像的可解译性。相干斑噪声通常作…

课时2.浏览器和服务器(了解)

1.什么是浏览器&#xff1f; 浏览器就是由安装在我们电脑上的一款软件&#xff0c;QQ&#xff0c;百度影音等一样&#xff0c;都是安装在电脑上的一款软件 那这些软件之间由什么区别呢&#xff1f; 它们的区别就是它们的功能不太一样&#xff0c;QQ是用来聊天的&#xff0c;…

python 定义变量_用python解决动态的定义变量名(并给其赋值方法:大数据处理)...

前言&#xff1a;今天为大家带来的内容是&#xff1a;用python解决动态的定义变量名(并给其赋值方法&#xff1a;大数据处理)具有很好的参考价值&#xff0c;希望对大家有所帮助。喜欢本文内容的记得点赞转发收藏不迷路哦&#xff01;&#xff01;&#xff01;最近消费kafka数据…

课时39.细线表格(理解)

请你设计出以下图片里的这个样式的表格 步骤&#xff1a; 我先来制作一个两行两列的表格 2.将table里的cellspacing设置成0 外边距是不见了&#xff0c;但是和我们想要完成的图片有一定的差距&#xff0c;我们发现这样做出来的图片好像是两条线合并到了一起一样&#xff0c;实…

matlab拼碎纸片过程,碎纸片拼接复原模型

1. 引言破碎文件的拼接在司法物证复原、历史文献修复以及军事情报获取等领域都有着重要的应用。企事业、机关、院校和军队基于保密的需要&#xff0c;使用碎纸机对重要文件&#xff0c;单据以及材料进行销毁。一些重要的文件随着时间流逝&#xff0c;残破不全&#xff0c;因此&…

VC++编译MPIR 2.7.0

目录 第1章编译 2 1.1 简介 2 1.2 下载 3 1.3 解决方案 4 1.4 创建项目 5 1.5 复制文件树 6 1.6 不使用预编译头文件 8 1.7 包含目录 9 1.8 定义宏 10 1.9 编译前事件 11 1.10 修改 obj 的位置 13 1.11 编译yasm 14 1.12 编译汇编代码 …

导弹拦截

链接 分析&#xff1a;经典DP题&#xff0c;最长不下降子序列的变种&#xff0c;同时需要记录路径&#xff0c;用pre[]数组记录当前结点的前一个结点的方法很妙 1 #include "iostream"2 #include "cstdio"3 #include "cstring"4 #include "…

Spring中的@Cacheable开销

Spring 3.1引入了很棒的缓存抽象层 。 最后&#xff0c;我们可以放弃所有本地化的方面&#xff0c;装饰器和污染我们与缓存相关的业务逻辑的代码。 从那时起&#xff0c;我们可以简单地注释重量级方法&#xff0c;并让Spring和AOP机械完成工作&#xff1a; Cacheable("bo…

电工接线模拟仿真软件_VERICUT数控加工仿真软件,最强的数控加工模拟软件,你知道么?...

VERICUT数控加工仿真软件,最强的数控加工模拟软件VERICUT软件及功能简介1、VERICUT软件简介VERICUT是美国CGTech公司开发一款专业的数控加工仿真软件&#xff0c;是当前全球数控加工程序验证、机床模拟、工艺程序优化软件领域的领导者。该软件自1988年开始推向市场以来&#xf…

php数据库创建文件失败怎么回事,安装zblogPHP提示“创建c_option.php失败”解决方法...

有zblog用户反应在安装zblog的最后一步时提示“创建c_option.php失败”&#xff0c;如下图&#xff1a;本文来说明下这个问题的原因和解决办法。问题产生的原因&#xff1a;c_option.php是zblog的数据库配置文件&#xff0c;当安装完成的时候程序会自动创建这个文件。如果你的主…

CSS Variables

CSS原生变量(CSS自定义属性) 示例地址&#xff1a;https://github.com/ccyinghua/Css-Variables 一、css原生变量的基础用法 变量声明使用两根连词线"--"表示变量&#xff0c;"$color"是属于Sass的语法&#xff0c;"color"是属于Less的语法&a…

【基础中的基础】引用类型和值类型,以及引用传递和值传递

一直在博客园怼人&#xff0c;非常惭愧。所以郑重决定&#xff1a; 好好写一篇干货&#xff0c;然后再接着怼人。 这是一起帮上陈百万同学的求助&#xff0c;讲了一会之后&#xff0c;我觉得很有些普世价值&#xff0c;干脆就发到园子来。面向小白&#xff0c;高手轻拍。 我们从…

Java 7:使用NIO.2进行文件过滤–第3部分

大家好。 这是使用NIO.2系列进行文件过滤的第3部分。 对于那些尚未阅读第1 部分或第2部分的人 &#xff0c;这里有个回顾。 NIO.2是自Java 7起JDK中包含的用于I / O操作的新API。使用此新API&#xff0c;您可以执行与java.io相同的操作&#xff0c;以及许多出色的功能&#xf…

Hadoop Serialization -- hadoop序列化具体解释 (2)【Text,BytesWritable,NullWritable】

回想&#xff1a;回想序列化&#xff0c;事实上原书的结构非常清晰&#xff0c;我截图给出书中的章节结构&#xff1a;序列化最基本的&#xff0c;最底层的是实现writable接口&#xff0c;wiritable规定读和写的游戏规则 &#xff08;void write(DataOutput out) throws IOExce…