HTML5视频

来源：互联网发布：linux开启ftp服务编辑：程序博客网时间：2024/05/19 00:08

视频格式

格式

Firefox

Opera

Chrome

Safari

Ogg

3.5+

10.5+

5.0+

MPEG 4

9.0+

5.0+

3.0+

WebM

4.0+

10.6+

6.0+

Ogg:带有Theora视频编码和Vorbis音频编码的Ogg文件；

MPEG4:带有H.264视频编码和AAC音频编码的MPEG4文件；

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

代码片段

1. 显示视频的html代码

<!DOCTYPE HTML><html><body><video src="movie.ogg" controls="controls">Your browser does not support the video tag.</video></body></html>

Src：要显示的视频的URL路径；

Control：添加播放、暂停和音量控件；

2. 添加长度和宽度的控制

<!DOCTYPE HTML><html><body><video src="movie.ogg" width="320" height="240" controls="controls">Your browser does not support the video tag.</video></body></html>

在<video>和</video>之间的内容是当浏览器不支持video元素时显示的。Width/height: 视频显示的长度和宽度；

3. 添加多个视频资源文件

<!DOCTYPE HTML><html><body><video width="320" height="240" 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>

标签的属性Source元素链接不同的视频文件，浏览器将使用第一个可识别的格式。

4. 标签的属性

属性

值

描述

autoplay

如果出现该属性，则视频在就绪后马上播放。

controls

如果出现该属性，则向用户显示控件，比如播放按钮。

height

pixels

设置视频播放器的高度。

loop

如果出现该属性，则当媒介文件完成播放后再次开始播放。

preload

如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

src

url

要播放的视频的 URL。

width

pixels

设置视频播放器的宽度。

HTML5<video>使用DOW进行控制

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

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

下例中简单的方法，向我们演示了如何使用 <video> 元素，读取并设置属性，以及如何调用方法。

<!DOCTYPE html> <html> <body> <div style="text-align:center;">  <button onclick="playPause()">播放/暂停</button>   <button onclick="makeBig()">大</button>  <button onclick="makeNormal()">中</button>  <button onclick="makeSmall()">小</button>  <br />   <video id="video1" width="420" style="margin-top:15px;">    <source src="/example/html5/mov_bbb.mp4" type="video/mp4" />    <source src="/example/html5/mov_bbb.ogg" type="video/ogg" />    Your browser does not support HTML5 video.  </video></div> <script type="text/javascript">var myVideo=document.getElementById("video1");function playPause(){ if (myVideo.paused)   myVideo.play(); else   myVideo.pause(); } function makeBig(){ myVideo.width=560; } function makeSmall(){ myVideo.width=320; } function makeNormal(){ myVideo.width=420; } </script> </body> </html>

HTML5<video>方法，属性以及事件

方法

属性

事件

play()

currentSrc

play

pause()

currentTime

pause

load()

videoWidth

progress

canPlayType

videoHeight

error

duration

timeupdate

ended

error

abort

paused

empty

muted

emptied

seeking

waiting

volume

loadedmetadata

height

width

注释：在所有属性中，只有videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。

全局属性

HTML 属性赋予元素意义和语境。

下面的全局属性可用于任何 HTML 元素

属性

描述

accesskey

规定激活元素的快捷键。

class

规定元素的一个或多个类名（引用样式表中的类）。

contenteditable

规定元素内容是否可编辑。

contextmenu

规定元素的上下文菜单。上下文菜单在用户点击元素时显示。

data-*

用于存储页面或应用程序的私有定制数据。

dir

规定元素中内容的文本方向。

draggable

规定元素是否可拖动。

dropzone

规定在拖动被拖动数据时是否进行复制、移动或链接。

hidden

规定元素仍未或不再相关。

规定元素的唯一 id。

lang

规定元素内容的语言。

spellcheck

规定是否对元素进行拼写和语法检查。

style

规定元素的行内 CSS 样式。

tabindex

规定元素的 tab 键次序。

title

规定有关元素的额外信息。

translate

规定是否应该翻译元素内容。

0 0