HTML5视频



HTML的视频的例子. 大雄兔的礼物.

让我试试


在HTML中播放视频

在HTML5之前, 视频只能在浏览器使用插件播放(如Flash).

HTML5 <video> 元素指定在网页中嵌入视频的标准方法.


浏览器支持

表中的数字指定第一个完全支持<video>的浏览器版本

元素
<video> 4.0 9.0 3.5 4.0 10.5

HTML <video> 元素

在HTML中,使用<video> 元素显示一个视频:

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

让我试试


它是如何工作的

控制属性添加到视频控制上,像play, pause和volume

这是一个好主意,总是包括宽度和高度属性。如果没有设置高度和宽度,则当视频加载时,页面可能会闪烁.

<source> 元素允许您指定浏览器可以选择的其他视频文件。浏览器将使用第一个识别格式.

<video></video>之间的文本当浏览器不支持 <video> 元素时将显示.


HTML <video> Autoplay

让视频自动播放使用 autoplay 属性:

<video width="320" height="240" autoplay>
  <source src="/static/assets/tutorials/front/html/movie.mp4" type="video/mp4">
  <source src="/static/assets/tutorials/front/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

让我试试

autoplay 属性在移动设备如iPhone和iPad上不工作


HTML 视频 - 浏览器支持

HTML5, 有3个支持的视频格式: MP4, WebM, and Ogg.

浏览器支持不同的格式是:

浏览器 MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES (from Opera 25) YES YES

HTML 视频 - 媒体类型

文件格式 媒体类型
MP4 video/mp4
WebM video/webm
Ogg video/ogg

HTML 视频 - 方法, 属性和事件

HTML5 为<video>元素定义了方法、属性和事件.

这允许您加载,播放和暂停视频,以及设置持续时间和音量.

也有DOM事件能够通知你一个视频开始播放,暂停,等.

实例: 使用JavaScript



视频大雄兔的礼物.

让我试试

更多DOM参考 HTML5 Audio/Video DOM 参考.


HTML5 视频标签

标签 描述
<video> 定义视频或电影
<source> 为媒体元素定义多个媒体资源, 像 <video> 和 <audio>
<track> 定义媒体播放器中的文本轨道