面向小型設備與mediaelements

非常好，到目前爲止

我只是面對我的目標小型設備有點問題打轉轉，視頻不會自動調整到新裝置大小

我懷疑#containingBlock是有問題的，所以我試圖用媒體查詢加以指定

我已經嘗試了響應視頻克里斯Coyer建議什麼mediaelement.js outpout

也許有人對我如何爲iphone發出想法10個但螺絲喜歡

我的網頁，請my page

我用下面的HTML嵌入影片

<div id="containingBlock"> 
     <video id="introVid" poster="http://med-innovation.com/wp-content/themes/med/images/video_start.png" controls="control" preload="none">  
      <source src="http://med-innovation.com/wp-content/themes/med/media/ElevatorPitch.mp4" type="video/mp4" /> 
      <source src="http://med-innovation.com/wp-content/themes/med/media/ElevatorPitch.webm" type="video/webm" /> 
      <source src="http://med-innovation.com/wp-content/themes/med/media/ElevatorPitch.ogv" type="video/ogg" /> 
      <object type="application/x-shockwave-flash" data="http://med-innovation.com/wp-content/themes/med/build/flashmediaelement.swf"> 
       <param name="movie" value="http://med-innovation.com/wp-content/themes/med/build/flashmediaelement.swf" /> 
       <param name="flashvars" value="controls=true&amp;file=http://med-innovation.com/wp-content/themes/med/media/ElevatorPitch.mp4" /> 
       <img src="http://med-innovation.com/wp-content/themes/med/images/fail.jpg" width="640" height="360" title="Il n'est pas possible de visionner une video avec votre navigateur" /> 
      </object> 
     </video>  
     <script> 
     jQuery(document).ready(function($) 
     { 
      // declare object for video 
      var player = new MediaElementPlayer('#introVid', 
      { 
      // if the <video width> is not specified, this is the default 
       defaultVideoWidth: 640, 
       // if the <video height> is not specified, this is the default 
       defaultVideoHeight: 360, 
       // if set, overrides <video width> 
       videoWidth: -1, 
       // if set, overrides <video height> 
       videoHeight: -1, 
       // enables Flash and Silverlight to resize to content size 
       enableAutosize: true, 
       // the order of controls you want on the control bar (and other plugins below) 
       features: ['playpause','loop','current','progress','duration','volume'], 
       success: function (mediaElement, domObject) 
       { 
        // add event listener 
        mediaElement.addEventListener('ended', function(e) 
        { 
          window.location = "http://med-innovation.com/choice/"; 
        }, false); 
       } 
      }); 
     }); 

     </script>

，並在CSS我有

video {width: 100% !important; height: auto !important;} 

#containingBlock { 
width: 640px; 
height: 360px; 
margin: 0 auto; 
text-align:center; 
} 

@media(max-width: 520px) 
{ 
#page-wrap, #colophon {width: auto; margin: 7px auto; } 
#containingBlock { 
    width: 100%; 
    height: 100%; 
    margin: 0 auto; 
    text-align:center; 
    } 
}

來源

2012-01-11 Steffy Kristiensen

歡迎計算器;） – 2012-01-11 08:04:25

謝謝你，任何想法對我來說問題 – 2012-01-11 11:45:48

也許這工作http://webtonio.com/40/並添加標籤，如HTML5，CSS來問題 – 2012-01-11 13:24:19