购物车
登陆 / 注册
微信扫码登陆

推荐手册

HTML 5 视频

HTML 5 视频
很多站点都会使用到视频,HTML5 提供了一种通过 <video>元素来包含视频,以展示视频的标准。HTML5 的<video>元素拥有方法、属性和事件,可用于播放,暂停以及加载。
编辑:清浅 清浅 更新时间:2019-01-17 10:54:07

HTML 5 视频

很多站点都会使用到视频.,HTML5 提供了展示视频的标准

Web 上的视频

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

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

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

视频格式

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

格式           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 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

HTML5视频如何工作

HTML5 <video>拥有方法、属性和事件

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

其中的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。其中的 DOM 事件能够通知用户视频

的开始播放、已暂停,已停止,等等。

实例

<!DOCTYPE HTML>
<html>
<body>
<video src="movie01.mp4"  width="450" height="300" controls="controls">
</video>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

<video> 标签的属性

属性描述
autoplay         autoplay如果出现该属性,则视频在就绪后马上播放。
controls          controls如果出现该属性,则向用户显示控件,比如播放按钮。
height             pixels设置视频播放器的高度。
loop                loop如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload           preload

如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src                   url要播放的视频的 URL。
width              pixels设置视频播放器的宽度。


网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号