HTML5中如何显示视频呢 HTML5视频播放demo


Posted in HTML / CSS onJune 08, 2013

今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。
在HTML5中,video元素目前支持三种格式的视频文件,
1.Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
2.MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
3.WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

那么在HTML5中如何显示视频呢?例子如下:

复制代码
代码如下:

<video src="demo.mp4" width="500" height="250" controls="controls">您的浏览器不支持此种视频格式。</video>

好了,现在来解释下video元素中各属性的含义,其中width、height就不解释了啊,主要说下controls,顾名思义,controls 就是控件们,哈哈,就是视频的播放、音量暂停等控件。video元素中间插入的汉字,聪明的你一定知道的,是提示用户浏览器不支持视频格式使用的。

需要注意的是,要确保适用于Safari 浏览器,视频文件必须是 MP4类型。而ogg格式的视频则是适用于Firefox、Opera 以及Chrome 浏览器。Internet Explorer 8 不支持 video 元素。在 IE 9 中,将提供对使用 MPEG4 的 video 元素的支持。

当然了,我们如果不确定自己的浏览器支持什么格式的视频,可以先检测一下,检测方法在另一片博文里有,感兴趣的可以去看一下。若是不想麻烦,那怎么办呢?我们可以这样:

复制代码
代码如下:

<video width="500" height="250" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
您的浏览器不支持此种视频格式。
</video>

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式,这样我们只要多准备几个不同格式的视频就可以了。
接下来,介绍几个video标签的属性,
1.autoplay :出现该属性意味着视频在就绪后将自动播放,用法:autoplay="autoplay"
2.controls :出现该属性意味着向用户显示控件,如播放按钮等,用法:controls="controls"
3.height:设置高度
4.width:设置宽度
5.loop:自动重播,用法:loop="loop"
6.preload:视频在页面加载时进行加载并预备播放,用法:preload="auto"
auto - 当页面加载后载入整个视频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入视频
注意:若使用了autoplay,则忽略preload
7.src:要播放视频的url
HTML / CSS 相关文章推荐
css3实现多个元素依次显示效果
Dec 12 HTML / CSS
解决margin 外边距合并问题
Jul 03 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
微信浏览器左上角返回按钮拦截功能
Nov 21 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 #HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
Jun 06 #HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
May 20 #HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 #HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 #HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 #HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 #HTML / CSS
You might like
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
Web开发之JavaScript
2012/03/29 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
学习python类方法与对象方法
2016/03/15 Python
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
Python读取图片属性信息的实现方法
2016/09/11 Python
一道python走迷宫算法题
2018/01/22 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
关于numpy数组轴的使用详解
2019/12/05 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
食品安全责任书
2014/04/15 职场文书
节能减耗标语
2014/06/21 职场文书
旅游项目合作意向书
2015/05/08 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书