HTML5里video标签支持哪些格式的视频文件及其遇到的坑

qzmjef

一共支持三种格式： Ogg、MPEG4、WebM。但这三种格式针对浏览器的兼容性却各区别。

重点：例如MP4格式，MP4只是一个容器，里面还有一个叫编码器的东西。格式虽然都是MP4然则html中只支持H.264的编码格式。因此要用软件来转码。

MP4 = MPEG 4文件运用 H264 视频编解码器和AAC音频编解码器

WebM = WebM 文件运用 VP8 视频编解码器和 Vorbis 音频编解码器

Ogg = Ogg 文件运用 Theora 视频编解码器和 Vorbis音频编解码器

video标签关联事件 、办法、属性汇总。

标签的属性

src ：视频的属性

poster：视频封面，无播放时表示的照片

preload：预加载

autoplay：自动播放

loop：循环播放

controls：浏览器自带的掌控条

width：视频宽度

height：视频高度

html 代码

<video id="media" src="http://www.sundxs.com/test.mp4

" controls width="400px" heigt="400px">

//audio和video都能够经过JS获取对象,JS经过id获取video和audio的对象

标签的属性

获取video对象

Media = document.getElementById("media");

Media办法和属性：

HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement

Media.error; //null:正常

Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL没效

***//网络状态 ***

Media.currentSrc; //返回当前资源的URL

Media.src = value; //返回或设置当前资源的URL

Media.canPlayType(type); //是不是能播放某种格式的资源

Media.networkState; //0.此元素未初始化 1.正常但无运用网络 2.正在下载数据 3.无找到资源

Media.load(); //重新加载src指定的资源

Media.buffered; //返回已缓冲区域，TimeRanges

Media.preload; //none:不预载 metadata:预载资源信息 auto:

***//准备状态 ***

Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA

Media.seeking; //是不是正在seeking

***//回放状态 ***

Media.currentTime = value; //当前播放的位置，赋值可改变位置

Media.startTime; //通常为0，倘若为流媒介或不从0起始的资源，则不为0

Media.duration; //当前资源长度 流返回没限

Media.paused; //是不是暂停

Media.defaultPlaybackRate = value;//默认的