许多时髦的网站都提供视频。html5提供了展示视频的标准

检测您的浏览器是否支持html5视频

Web上的视频

直到现在,仍然不存在一项旨在网页上显示视频的标准。

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

html5规定了一种通过video元素来包含视频的标准方法。

视频格式

当前,dideo元素支持三种视频格式:

格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

Ogg=带有Theora视频编码和Vorbis音频编码的Ogg文件

MPEG4=带有H.264视频编码和AAC音频编码的MPEG4文件

WebM=带有VP8视频编码和Vorbis音频编码的WebM文件。

视频格式

mp4                          dideo/mp4

WebM         video/webm

Ogg          video/ogg

如何工作

如需在html5中显示视频,您所有需要的是:

<video src="movie.ogg" controls="controls">
</video>

control属性供添加播放、暂停和音量控件。

包含宽度和高度属性也是不错的主意。

video与video之间插入的内容是供不支持video元素的浏览器显示的:

实例

<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>

使用DOM进行控制

html5<video>和<audio>元素同样拥有方法,属性和事件

<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.

其中的方法有用于播放,暂停及加载等。其中的属性(比如时长,音量)可以被读取或设置。其中的DOM事件能够通知您,比方说video元素开始播放,已暂停,等等。

最新文章

  1. android Content Provider介绍
  2. hypervisor与VMware共存方法
  3. linux基本工具使用(二)
  4. IOS s数据存储之归档解档
  5. 33Mybatis------Mapper的编写
  6. java笔记--超级类Object多线程的应用+哲学家进餐算法内部类与多线程结合
  7. CameraFacingBillboard
  8. mongo链接报错:couldn&#39;t connect to server 127.0.0.1:27017 (127.0.0.1)
  9. 使用fragment兼容低版本的写法
  10. JavaBean技术
  11. 在ASM中移动数据文件
  12. Android Studio 复制粘贴图片到drawable文件夹没有效果 - 解决方法
  13. 关于position和float的用法!
  14. 对于Java泛型的理解
  15. linux内核自旋锁API
  16. 扫码下单与ERP客户端锁桌功能FAQ
  17. JS 获取某个容器控件中id包含制定字符串的控件id列表
  18. ADO SQL手写分页
  19. jQuery 基础语法
  20. 一款优秀的前端框架——AngularJS

热门文章

  1. HDU 6057 Kanade&#39;s convolution(FWT)
  2. Problem E: 零起点学算法97——进制转换
  3. 20172333 2017-2018-2 《Java程序设计》第2周学习总结
  4. 【MySQL笔记】字符串、时间日期转换
  5. python多线程以及同步队列(转)
  6. HDU 4664 Triangulation(2013多校6 1010题,博弈)
  7. Web API使用记录系列(三)Web API与Owin
  8. 改变element-ui滚动条设置,
  9. Unicode中的BOM
  10. cocos2d-x Cygwin编译 recipe for target `obj/local/armeabi/libcocos2d.so&#39; fail 解决办法