html - 不确定我的 HTML 是否仅限于使用 IE 条件的单个媒体文件请求

Question

我的服务器上的带宽消耗一直非常高，我想知道以下标记是否会导致请求的信息多于所需的信息。是这种情况还是会按预期工作？

这是我的标记:

   <div id="video-container">
     <object class="video" height="100%" width="100%">
       <param name="movie" value="http://cutmeoffmidfunk.s3.amazonaws.com/bill.swf">
       <param name="scale" value="exactfit" />
       <param value="transparent" name="wmode">
       <![if !IE]>
         <object class="video" type="application/x-shockwave-flash" data="http://cutmeoffmidfunk.s3.amazonaws.com/bill.swf" height="100%" width="100%">
            <param value="transparent" name="wmode">
            <param name="scale" value="exactfit" />
         </object>
       <![endif]>
         <![if !IE]>
           <div class="video">
             <video class="video" height="100%" width="100%" autoplay loop >
               <source src="http://cutmeoffmidfunk.s3.amazonaws.com/bill.mp4" type="video/mp4">
                <source src="http://cutmeoffmidfunk.s3.amazonaws.com/bill.webm" type="video/webm">
               <source src="http://cutmeoffmidfunk.s3.amazonaws.com/bill.ogg" type="video/ogg">
             </video>                                
           </div>
         <![endif]-->
         <!--[if IE]>
           <div class="video" >
             <object class="video" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="100%" width="100%">
               <param name="src" value="http://cutmeoffmidfunk.s3.amazonaws.com/bill.mov">
               <param name="autoplay" value="true">
               <param name="type" value="video/quicktime" height="100%" width="100%">
             </object>
           </div>
         <![endif]-->
       <![if !IE]>
         </object>
       <![endif]>
     </object>
    </div>



<audio id="audioplayer" autoplay loop>
    <source src="http://cutmeoffmidfunk.s3.amazonaws.com/bill.mp3">
    <source src="http://cutmeoffmidfunk.s3.amazonaws.com/bill.ogg">
</audio>

Answer 1

您发布的 HTML 格式似乎有误，因为某些参数缺少/>。对于非 ie 浏览器还有一个额外的标签，您的第一组和最后一组条件注释格式不正确。我会修复这些问题，然后查看代码的作用。

如果格式正确，您的代码和您不在 IE 中:

1. 您的代码将为外部对象加载 bill.swf 文件
2. 然后它也会使用下一个对象，这可能会也可能不会，这取决于您的缓存设置导致 bill.swf 再次加载。
3. 然后它将开始加载资源中的 Assets 。浏览器可能会也可能不会决定下载所有三个文件或只下载它需要的一个。

在 IE 中:

1. 您的代码将为外部对象加载 bill.swf 文件
2. 然后它也会使用下一个对象，这可能会也可能不会，这取决于您的缓存设置导致 bill.swf 再次加载。
3. 然后它将开始加载仅在第三个声明中的 Assets 。

一旦您修复了 HTML 并确保您请求的 Assets 是必要的并且达到了您想要的结果，如果您仍然遇到高负载，您可能需要考虑使用像 CloudFlair 这样的服务(我不推荐 CloudFlair，尽管它们在许多 cPanel 主机上免费且便宜)以缓存文件并减轻服务器本身的负载。您可能还想查看您在服务内容上设置的 chache header ，看看是否可以将不经常更改的文件设置为长时间缓存，以便它们只需要在每个客户端上加载一次并减少服务器负载。