h5视频标签 video
video标签,用来播放视频的
基本上所有的浏览器都支持
video支持的视频格式有:
mp4 mime-type: video/mp4
WebM mime-type: video/WebM
Ogg mime-type:video/Ogg
video 播放视频的两种写法
第一种:
<video src="01.mp4"> </video>
第二种:
<video>
<source src="01.mp4" type="video/mp4" />
<source src="01.WebM" type="video/WebM">
</video>
这两种写法的区别?
当你知道,你的视频格式的时候,可以用第一种;
当你不知道,你的视频格式的时候,建议使用第二种;
video的属性:
autoplay 自动播放 属性值 :autoplay
controls 显示控件 属性值:controls
loop 循环播放 属性值:loop
muted 静音 属性值:muted
poster 视频下载时的图片 属性值:图片路径
preload 视频在页面加载的时候进行加载,并预备播放(与autoplay冲突,autoplay是加载完直接播放) 属性值:preload
src 播放视频的url 属性值:视频的url
width video的宽
height video的高
h5视频标签 video的更多相关文章
- HTML5视频标签video
现阶段,我们要在网页中嵌入视频的最可靠最常用的办法是使用Flash,通过使用<object>和<embed>标签,就可以通过浏览器播放swf,flv等格式视频文件,但是前提是浏 ...
- H5 基本标签使用 浅析 (含video标签、input表单等)
1. 音频标签<audio> <audio src = “./music/Alone.mp3” controls autoplay loop = “3” ></audio ...
- html5音频和视频标签
在html5之前的版本中如果想要在网页中插入音频和视频必须要安装插件才可以,比如最常见的flash插件.很多人在刚安装一款浏览器的时候都会遇到浏览器建议安装flash插件,在移动端也是如此.如果想要在 ...
- android--------WebView实现 Html5 视频标签加载
自Android 4.4起,Android中的WebView开始基于Chromium(谷歌浏览器)支持浏览器的一系列功能,webkit解析网页各个节点,这个改变,使得WebView的性能大幅度提升,并 ...
- html5-8 如何控制html5中的视频标签和音频标签
html5-8 如何控制html5中的视频标签和音频标签 一.总结 一句话总结:找到视频或者音频的element对象,然后查手册看对应的方法或者属性就可以,里面有控制的. 1.如何控制html5中的视 ...
- HTML5添加 video 视频标签后仍然无法播放的解决方法 IIS添加MIEI类型
现象:插入如下代码后仍然无法看视频(注:视频已确认为浏览器支持格式) <video controls="controls" width="500px" h ...
- HTML video 视频标签全属性详解
HTML 5 video 视频标签全属性详解 现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.C ...
- HTML5 video 视频标签全属性详解
现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE ...
- HTML 5 video 视频标签全属性详解
Video标签的使用 Video标签含有src.poster.preload.autoplay.loop.controls.width.height等几个属性, 以及一个内部使用的标签<sour ...
随机推荐
- Strust2+POI导出exel表格且解决文件名中文乱码/不显示
下载并导入项目[poi.3.17.jar] strust.xml <action name="returnLate_*" class="com.stureturnl ...
- 多條件查詢SQL語句
表结构如下: –1.学生表 Student(s_id,s_name,s_birth,s_sex) –学生编号,学生姓名, 出生年月,学生性别 –2.课程表 Course(c_id,c_name,t_i ...
- Javascript高级面试
原型 异步 一.什么是单线程,和异步有什么关系 单线程:只有一个线程,同一时间只能做一件事原因:避免DOM渲染的冲突解决方案:异步 为什么js只有一个线程:避免DOM渲染冲突 浏览器需要渲染DOM J ...
- ubuntu系统更新命令
一.图形界面更新升级 1.点击”系统设置“,打开“软件和更新”,切到“更新”栏目进行更新设置. 2.可以通过软件更新器进行更新升级自己想要更新的 二.命令方式更新升级 1.先解锁 ps -e|grep ...
- STL容器概述
STL容器 1.容器概述 1.1.容器分类 1.1.1.顺序容器:提供对元素序列的访问,顺序容器为元素连续分配内存或将元素组织为链表,元素的类型是容器成员value_type. 顺序容器 说明 vec ...
- luogu P5340 [TJOI2019]大中锋的游乐场
传送门 要求经过路径汉堡的点和可乐的点个数之差绝对值\(\le k\),所以可以考虑dp,\(f_{i,j}\)表示到点\(i\),汉堡的点个数减可乐的点的个数为\(j\)的最短距离,注意一下负下标处 ...
- WindowsForms使用Telerik Reporting
新建一个WindowsForms窗体项目 然后拖动ReportViewer这个控件到WindowsForms的窗体中 如上图所示,用来呈现报表的控件,这个控件可以打印报表,转换报表这类的功能 接下来我 ...
- python2和3的一些区别,编码方式
python2与python3的区别: #python2 print() print'abc' #range() xrange()生成器 #raw_input()#python3 #print('ab ...
- 通过METAMASK调试和发布智能合约指南(转载)
2017-12-07 芯链团队 小明微思考 原文地址:https://mp.weixin.qq.com/s?__biz=MzA4Mzk2MzUzNg==&mid=2651223347& ...
- Maven项目的一些依赖
Maven构建的Spring项目需要哪些依赖? <!-- Spring依赖 --> <!-- 1.Spring核心依赖 --> <dependency> <g ...