HTML5 video 视频标签使用介绍


Posted in HTML / CSS onFebruary 03, 2014

HTML <video> 适用于HTML 5+,用于定义在线观看的视频流媒体。

复制代码
代码如下:

<video width="320" height="240" src="https://3water.com/movie.ogg" controls="controls">
这里是注释文字,如果无法支持 HTML 5 浏览器将显示这里的文字。如果支持,就直接显示视频,忽略文字。
</video>

在HTML 4 及以前,如果您想在网页中嵌入在线观看的视频,一般都需要使用Flash视频流,通过使用 <object> 和 <embed> 标签,就可以通过浏览器播放swf、flv等格式视频文件,但是前提是浏览器必须安装第三方插件:Adobe Flash Player。而现代智能手机和iPad等一般都无法支持Flash,所以无法浏览网页上的视频。而 HTML 5 改变了这一事实,Web开发者只需要使用 <video> 标签就可以轻松加载视频文件,而不需要任何第三方插件。

属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height 像素值 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload auto/meta/none 规定是否预加载视频,可能的值:auto - 当页面加载后载入整个视频meta - 当页面加载后只载入元数据none - 当页面加载后不载入视频
* src 视频地址 要播放的视频的 URL,建议使用绝对地址。
width 像素值 设置视频播放器的宽度。

如何写兼容的视频标签?

由于旧的浏览器和Internet Explorer不支持<video>元素,考虑到兼容性,我们必须为这些浏览器找到一个支持Flash文件的解决方案。不幸的是,和HTML 5音频一样,涉及到视频的文件格式,Firefox 和 Safari/Chrome 的支持方式并不相同。因此,如果你想在这个时候使用HTML 5视频,则需要创建三个视频版本。OGG,MP4,FLV/SWF

复制代码
代码如下:

<video width="320" height="240" controls>
<!-- 兼容 Firefox -->
<source src="https://3water.com/ movie.ogg" type="video/ogg" />
<!-- 兼容 Safari/Chrome-->
<source src="https://3water.com/ movie.mp4" type="video/mp4" />
<!-- 如果浏览器不支持video标签,则使用flash -->
<embed src="https://3water.com/ movie.swf" type="application/x-shockwave-flash"
width="320" height="240" allowscriptaccess="always" allowfullscreen="true"></embed>
</video>
HTML / CSS 相关文章推荐
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
CSS3实现精美横向滚动菜单按钮
Apr 14 HTML / CSS
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
Jun 03 HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 HTML / CSS
css3实例教程 一款纯css3实现的环形导航菜单
Oct 20 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
Jan 30 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
html5 自定义播放器核心代码
Dec 20 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
Nov 16 HTML / CSS
HTML5 播放 RTSP 视频的实例代码
Jul 29 HTML / CSS
Canvas波浪花环的示例代码
Aug 21 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 #HTML / CSS
html5画布旋转效果示例
Jan 27 #HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 #HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 #HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 #HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 #HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 #HTML / CSS
You might like
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
PHP异常处理浅析
2015/05/12 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
JavaScript学习笔记(十)
2010/01/17 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
javascript中this关键字详解
2016/12/12 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
编写v-for循环的技巧汇总
2020/12/01 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
跟老齐学Python之数据类型总结
2014/09/24 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
python实现mean-shift聚类算法
2020/06/10 Python
详解如何修改python中字典的键和值
2020/09/29 Python
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
天游软件面试
2013/11/23 面试题
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
年度考核自我鉴定
2013/11/09 职场文书
安全员岗位职责
2013/11/11 职场文书
决心书标准格式
2014/03/11 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS