处理H5网页中用video标签没法播放MP4视频的办法
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">本文总结自千锋教育高教<span style="color: black;">制品</span><span style="color: black;">开发</span>部编著的《HTML5从入门到精通》，转载请注明<span style="color: black;">源自</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">为何</span>录制的MP4视频在本地<span style="color: black;">能够</span>播放<span style="color: black;">然则</span><span style="color: black;">运用</span>html5的video多<span style="color: black;">媒介</span>播放标签<span style="color: black;">不可</span>正常播放<span style="color: black;">仅有</span>一个进度条而不<span style="color: black;">表示</span>图像？其实<span style="color: black;">便是</span>一个视频编码的问题，格式虽然都是MP4<span style="color: black;">然则</span>html中只支持H.264的编码格式，<span style="color: black;">没</span>奈只能重新转换一下编码了。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">为了避免<span style="color: black;">大众</span>遇到<span style="color: black;">一样</span>的问题我在<span style="color: black;">这儿</span>就给<span style="color: black;">大众</span>普及一下html5关于<video>标签的知识吧：在<span style="color: black;">运用</span>html4协议做网站时<span style="color: black;">咱们</span>想要在网页上播放一个视频要不<span style="color: black;">运用</span>flash去播放，要么<span style="color: black;">便是</span>嵌入式页面来实现，<span style="color: black;">针对</span>html5<span style="color: black;">来讲</span>这两种<span style="color: black;">办法</span>非常的不方便<span style="color: black;">由于</span>一个牛逼哄哄的<video><span style="color: black;">显现</span>了，这个标签的功能<span style="color: black;">便是</span>让多<span style="color: black;">媒介</span>文件<span style="color: black;">能够</span>很方便的在网页中播放。</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">html中播放一个视频只<span style="color: black;">必须</span>一个标签：</h3><video src="<a style="color: black;"><span style="color: black;">http://</span><span style="color: black;">sp.ntaotu.com/localhost</span><span style="color: black;">-wordpress-phpstudy.mp4</span></a>" controls="controls" width="500"height="300"></video>代码虽然少了<span style="color: black;">非常多</span>，<span style="color: black;">然则</span>功能却很健全，这<span style="color: black;">便是</span>html5的亮点之一吧！<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">关于<video>标签所支持的视频格式和编码：</p>MP4 = MPEG 4文件<span style="color: black;">运用</span> H264 视频编解码器和AAC音频编解码器WebM = WebM 文件<span style="color: black;">运用</span> VP8 视频编解码器和 Vorbis 音频编解码器Ogg = Ogg 文件<span style="color: black;">运用</span> Theora 视频编解码器和 Vorbis音频编解码器<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">经过</span>上面的信息<span style="color: black;">咱们</span>会<span style="color: black;">发掘</span><span style="color: black;">仅有</span>h264编码的MP4视频（MPEG-LA<span style="color: black;">机构</span>）、VP8编码的webm格式的视频（Google<span style="color: black;">机构</span>）和Theora编码的ogg格式的视频（iTouch<span style="color: black;">研发</span>）<span style="color: black;">能够</span>支持html5的<video>标签。</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">倘若</span>浏览器不支持video标签怎么办？</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">例如</span>IE浏览器还有老版本的浏览器对html5的支持不太好，当用户用这些浏览器打开<span style="color: black;">咱们</span>带有视频的网页怎么办呢？</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">咱们</span><span style="color: black;">能够</span>把代码<span style="color: black;">这般</span>写：</p><video src="<a style="color: black;"><span style="color: black;">http://</span><span style="color: black;">sp.ntaotu.com/localhost</span><span style="color: black;">-wordpress-phpstudy.</span></a>mp4" controls="controls" width="500"height="300">您的浏览器不支持播放该视频！</video><p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">这般</span>在不支持html5的浏览器中就会提示“您的浏览器不支持播放该视频！”啦！</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">关于video标签的扩展参数说明：</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">video 元素<span style="color: black;">准许</span>多个 source 元素。source 元素<span style="color: black;">能够</span>链接<span style="color: black;">区别</span>的视频文件。浏览器将<span style="color: black;">运用</span><span style="color: black;">第1</span>个可识别的格式，<span style="color: black;">这般</span><span style="color: black;">咱们</span>只要多准备几个<span style="color: black;">区别</span>格式的视频就<span style="color: black;">能够</span>了。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">用法：</p><video width="500" height="250" controls="controls"><source src="movie.ogg" type="video/ogg"><source src="movie.mp4" type="video/mp4">您的浏览器不支持此种视频格式。</video>autoplay :<span style="color: black;">显现</span>该属性<span style="color: black;">寓意</span>着视频在就绪后将自动播放，用法：autoplay="autoplay"controls :<span style="color: black;">显现</span>该属性<span style="color: black;">寓意</span>着向用户<span style="color: black;">表示</span>控件，如播放按钮等，用法：controls="controls"height:设置高度 width:设置宽度loop:自动重播，用法：loop="loop"preload:视频在页面加载时进行加载并预备播放，用法：preload="auto" - 当页面加载后载入<span style="color: black;">全部</span>视频；preload="meta" - 当页面加载后只载入元数据；preload="none" - 当页面加载后不载入视频。<span style="color: black;">重视</span>：若<span style="color: black;">运用</span>了autoplay，则忽略preloadsrc:要播放视频的url<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">关于<video>标签我就介绍到<span style="color: black;">这儿</span>，相信<span style="color: black;">大众</span>都对这个标签有了深刻的<span style="color: black;">认识</span>！</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">关联</span><span style="color: black;">文案</span><span style="color: black;">举荐</span>：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;">【福利】Java转型</a></p>
期待更新、坐等、迫不及待等。
页:
[1]