html5标签属性大全_HTML5中video标签如何使用

HTML5中的video标签用于播放视频文件的,在video标签中我们可以设置窗口的宽高,视频的自动播放,循环播放以及视频的封面图片等等

HTML5是下一代HTML,新增了许多新的标签,这些标签实现了许多新的功能。并且还减少了对外部插件的要求同时也可以更好的处理错误。比如HTML5中的video标签就可以很好的实现了在页面上播放视频的效果。接下来在文章中将为大家具体介绍如何使用video标签,具有一定的参考作用,希望对大家有所帮助

85d103208670faba403ab64fc1616301.png

【推荐课程:HTML5教程】

HTML5 video标签的详细用法

用于播放视频文件,比如电影或其它视频流。可以在开始标签和结束标签之间放置文本内容,这样做的好处是一些低版本的浏览器就可以显示出不支持该标签的信息

例:

定义宽高

我们可以给这个视频自定义宽高来改变它的窗口大小

效果图:

4985b65a1b79c133c247c48ae886efa3.png

自动播放

我们可以通过设置属性来让视频是否开启自动播放

(1)使用autoplay属性可以让浏览器加载完后视频文件后立即播放

您的浏览器不支持 video 标签。

a96d498a-732d-eb11-8da9-e4434bdf6706.png

我们还可以在自动播放时设置muted状态,这样做的目的是当视频自动播放时会静音,而且我们还可以通过点击播放器的扬声器来开启声音

您的浏览器不支持 video 标签。

效果图:

f8ebcd52de33d6d8a5f275fa4e3917f1.png

循环播放

我们可以使用loop属性让视频播放结束时,再从头开始循环播放。代码如下所示

您的浏览器不支持 video 标签。

预加载媒体文件

设置preload属性中的不同属性值,来告诉浏览器应该怎样加载一个媒体文件:

auto:表示让浏览器自动下载整个文件

none:表示让浏览器不必预先下载文件

metadata:表示让浏览器先获取视频文件开头的数据块,从而足以确定一些基本信息(比如视频的总时长,第一帧图像等)

您的浏览器不支持 video 标签。

设置视频的封面图片

通过poster属性可以设置视频的封面图片,浏览器在下面三种情况下会使用这个图片:

(1)视频第一帧未加载完毕

(2)把preload属性设置为none

(3)没有找到指定的视频文件

您的浏览器不支持 video 标签。

效果图:

58aca6c4c961afa6d10cc84229ea47e4.png

总结:以上就是本篇文章的全部内容了,希望通过这篇文章可以帮助大家学会去使用video标签。

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

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

相关文章

Java中@Override的作用

Override是伪代码,表示重写(当然不写也可以),不过写上有如下好处: 1、可以当注释用,方便阅读; 2、编译器可以给你验证Override下面的方法名是否是你父类中所有的,如果没有则报错。例如,你如果没写Override,而你下面的…

java程序中用户名和密码_在Java应用程序中使用密码术

java程序中用户名和密码这篇文章描述了如何使用Java密码体系结构 (JCA),该体系结构使您可以在应用程序中使用密码服务。 Java密码体系结构服务 JCA提供了许多加密服务,例如消息摘要和签名 。 这些服务可通过特定于服务的API来访…

C++ setw和setfill

在C中&#xff0c;setw(int n)用来控制输出间隔。 例如: cout<<s<<setw(8)<<a<<endl; 则在屏幕显示 s a //s与a之间有7个空格&#xff0c;setw()只对其后面紧跟的输出产生作用&#xff0c;如上例中&#xff0c;表示a共占8个位置&#xff0c;不…

Linux快捷键

附上一些其他较长使用的快捷键&#xff1a; ctrl w —往回删除一个单词&#xff0c;光标放在最末尾 ctrl k —往前删除到末尾&#xff0c;光标放在最前面&#xff08;可以使用ctrla&#xff09; ctrl u 删除光标以前的字符 ctrl k 删除光标以后的字符 ctrl a 移动光标至的…

会python基础可以找到工作吗_我大学退学,现在 28 岁,如果零基础开始学 python,可以找到工作吗?...

作为一名IT行业从业者&#xff0c;同时也是一名教育工作者&#xff0c;我来回答一下这个问题。 首先&#xff0c;对于28岁且没有获得大学文凭的初学者来说&#xff0c;要想通过学习Python来找到工作还是具有一定难度的&#xff0c;一方面原因是目前开发岗位通常都有一定的学历要…

测试Java EE 8规范

Java EE 8平台肯定在过去的几个月中一直在发展。 规范已经发布了早期的草案评审&#xff0c;里程碑甚至最终版本。 实际上&#xff0c;随着JSF 2.3的发布&#xff0c;JSR-372才刚刚进入最终版本。 有关更多信息&#xff0c;请参见 Arjan的帖子 。 它有幸成为JSR-372专家组的成…

C++ this

对象a的内存地址和this指针的一模一样(都是0017F7E8)&#xff1b;而当运行到对象b的时候&#xff0c;它的内存地址又和它所对应的this指针指向的内存地址一模一样了(都是0017F7DC)。这就说明了this指针变量记录的是当前对象的内存地址&#xff0c;即this指针指向当前的对象

修改weblogic端口的方法

