html5学习笔记之三（引入多媒体对象）

看视频，做笔记：

1.多媒体对象转码工具：Ffmpeg、vlc、firefogg等

2.指定视频播放地址：

<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>

video标签为内嵌元素，如果浏览器不支持的话可以显示your browser does not support the video tag.

视频属性：

audio：是否播放声音，目前只支持muted参数

autoplay：是否自动播放

scr：指定视频源路径

poster：加载视频过程中显示的图片

preload：是否预先读取视频内容，或者只读文件信息，例如文件名长度等，或自动加载，取值为none/metadata/auto

controls：是否显示控制器，取值为boolean类型

loop：是否循环播放，取值为boolean类型

width：使用css定义宽度

height：使用css定义高度

type：type='video/webm;codecs="vorbis,vp8"',如果不写，则播放器根据视频属性自动选择

media：使用css格式化播放输出样式

3.视频播放例子（webm格式）

<title>Simple Video</title>

<video controls autoplay>

<source src='videos/mvi_2170.webm'  type='video/webm'  media="screen and (min-width:500px)">

<source src='videos/mvi_2170_qvga.webm'  type='video/webm' media="screen">

sorry,your browser is unable to play this video.

</video>

4.音频对象audio

方法与video完全一样，只不过将对象改为audio，并加上路径(src)。

var  audio=new  Audio(src);