HTML5里video标签支持哪些格式的视频文件及其遇到的坑
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一共支持三种格式： Ogg、MPEG4、WebM。但这三种格式<span style="color: black;">针对</span>浏览器的兼容性却各<span style="color: black;">区别</span>。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-5ae7dc37f18ea167d5514472368c6148_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">重点：<span style="color: black;">例如</span>MP4格式，MP4只是一个容器，里面还有一个叫编码器的东西。格式虽然都是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;">MP4 = MPEG 4文件<span style="color: black;">运用</span> H264 视频编解码器和AAC音频编解码器</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">WebM = WebM 文件<span style="color: black;">运用</span> VP8 视频编解码器和 Vorbis 音频编解码器</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Ogg = Ogg 文件<span style="color: black;">运用</span> Theora 视频编解码器和 Vorbis音频编解码器</p>
<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>、属性汇总。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">标签的属性</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">src ：视频的属性</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">poster：视频封面，<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;">preload：预加载</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">autoplay：自动播放</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">loop：循环播放</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">controls：浏览器自带的<span style="color: black;">掌控</span>条</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">width：视频宽度</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">height：视频高度</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> html 代码</p><video id="media" src="<a style="color: black;"><span style="color: black;">http://www.</span><span style="color: black;">sundxs.com/test.mp4</span></a>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">" controls width="400px" heigt="400px"></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">//audio和video都<span style="color: black;">能够</span><span style="color: black;">经过</span>JS获取对象,JS<span style="color: black;">经过</span>id获取video和audio的对象</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">标签的属性</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">获取video对象</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Media = document.getElementById("media");</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Media<span style="color: black;">办法</span>和属性：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> Media.error; //null:正常</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL<span style="color: black;">没</span>效</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">***//网络状态 ***</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Media.currentSrc; //返回当前资源的URL</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Media.src = value; //返回或设置当前资源的URL</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Media.canPlayType(type); //<span style="color: black;">是不是</span>能播放某种格式的资源</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Media.networkState; //0.此元素未初始化 1.正常但<span style="color: black;">无</span><span style="color: black;">运用</span>网络 2.正在下载数据 3.<span style="color: black;">无</span>找到资源</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Media.load(); //重新加载src指定的资源</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Media.buffered; //返回已缓冲区域，TimeRanges</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Media.preload; //none:不预载 metadata:预载资源信息 auto:</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">***//准备状态 ***</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Media.seeking; //<span style="color: black;">是不是</span>正在seeking</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">***//回放状态 ***</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Media.currentTime = value; //当前播放的位置，赋值可改变位置</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Media.startTime; //<span style="color: black;">通常</span>为0，<span style="color: black;">倘若</span>为流<span style="color: black;">媒介</span><span style="color: black;">或</span>不从0<span style="color: black;">起始</span>的资源，则不为0</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Media.duration; //当前资源长度 流返回<span style="color: black;">没</span>限</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Media.paused; //<span style="color: black;">是不是</span>暂停</p>Media.defaultPlaybackRate = value;//默认的
你的话语如春风拂面，让我感到无比温暖。 楼主的文章深得我心，表示由衷的感谢！
页:
[1]