课时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标签中的一摸一样,两个都设置可能会导致变形,所以只推荐设置一个


课时53.video标签(掌握)的更多相关文章
- 课时53.video标签第二种格式(掌握)
由于视频数据非常非常的重要,所以五大浏览器厂商都不愿意支持别人都视频格式,所以导致了没有一种视频格式是所有浏览器都支持的,这个时候W3C为了解决这个问题,所以推出了第二种video标签的格式 如何查看 ...
- 用HTML5 video标签插入视频,在谷歌浏览器上播放视频时,右下角显示的下载按钮怎么去掉
使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...
- 去掉谷歌浏览器 video标签下的下载按钮
一.判断浏览器版本(区分谷歌和360浏览器) function myBrowser(){ var userAgent = navigator.userAgent; //取得浏览器的userAgent字 ...
- HTML5 audio与video标签实现视频播放,音频播放
随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签. <audio> 标签属性 <audio src="song.mp3&quo ...
- 巧用transform实现HTML5 video标签视频比例拉伸
前言 原文地址 曾几何时,项目中有碰到视频比例拉伸的需求,但是发现这个看似再普通不过的一个需求,找遍全网至今都没有找到解决方法.因为强制给video标签设置width和height的话只会将video ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载au ...
- HTML5 video标签播放视频下载原理
HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...
- HTML5的Video标签的属性,方法和事件汇总
<video>标签的属性 src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览 ...
- video标签的属性和方法总结
最近想做一个弹幕插件,查了很多video标签的属性和方法 error属性 在正常读取时候,使用媒体数据的过程中,video元素或audio元素的error属性为null,但是任何时候只要出现错误,er ...
随机推荐
- 《Head First 设计模式》之工厂模式
工厂模式(Factory) 依赖倒置原则(Dependency Inversion Principle):依赖抽象,不要依赖具体类. 变量不可以持有具体类的引用.(如果使用new,就会持有具体类的引用 ...
- Git更新或提交出错的解决办法
一.舍弃本地代码,用远端版本覆盖本地版本. 当自己本地修改很少,更新代码出现冲突时,“error: Your local changes to the following files would be ...
- CSS清浮动方法总结
浮动----会使当前标签产生上浮效果,从而导致父标签高度塌陷的问题 1. 给父元素指定高度 <div style="height:200px"> <div sty ...
- mongodb添加登陆验证
mongodb添加登陆验证 转载地址 清空log,db目录 mongod --auth --logpath "D:\mongodb\log\log.log" --logappend ...
- Vue2.0的动画效果
本文只是结合一些代码和图片加强对Vue动画的理解,更多资料请戳这里 结合原生CSS实现动画 下面是一张图片,简单清晰明了是吧^-^ 下面是一段代码 <!DOCTYPE html> < ...
- 谈谈CSS性能
CSS性能优化 1.衡量属性和布局的消耗代价: 2.探索W3C的性能优化新规范: 3.用测试数据判断优化策略. 慎重选择高消耗的样式 1.box-shadows; 2.border-radius; 3 ...
- centos aws 修改使用密码ssh登录
因为使用pem登录有很多局限性,在此修改为用密码但不是root登录 1.关闭selinux(要重启) vi /etc/selinux/config SELINUX=disabled 2.重置root密 ...
- Linux ->> UBuntu 14.04 LTE下安装Hadoop 1.2.1(伪分布模式)
Hadoop的运行模式可分为单机模式.伪分布模式和分布模式. 首先无论哪种模式都需要安装JDK的,这一步之前的随笔Ubuntu 14.04 LTE下安装JDK 1.8中已经做了.这里就不多说了. 其次 ...
- 远程计算机或设备将不接受连接,IE无法上网
遇到一个奇葩问题,IE浏览器突然不能上网了,但是其他浏览器可以,QQ什么的也都正常,只有IE是出现:远程计算机或设备将不接受连接 这个问题,网上找了很多答案都没用,什么设置WINS,允许远程访问,取消 ...
- easyui学习笔记11—tab标签页和鼠标动作
这篇我们看看标签页是怎么实现的,默认情况下要靠点击切换标签,也可以用鼠标切换标签选项,就是鼠标放在标签上切换. 首先看看引用的资源文件 1.资源文件 <head> <meta cha ...