美文网首页
认识HTML一一video标签

认识HTML一一video标签

作者: 周行知 | 来源:发表于2019-05-02 15:39 被阅读0次

video标签

我们之前只能处理两种数据:1,文本数据,2,图片数据

现在我们来看一下什么是video标签?

作用:播放视频

格式:

<video src=""></video>

案列1:video标签的应用场景

代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>video</title>

</head>

<body>

<video autoplay="autoplay" controls="controls" src="mp4/a.mp4" poster="img/a.png"></video>

</body>

</html>

运行如图所示:

video标签的属性:

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

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

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

poster:视频没有播放之前显示占位图片。

loop:用于广告视频,用于告诉video标签视频播放后是否需要循环播放。

<video autoplay="autoplay" src="mp4/a.mp4" loop="loop"></video>

preload:用于预加载视频,但是需要注意preload和autoplay相冲,如果设置autopley属性,preload失效。

muted:静音

width:视频播放的宽度

height:视频播放的高度

相关文章

  • 认识HTML一一video标签

    video标签 我们之前只能处理两种数据:1,文本数据,2,图片数据 现在我们来看一下什么是video标签? 作用...

  • 认识HTML一一marquee标签

    marquee标签 是什么? 跑马灯效果,如图所示: 注意点: marquee标签不是W3C推荐的标签,在W3C官...

  • 认识HTML一一datalist标签

    1.datalist标签 作用:给输入框绑定待选项 2.datalist格式 待选项的内容 我们做一个形状类似于百...

  • 认识HTML一一Label标签(掌握)

    LabeI标签 1.默认情况下文字和输入框是没有关联关系的。也就是说点击文字输入框不会聚焦,如果想点击文字时让对应...

  • ## HTML基础-多媒体标签

    ## HTML基础-多媒体标签 # video标签 # audio标签 # marquee标签(跑马灯) H5新增...

  • 关于HTML5的audio标签和video标签删除下载图标

    关于HTML5的audio标签和video标签删除下载图标 - a+b!=c - 博客园 设置css video:...

  • HTML5之标签

    在HTML5的新特性中增加了对原生视频文件的支持,可以在播放视频时无需Flash插件。 页面中嵌入视频 对于有些浏...

  • 让所有浏览器支持HTML5 video视频标签

    1.兼容video标签的必要性随着HTML5的定稿,在HTML5的时代里,基本上只要一个 video 标签加一个视...

  • Vue小记

    一. Vue使用小问题 Video标签问题公众号的微信活动网页里添加视频,用到了HTML5的新标签 ,video标...

  • ## HTML基础-认识HTML

    ## HTML基础-认识HTML # head标签 # title标签 # body标签 # meta标签(字符集...

网友评论

      本文标题:认识HTML一一video标签

      本文链接:https://www.haomeiwen.com/subject/dnmnnqtx.html