首页 > web前端 > H5教程 > 正文

HTML5中video标签如何使用

清浅
发布: 2019-02-26 13:20:58
原创
12938 人浏览过

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

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

HTML5中video标签如何使用

【推荐课程:HTML5教程

HTML5 video标签的详细用法

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

例:

登录后复制

定义宽高

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

登录后复制

效果图:

HTML5中video标签如何使用

自动播放

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

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

登录后复制

GIF.gif

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

登录后复制

效果图:

HTML5中video标签如何使用

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

登录后复制

预加载媒体文件

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

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

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

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

登录后复制

设置视频的封面图片

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

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

(2)把preload属性设置为none

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

登录后复制

效果图:

Image 046.png

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

以上是HTML5中video标签如何使用的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!