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 相关文章推荐
CSS3轻松实现圆角效果
Nov 09 HTML / CSS
CSS3属性选择符介绍
Oct 17 HTML / CSS
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
Mar 22 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
Canvas图片分割效果的实现
Jul 29 HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 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+mysql 实现身份验证代码
2010/03/24 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python装饰器使用示例及实际应用例子
2015/03/06 Python
django定期执行任务(实例讲解)
2017/11/03 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
softmax及python实现过程解析
2019/09/30 Python
python 循环数据赋值实例
2019/12/02 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
使用Django清空数据库并重新生成
2020/04/03 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
python中return如何写
2020/06/18 Python
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
演讲稿格式范文
2014/05/19 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
护士岗位竞聘书
2015/09/15 职场文书
Django rest framework如何自定义用户表
2021/06/09 Python