html5 video 在线视频,HTML5 视频(Video)

HTML5 视频(Video)

为了更好的展示内容，很多站点都会使用到视频， HTML5 提供了展示视频的标准。

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

检测

互联网上的视频

一直到现在，还没有一个统一的显示视频的标准。

我们看到的视频，大多数是通过插件(比如 Flash)来显示的。不是所有浏览器都拥有一样的插件。

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

浏览器支持元素列表

Firefox

Chrome

Safari

Opera

注意: Internet Explorer 8 或者更早的IE版本不支持元素。

HTML5 视频 - 如何工作

如需在 HTML5 中显示视频，您需要的是下述实例中的代码：

视频实例

您的浏览器不支持 Video 标签。

尝试一下 »

元素提供了播放、暂停和音量控件来控制视频。

同时元素还提供了 width 和 height 属性控制视频的尺寸。如果设置了高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器就不能在加载时保留特定的空间，页面会根据原始视频的大小而改变。

与标签之间插入的内容是用于给不支持 video 元素的浏览器显示的。

元素支持多个元素。元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

视频格式与浏览器的支持

当前，元素支持三种视频格式： MP4, WebM, 和 Ogg：

浏览器

MP4

WebM

Ogg

Internet Explorer

YES

Chrome

YES

Firefox

YES

Safari

YES

Opera

YES (从 Opera 25 起)

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 - 使用 DOM 进行控制

HTML5 和元素同样拥有方法、属性和事件。

和元素的方法、属性和事件可以使用JavaScript进行控制。

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

上述简单实例演示了如何使用元素，读取并设置属性，以及如何调用方法。

下面是 video 实例，为视频创建简单的播放/暂停以及调整尺寸控件：

video 实例

播放/暂停

放大

缩小

普通

你的浏览器不支持 HTML5 video.

此实例调用了两个方法：play() 和 pause()。它同时使用了两个属性：paused 和 width。

尝试一下 »

HTML5 Video 标签

标签

描述

定义多种媒体资源,比如和

定义在媒体播放器文本轨迹

html5 video 在线视频,HTML5 视频(Video)相关推荐

html5 swf在线播放,html5怎样播放swf格式的视频
假如swf文件名为demo.swf跟html页面在同一目录下,代码如下:如果浏览器支持html5的video标签<videosrc="demo.swf"controls/&g ...
html5做在线音乐,html5实现在线响应式音乐播放器
大概很早的时候就有想法做一个音乐播放器玩玩,以前可能还考虑过做APP,大一的时候第一个html的静态页面也是做的音乐网站,想想,大概小时候比较喜欢音乐吧.然而,现在入了前端大坑,就用h5做一个耍耍好了 ...
分享一个在线的HTML5元素在线测验 : HTML5 Element Quiz
日期:2011/12/07 来源:GBin1.com 今天在公司的网站上发现的一个在线HTML5元素的在线测试,大家有兴趣可以挑战一下,有点小BT.Enjoy! 在线测验转载于:https://w ...
html5 css3在线工具,HTML5/CSS3开发辅助工具(TopStyle)
TopStyle 是一款 CSS 开发辅助工具,即 HTML5 / CSS3 编辑器,它专注于 HTML CSS 设计辅助,提供比较多的功能,如 CSS 代码检查等,据称 TopStyle 的帮助文件 ...
html5 3d在线网页,HTML5网页动画 3D旋转展示
transform-style的3D效果 *{font-size: 14px;color: #fff; padding:0; margin:0;} #container { position: rel ...
html5电子相册在线制作,Html5+jQuery+CSS制作相册小记录
本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录. 主要功能点: Html5进行布局调用jQuery(借用官网的一句话:The Write Less, Do More)极大的简化 ...
立方体移位html5游戏在线玩,HTML5 CSS3极富创意的立方体游泳动画
CSS 语言: CSSSCSS 确定 body { overflow: hidden; height: 100vh; perspective: 50em; background: radial-gra ...
HTML5基础教程（20）Video(视频)
文章目录导语 Web站点上的视频浏览器支持 HTML5视频是如何工作的视频格式与浏览器的支持使用 DOM 进行控制结语导语本篇文章将为各位读者介绍HTML5 Video(视频).现在几乎 ...
html视频不播放视频教程,HTML5：video标签我这视频怎么播放不了？
加了这一句在页面中: 回复讨论(解决方案) video 这个标签的 src 播放文件因浏览器的不同,支持的文件格式也不同.而且video文件必须遵循一定编码(比如:h264等)才可以进行播放的格式问 ...

html5 video 在线视频,HTML5 视频(Video)

html5 video 在线视频,HTML5 视频(Video)相关推荐

最新文章

热门文章