iphone/ipod mobile safari bewirkt, dass Videoelement auf Rotation verschwindet

Question

Ich schreibe eine sehr einfache Website, die ein Video anzeigt. Ich habe getrennte Sheets für die unterschiedlichen Rotationszustände der Vorrichtung, etwa so:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait-style.css"/> 
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape-style.css"/> 

die Bleche Last und zeigt den Inhalt richtig, wenn der Benutzer zum ersten Mal in der jeweiligen Orientierung auf die Website navigiert. Wenn der Benutzer jedoch die Ausrichtung ändert, wird das Videoelement im folgenden Code ausgeblendet, während alle anderen Stile für die Ausrichtung korrekt angewendet werden.

<video id="mainvideo" width="640" height="480" controls preload="auto"> 

     <source src="output.ogv" type="video/ogg" />  
     <source src="output.mp4" type="video/mp4" />  

     <object width="640" height="480" data="flowplayer-3.2.5.swf" type="application/x-shockwave-flash"> 
      <param name="movie" value="flowplayer-3.2.5.swf" /> 
      <param name="allowfullscreen" value="true"/> 
      <param name="allowscriptaccess" value="always"/> 
      <param name="flashvars" value="config={'clip':{'url':'output.flv', 'autoPlay':false, 'autoBuffering':true}}" /> 
     </object> 

     <div id="trollface"> 
     <p>You do not have Adobe flash player installed on your browser. You may download it <a href="http://get.adobe.com/flashplayer/">here</a>.</p> 
     </br> 
     <p>Alternatively, you may also use a modern, standards-compliant browser (such as <a href="http://www.mozilla.com/en-US/firefox/">firefox</a>, <a href="http://www.google.com/chrome/intl/en/landing_chrome_mac.html?hl=en">chrome</a>, <a href="http://www.opera.com/">opera</a>, or <a href="http://www.apple.com/safari/">safari</a>), or download the video by clicking the download link below.</p> 

     </div> 

    </video> 

Kann uns jemand eine Richtung geben?

Vielen Dank im Voraus für Ihre Hilfe.

Answer 1

Im Inneren des Sheet Sie

@media only screen and (orientation:landscape) { 
    .yourclass{ 
    } 
} 

@media only screen and (orientation:portrait) { 
    .yourclass{ 
    } 
} 

Auf diese Weise können Sie zwei Definitionen für die gleiche Klasse haben einen Unterschied auch für unterschiedliche Orientierungen machen können (oder ID oder Tag) und es sollte Ihre Seite dynamisch updaten wenn Sie das Gerät in eine andere Ausrichtung drehen