html5网页中用video标签能够播放MP4视频的解决办法

今天一位朋友Q我说：为什么我拍摄的MP4视频在本地可以播放之后使用html5的video多媒体播放标签不能正常播放只有一个进度条而不显示图像？当时我也更好奇MP4视频可以用video标签播放呀，我就一直用，毕竟是好朋友我还是亲自去筛查了一下问题，这不结论处来了，其实就是一个视频编码的问题，格式仍然都是MP4但是html中只支持H.264的编码格式，无奈只好再次转换一下编码了。

为了防止大家见到同样的难题我在这里就帮你们普及一下html5关于<video>标签的知识吧：

在使用html4协议做网站时我们想要在网站上播放一个视频要不使用flash去播放，要么就是嵌入式页面来实现，对于html5来说这两种方式十分的不便于因为一个牛逼哄哄的<video>出现了，这个标签的功能就是让多媒体文件可以很方便的在网站中播放。

<videosrc=“#8221;controls=“controls”width=“500”height=“300”></video>

代码仍然少了这些，但是功能仍太完善谷歌浏览器 video标签，这就是html5的看点之一吧！

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

通过里面的信息我们会看到只有h264编码的MP4视频（MPEG-LA公司）、VP8编码的webm格式的视频（Google公司）和Theora编码的ogg格式的视频（iTouch开发）可以支持html5的<video>标签。

比如IE浏览器还有老版本的浏览器对html5的支持不太好，当客户用这种浏览器打开我们带有视频的网站怎么办呢？

我们可以把代码那样写：

<videosrc=“#8221;controls=“controls”width=“500”height=“300”>您的浏览器不支持播放该视频！</video>

这样在不支持html5的浏览器中经常提醒“您的浏览器不支持播放该视频！”啦！

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式，这样我们即使多打算几个不同格式的视频就可以了。

用法：

<videowidth=“500”height=“250”controls=“controls”><sourcesrc=“movie.ogg”type=“video/ogg”><sourcesrc=“movie.mp4”type=“video/mp4”>您的浏览器不支持此种视频格式。</video>

autoplay :出现该属性意味着视频在就绪后将手动播放，用法：autoplay=”autoplay”controls :出现该属性意味着向用户显示控件，如播放按键等，用法：controls=”controls”height:设置高度 width:设置长度loop:自动重播，用法：loop=”loop”preload:视频在页面加载时进行读取并预备播放谷歌浏览器 video标签，用法：preload=”auto” – 当页面加载后载入整个视频；preload=”meta” – 当页面加载后只载入元数据；preload=”none” – 当页面加载后不载入视频。注意：若使用了autoplay，则忽略preloadsrc:要播放视频的url

关于<video>标签我就介绍到此处，相信你们都对这个标签有了深刻的知道！最后帮你们分享一个视频编码转换器，使用便利的一个小巧工具，大家用QQ快捷登录本站即可获取相应积分下载附件了。

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-138743-1.html