073_html5视频

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

2. Web上的视频

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

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

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

2.4. <video>标签定义视频, 比如电影片段或其他视频流。

3. 视频格式

3.1. 当前, video元素支持三种视频格式:

3.2. Ogg: 带有Theora视频编码和Vorbis音频编码的Ogg文件。

3.3. MPEG4: 带有H.264视频编码和AAC音频编码的MPEG 4文件。

3.4. WebM: 带有VP8视频编码和Vorbis音频编码的WebM文件。

4. <video>标签的属性

5. <source>标签

5.1. <source>标签为媒介元素(比如: <video>和<audio>)定义媒介资源。

5.2. <source>标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

5.3. 可能的属性

6. 如何工作

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

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

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

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

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

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

6.5. 上面的例子使用一个Ogg文件, 适用于Firefox、Chrome浏览器。要确保适用于Safari浏览器, 视频文件必须是MPEG4类型。video元素允许多个source元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:

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

7. 例子

7.1. 代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>html5视频</title></head><body><video width="320px" height="240px" controls="controls"><source src="movie.ogg" type="video/ogg" /><source src="movie.mp4" type="video/mp4" />Your browser does not support the video tag.</video></body>
</html>

7.2. 效果图

073_html5视频相关推荐

2022-2028年中国安防视频行业市场前景分析预测报告
[报告类型]产业研究 [报告价格]4500起 [出版时间]即时更新(交付时间约3个工作日) [发布机构]智研瞻产业研究院 [报告格式]PDF版本报告介绍了中国安防视频行业市场行业相关概述.中国安防视 ...
OpenCV 笔记（03）— 读取视频、通过摄像头采集视频、采集视频 canny 边缘检测
我们本节学习如何利用 OpenCV 中的 VideoCapture 类,来对视频进行读取显示,以及调用摄像头. VideoCapture 它提供了从摄像机或视频文件捕获视频的 C++ 接口, 作用是从 ...
Python+OpenCV 图像处理系列（2）—— 视频捕获、播放和保存
1.视频捕获为了获取视频,首先需要创建一个 VideoCapture 类对象.它的参数可以是设备的索引号,或者是一个视频文件.设备索引号就是在指定要使用的摄像头.一般的笔记本电脑都有内置摄像头.所以 ...
软件工程——视频总结
前言: 机房结束后,拖拖拉拉的开始看<软工视频>.中间停过一周的时间,视频没有进展.后来又开始了"追补"之前没有认真完成的事情.视频很快的看完了,开始的时候看,每个都会 ...
【快速上手mac必备】常用优质mac软件推荐(音视频、办公、软件开发、辅助工具、系统管理、云存储)
本文章的主要内容是我作为一名大四学生.准程序员.up主这三种身份来给大家推荐一下 mac 上好用的软件以及工具.本人也是从去年9月份开始从windows阵营转移到了mac阵营,刚开始使用的时候,也曾主 ...
2021 年音视频技术与发展
2021 年音视频技术与发展 2021 年,音视频技术的应用场景已随处可见,从游戏场景「吃鸡」.电商场景直播连麦.教育场景授课答题,再到金融场景银行视频开户等都有身影.那么,回望今年音视频领域到底有哪 ...
Xilinx低比特率高品质 ABR 视频实时转码（HPE 参考架构）
Xilinx低比特率高品质 ABR 视频实时转码(HPE 参考架构) 介绍对实时视频流的需求给视频服务提供商带来了严峻挑战,必须在管理基础设施和互联网带宽运营成本,还要为客户提供高质量体验.鉴于视 ...
Linux实现ffmpeg H.265视频编码
Linux实现ffmpeg H.265视频编码几乎所有观看的视频,数字地面电视,电缆,卫星或互联网上的压缩.原始的,未压缩的视频太大,会浪费太多的带宽.在DVD和Blu-ray之前,有视频CD(VC ...
iOS视频硬编码技术
iOS视频硬编码技术一．iOS视频采集硬编码基本原理硬编码 & 软编码硬编码:通过系统自带的Camera录制视频,实际上调用的是底层的高清编码硬件模块,即显卡,不使用CPU,速度快软 ...

073_html5视频

073_html5视频相关推荐

最新文章

热门文章