修改weblogic端口的方法 修改weblogic的端口常用的有两种方法 方法一.登录weblogic的console。如&#xff1a;http://localhost:7001/console/  1).在环境--服务器节点中点击你要修改的服务器的端口的名称(如下图&#xff1a;AdminServer(管理)) 2).上述步骤打开的页面如下图…

什么是JAX-RS注释? (第2部分)

JAX-RS注释概述&#xff08;第2部分&#xff09; 这是一个由三部分组成的系列&#xff0c;介绍了用于实现REST端点的注释。 在JAX-RS注释的第一部分中&#xff0c;您了解了&#xff1a; ApplicationPath批注 Path注释 GET HTTP方法注释 POST HTTP方法注释 PUT HTTP方法…

eclipse 快捷键组合

更多快捷键组合可在Eclipse按下ctrlshiftL查看。 让我们按照使用频率来看看我最爱用的一些热键组合。&#xff08;注&#xff1a;以下内容在Eclipse3.02及一上版本通过测试&#xff09; 1. Control-Shift-T: 打开类型&#xff08;Open type&#xff09;。如果你不是有意磨洋工…

java实体类转map_十五道经典面试题-JAVA基础篇

十五道JAVA基础面试题送给有需要的童鞋&#xff0c;但是不得不多提醒一句&#xff0c;打铁还需自身硬&#xff0c;计算机软件这个行业&#xff0c;技术和学历才是王道。好了&#xff0c;废话不多说&#xff0c;上菜&#xff1a;一&#xff1a;面向对象的特征有哪些方面 1. 抽象…

C++ 指针函数和函数指针

1、指针函数 &#xff08;1&#xff09;基本概念 指针函数&#xff1a;顾名思义就是带有指针的函数&#xff0c;即其本质是一个函数&#xff0c;只不过这种函数返回的是一个对应类型的地址。 &#xff08;2&#xff09;定义式 type *func(type , type) 如&#xff1a;int…

B树

B树是为磁盘或其他直接存储的辅存设备而设计的一种平衡搜索树。 B树类似于红黑树&#xff0c;但在降低磁盘I/O操作数方面要更好一些。许多数据库系统使用B树或者B树的变种来存储信息。 B树与红黑树的不同之处在于B树的结点可以有很多孩子&#xff0c;从数个到数千个。也就是说&…

如何使用recaptcha_在Spring MVC Web应用程序中使用reCaptcha

如何使用recaptchaCAPTCHA是一个程序&#xff0c;可以生成人类可以通过但计算机程序“ 不能 ”通过的测试并对其进行评分。 所采取的策略之一是向用户显示具有扭曲文本的图像&#xff0c;并且用户应在输入区域中书写文本。 如果显示的文字与用户输入的文字相同&#xff0c;则我…

micropython esp8266教程_(一)ESP8266/nodemcu如何使用MicroPython进行开发

简介 大家都知道ESP8266&#xff08;nodemcu&#xff09;可以使用arduino的语法&#xff08;C&#xff09;进行开发&#xff0c;也有些小伙伴可能也知道可以使用lua语言进行开发的。但是现在我们也可以使用python来开发esp8266&#xff08;nodemcu&#xff09;了。那么这篇教程…

PostGIS之路——几何对象编辑(二)

1、ST_Reverse返回几何对象顶点顺序相反的几何对象。geometry ST_Reverse(geometry g1);示例SQL&#xff1a;SELECT ST_AsText(the_geom) as line, ST_AsText(ST_Reverse(the_geom)) As reverselineFROM(SELECT ST_MakeLine(ST_MakePoint(1,2),ST_MakePoint(1,10)) As the_geom…

C++ cin.sync()和cin.ignore()

cin.sync()的功能是清空缓冲区&#xff0c;而cin.ignore()虽然也是删除缓冲区中数据的作用&#xff0c;但其对缓冲区中的删除数据控制的较精确。 有时候你只想取缓冲区的一部分&#xff0c;而舍弃另一部分&#xff0c;这是就可以使用cin.ignore()&#xff0c;其使用方法是&…

Spring Data对Cassandra 3的支持

名为Ingalls的新Spring Data发布火车的发布引起了我的关注&#xff0c;其中之一是Spring Data Cassandra最终支持Cassandra 3。 因此&#xff0c;我回顾了我的一个旧样本&#xff0c;并尝试了较新版本的Cassandra。 安装Cassandra 第一步是安装本地版本的Cassandra&#xff0c…

第12秒做视频封面:阿里云视频截帧功能

代码&#xff1a; <video src"http://ruilai-course.imreliable.net/fangcao_course/{{results.VideoName}}.mp4"poster"http://ruilai-course.imreliable.net/fangcao_course/{{results.VideoName}}.mp4?x-oss-processvideo/snapshot,t_12000,f_jpg,w_750,…

winform什么时候会调用closed事件_async/await 给程序带来了什么?

如果说async给ASP.NET带来的是处理能力的提高&#xff0c;那么在WinForm中给程序员带来的好处则是最大的。我们再也不用因为要实现异步写回调或者绑定事件了&#xff0c;省事了&#xff0c;可读性也提高了。不信你看下面我们将调用我们那个web service的代码在.NET4.5下实现一下…