HTML5学习笔记 视频
2024-09-04 05:11:26
许多时髦的网站都提供视频。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元素开始播放,已暂停,等等。
最新文章
- android Content Provider介绍
- hypervisor与VMware共存方法
- linux基本工具使用(二)
- IOS s数据存储之归档解档
- 33Mybatis------Mapper的编写
- java笔记--超级类Object多线程的应用+哲学家进餐算法内部类与多线程结合
- CameraFacingBillboard
- mongo链接报错:couldn&#39;t connect to server 127.0.0.1:27017 (127.0.0.1)
- 使用fragment兼容低版本的写法
- JavaBean技术
- 在ASM中移动数据文件
- Android Studio 复制粘贴图片到drawable文件夹没有效果 - 解决方法
- 关于position和float的用法!
- 对于Java泛型的理解
- linux内核自旋锁API
- 扫码下单与ERP客户端锁桌功能FAQ
- JS 获取某个容器控件中id包含制定字符串的控件id列表
- ADO SQL手写分页
- jQuery 基础语法
- 一款优秀的前端框架——AngularJS
热门文章
- HDU 6057 Kanade&#39;s convolution(FWT)
- Problem E: 零起点学算法97——进制转换
- 20172333 2017-2018-2 《Java程序设计》第2周学习总结
- 【MySQL笔记】字符串、时间日期转换
- python多线程以及同步队列(转)
- HDU 4664 Triangulation(2013多校6 1010题,博弈)
- Web API使用记录系列(三)Web API与Owin
- 改变element-ui滚动条设置,
- Unicode中的BOM
- cocos2d-x Cygwin编译 recipe for target `obj/local/armeabi/libcocos2d.so&#39; fail 解决办法