HTML5: HTML5 Video(视频)
ylbtech-HTML5: HTML5 Video(视频) |
1.返回顶部 |
HTML5 Video(视频)
很多站点都会使用到视频. HTML5 提供了展示视频的标准。
检测您的浏览器是否支持 HTML5 视频:
Web站点上的视频
直到现在,仍然不存在一项旨在网页上显示视频的标准。
今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
浏览器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素.
注意: Internet Explorer 8 或者更早的IE版本不支持 <video> 元素。
HTML5 (视频)- 如何工作
如需在 HTML5 中显示视频,您所有需要的是:
实例
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
<video> 元素提供了 播放、暂停和音量控件来控制视频。
同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度,所需的视频空间会在页面加载时保留。如果没有设置这些属性,浏览器不知道大小的视频,浏览器就不能再加载时保留特定的空间,页面就会根据原始视频的大小而改变。
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:
视频格式与浏览器的支持
当前, <video> 元素支持三种视频格式: MP4, WebM, 和 Ogg:
浏览器 | MP4 | WebM | Ogg |
---|---|---|---|
Internet Explorer | YES | NO | NO |
Chrome | YES | YES | YES |
Firefox | YES | YES | YES |
Safari | YES | NO | NO |
Opera | YES (从 Opera 25 起) | YES | YES |
- MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
- WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
- Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
视频格式
格式 | MIME-type |
---|---|
MP4 | video/mp4 |
WebM | video/webm |
Ogg | video/ogg |
HTML5 <video> - 使用 DOM 进行控制
HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。
<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.
其中的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。其中的 DOM 事件能够通知您,比方说,<video> 元素开始播放、已暂停,已停止,等等。
例中简单的方法,向我们演示了如何使用 <video> 元素,读取并设置属性,以及如何调用方法。
实例 1
为视频创建简单的播放/暂停以及调整尺寸控件:
上面的例子调用了两个方法:play() 和 pause()。它同时使用了两个属性:paused 和 width。
更多参考请查看 HTML5 Audio/Video DOM 参考手册。
HTML5 Video 标签
标签 | 描述 |
---|---|
<video> | 定义一个视频 |
<source> | 定义多种媒体资源,比如 <video> 和<audio> |
<track> | 定义在媒体播放器文本轨迹 |
2.返回顶部 |
3.返回顶部 |
4.返回顶部 |
5.返回顶部 |
6.返回顶部 |
![]() |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
HTML5: HTML5 Video(视频)的更多相关文章
- HTML5添加 video 视频标签后仍然无法播放的解决方法 IIS添加MIEI类型
现象:插入如下代码后仍然无法看视频(注:视频已确认为浏览器支持格式) <video controls="controls" width="500px" h ...
- 【HTML5】video视频
当前,video 元素支持三种视频格式: 格式 IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ No MPEG 4 9.0+ No No 5 ...
- html5开发<video>视频字幕的程序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8 ...
- HTML5将<video>视频设置为页面动态背景
<!DOCTYPE html><html><head> <title>Operation Aborted Example</title> & ...
- HTML5 Video(视频)
HTML5 Video(视频) 很多站点都会使用到视频. HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 Web站点上的视频 直到现在,仍然不存在一项旨在网页上显 ...
- html5 音频和视频(audio And video)
1.音频和视频 Web 上的视频 直到现在,仍然不存在一项旨在网页上显示视频的标准. 今天,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定 ...
- 在使用html5的video标签播放视频时为何只有声音却没有图像
在使用html5的video标签播放视频时为何只有声音却没有图像? 答:使用格式化工厂转个编码就行了,MP4有3种编码,mpg4(xdiv),,mpg4(xvid),avc(h264)转换成H264编 ...
- The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)
http://jplayer.org/ The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open s ...
- 利用HTML5的Video进行视频截图并保存到本地
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- jmeter添加自定义扩展函数之DoubleSum
1,打开eclipse,新建maven工程,在pom中引用jmeter核心jar包,具体请看---https://www.cnblogs.com/guanyf/p/10863033.html---,这 ...
- SPRING CLOUD微服务DEMO-上篇
目录 1. 微服务架构 2. 远程调用方式 2.1 RPC/RMI 2.2 Http 2.3 如何选择 3. Http客户端工具 3.1 RestTemplate 4. Spring Boot 搭建项 ...
- [已解决]报错: Could not install packages due to an EnvironmentError: [Errno 13] Permission denied: '/Users/mac/Ana
报错代码: pip3 install gerapy 报错内容: Could not install packages due to an EnvironmentError: [Errno 13] Pe ...
- SQL语句优化方式--进阶篇
MYSQL性能 最大数据量 抛开数据量和并发数,谈性能都是扯淡(扯的最疼的那种).Mysql没有限制单表最大记录数,它取决与操作系统对文件大小的限制 文件系统 单文件大小限制 FAT32(采用32位二 ...
- [fw]IDT表的初始化
IDT表的初始化 linux内核的中断描述符表IDT是一个全局的数据,在i386平台上被定义为: struct desc_struct idt_table[256] __attribute__((_ ...
- 重读ORB_SLAM之LoopClosing线程难点
1. DetectLoop 这里有个ConsistenGroup概念,比较难懂.这里是最让人迷惑的地方.一旦vbConsistentGroup为真,其他帧的spCanditateGroup就进不来了. ...
- 关于dom获取元素的几种方式
原文链接:https://blog.csdn.net/levinhax/article/details/71274456 获取元素DOM对象有很多种方法,以前一直在用getElementById和ge ...
- jackson的readTree有坑
{"}] readTree认为上面的字符是json,坑啊 alibaba的fastjson 无论JSONObject.parseObject还是JSONObject.parseObject ...
- 大哥带我走渗透4(中)----oracle报错注入
5/30 报错注入 0x01 准备阶段 1. 基础知识今天了解了,但是,只能看懂和最基本的理解,不能自己上路.所以,还是要不停学习基础.并且及时总结.这有一篇很详细的文章:https://www.cn ...
- bootstrap.yml
spring: jpa: properties: hibernate.enable_lazy_load_no_trans: true application: name: paycore cloud: ...