处理H5网页中用video标签没法播放MP4视频的办法

b1gc8v

本文总结自千锋教育高教制品开发部编著的《HTML5从入门到精通》，转载请注明源自。

为何录制的MP4视频在本地能够播放然则运用html5的video多媒介播放标签不可正常播放仅有一个进度条而不表示图像？其实便是一个视频编码的问题，格式虽然都是MP4然则html中只支持H.264的编码格式，没奈只能重新转换一下编码了。

为了避免大众遇到一样的问题我在这儿就给大众普及一下html5关于<video>标签的知识吧：在运用html4协议做网站时咱们想要在网页上播放一个视频要不运用flash去播放，要么便是嵌入式页面来实现，针对html5来讲这两种办法非常的不方便由于一个牛逼哄哄的<video>显现了，这个标签的功能便是让多媒介文件能够很方便的在网页中播放。

html中播放一个视频只必须一个标签：

<video src="http://sp.ntaotu.com/localhost-wordpress-phpstudy.mp4" controls="controls" width="500"height="300"></video>代码虽然少了非常多，然则功能却很健全，这便是html5的亮点之一吧！

关于<video>标签所支持的视频格式和编码：

MP4 = MPEG 4文件运用 H264 视频编解码器和AAC音频编解码器WebM = WebM 文件运用 VP8 视频编解码器和 Vorbis 音频编解码器Ogg = Ogg 文件运用 Theora 视频编解码器和 Vorbis音频编解码器

经过上面的信息咱们会发掘仅有h264编码的MP4视频（MPEG-LA机构）、VP8编码的webm格式的视频（Google机构）和Theora编码的ogg格式的视频（iTouch研发）能够支持html5的<video>标签。

倘若浏览器不支持video标签怎么办？

例如IE浏览器还有老版本的浏览器对html5的支持不太好，当用户用这些浏览器打开咱们带有视频的网页怎么办呢？

咱们能够把代码这般写：

<video src="http://sp.ntaotu.com/localhost-wordpress-phpstudy.mp4" controls="controls" width="500"height="300">您的浏览器不支持播放该视频！</video>

这般在不支持html5的浏览器中就会提示“您的浏览器不支持播放该视频！”啦！

关于video标签的扩展参数说明：

video 元素准许多个 source 元素。source 元素能够链接区别的视频文件。浏览器将运用第1个可识别的格式，这般咱们只要多准备几个区别格式的视频就能够了。

用法：

<video width="500" height="250" controls="controls"><source src="movie.ogg" type="video/ogg"><source src="movie.mp4" type="video/mp4">您的浏览器不支持此种视频格式。</video>autoplay :显现该属性寓意着视频在就绪后将自动播放，用法：autoplay="autoplay"controls :显现该属性寓意着向用户表示控件，如播放按钮等，用法：controls="controls"height:设置高度 width:设置宽度loop:自动重播，用法：loop="loop"preload:视频在页面加载时进行加载并预备播放，用法：preload="auto" - 当页面加载后载入全部视频；preload="meta" - 当页面加载后只载入元数据；preload="none" - 当页面加载后不载入视频。重视：若运用了autoplay，则忽略preloadsrc:要播放视频的url

关于<video>标签我就介绍到这儿，相信大众都对这个标签有了深刻的认识！

关联文案举荐：

【福利】Java转型

星☆雨

期待更新、坐等、迫不及待等。