HTML5 视频 Video
文章目录
- HTML5 视频 Video
- Web站点上的视频
- 浏览器支持
- HTML5 (视频)- 如何工作
- 视频格式与浏览器的支持
- 视频格式
- HTML5 \<video> - 使用 DOM 进行控制
- HTML5 Video 标签
HTML5 视频 Video
很多站点都会使用到视频. HTML5 提供了展示视频的标准。
Web站点上的视频
直到现在,仍然不存在一项旨在网页上显示视频的标准。
今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
浏览器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素.
注意: Internet Explorer 8 或者更早的IE版本不支持 元素。
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> 元素,读取并设置属性,以及如何调用方法。
HTML5 Video 标签
标签 | 描述 |
---|---|
<video> | 定义一个视频 |
<source> | 定义多种媒体资源,比如 和 |
<track> | 定义在媒体播放器文本轨迹 |
HTML5 视频 Video相关推荐
- html5 video 在线视频,HTML5 视频(Video)
HTML5 视频(Video) 为了更好的展示内容,很多站点都会使用到视频, HTML5 提供了展示视频的标准. 检测您的浏览器是否支持 HTML5 视频: 检测 互联网上的视频 一直到现在,还没有一 ...
- html5视频video不全屏播放
最近项目用到了html5 的video 视频播放.但是视频在我们的div 中居然是左右占满,上下居中的. 这效果如图: 丑不拉几的.效果也不好.满心的纠结啊. 怎么办了.我们通过css 样式进行解决 ...
- html5 video视频资源保护,HTML 5 视频(video)
video 元素支持三种视频格式 IE Firefox Opera Chrome Safari 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 No 3.5+ 10.5+ 5. ...
- html5声频audio和视频video
html5作为下一代web标准,年前轩起了html5热潮.对于html5我只是本着了解看看.关于html5和RIA(silverlight,flash,JavaFx等)我不想说什么,也没有什么可说的, ...
- HTML5 视频转换软件 Freemake Video Converter
为什么80%的码农都做不了架构师?>>> HTML5的Video标签可以说算是HTML5的重头戏,各大浏览器都纷纷响应,现代浏览器都能支持Video标签,基于Video标签的播 ...
- h5禁用浏览器下载视频_【HTML5】video 标签禁用自带的下载按钮
h5自带的 video标签 ,会有个下载按钮,有时候想避免,就可以利用样式的方法 video::-internal-media-controls-download-button { display:n ...
- html5 video播放按钮放在中间,在html5视频控制区跟踪点击播放按钮(Track clicks to play button in html5 video control area)...
在html5视频控制区跟踪点击播放按钮(Track clicks to play button in html5 video control area) 我点击了一张HTML5视频播放海报,并点击了控 ...
- 平板电脑支持html吗,HTML5视频无法在平板电脑上播放(HTML5 video not playing on tablets)...
HTML5视频无法在平板电脑上播放(HTML5 video not playing on tablets) 下午好,我早些时候发布了一些内容,但仍然需要帮助. 我有一个Nexus 7和一个IPad2. ...
- jquery video全屏_用videojs让HTML5视频在移动端全屏的方法
用videojs让HTML5视频在移动端全屏的方法 文章标签: 视频 : 04-10 19:23 : 1859次 : 0条 1赞 点赞 简介在使用videojs插件时,如何让HTML5的视频在移动端里 ...
最新文章
- 我的第一个纯手写jQuery插件
- IRP和IO_STACK_LOCATION结构
- initdz linux挖坑病毒分析
- css 两边到中间 渐变_css3渐变过渡机制
- SAP收货时自动创建采购订单
- php fpm高并发,php-fpm 高并发、502解决方案
- 数据库事务 写偏斜write-skew
- vscode推荐插件的安装
- 这就是艺术「GitHub 热点速览 v.22.25」
- yolov3原理解析及代码流程
- 从0开发《工程测绘大师》小程序之6°带中央子午线计算篇(八)
- AsyncTask我来给你扯会蛋
- android 清除某个通知,android清除通知栏消息
- ajax获取qq音乐源码,jsonp的运用(获取qq音乐首页数据)以及用Promise的封装
- 【无标题】对于_, predicted = torch.max(outputs.data, 1)的理解
- log日志中输出log所在类,方法和行数
- 网络爬虫工作原理分析
- 【数据库】MySQL入门
- 三分钟熟悉进制转换与位运算
- python列表转字典
热门文章
- 深入理解Android相机体系结构之九
- Google GWT
- CouchDB使用小记
- 《Read, Listen, and See: Leveraging Multimodal Information Helps Chinese Spell Checking》阅读记录
- 51nod 1597 有限背包计数问题 DP 根号分治
- windows10/11通过蓝牙传输文件
- 普通人职场自我反省十条
- WIN10桌面图标变成白文件的一种解决方法
- 构建一个透明的activity
- AliMe Chat: A Sequence to Sequence and Rerank based Chatbot Engine论文笔记