mediaelement.js - Responsywne wideo z ustalonym maksymalnym rozmiarem

Question

Jak skonfigurować mediaelement.js, aby skalować filmy na małe ekrany, ale nie przeskalowywać ich powyżej rzeczywistego rozmiaru? (Innym niż zawijanie go w poprawnie zaklejonej wielkości div, do którego powrócę, jeśli nie znajdę lepszego rozwiązania.)

Próbowałem ustawić style="max-width: 100%;, a to działa w Firefoksie przy użyciu filmów na własną rękę serwer, ale w przeglądarce Chrome oraz w Firefoksie i Chrome podczas łączenia z filmami w YouTube filmy będą skalowane, aby wypełnić kontener, niezależnie od wartości ustawionych dla znacznika width="" i height="" dla znacznika <video>.

Podam przykład mojego HTML i pierwszej części wyników. Dodaje:

<video width="480" height="360" style="max-width: 100%;" src="http://example.com/video.mp4"></video> 

Daje to w Firefoksie (czyli to, co chcę):

<div class="mejs-container svg mejs-video" id="mep_0" style="width: 480px; height: 360px;"> 
    <div class="mejs-inner"> 
     <div class="mejs-mediaelement"> 
      <video width="480" height="360" src="http://example.com/video.mp4" style="max-width: 100%;"></video> 

I to w Chrome (co nie jest to, co chcę):

<div id="mep_0" class="mejs-container svg mejs-video" style="width: 864px; height: 648px;"> 
    <div class="mejs-inner"> 
     <div class="mejs-mediaelement"> 
      <video width="864" height="648" style="max-width: 100%; width: 100%; height: 100%;" src="http://example.com/video.mp4"></video> 

Czy istnieje akceptowana metoda realizacji tego?

Answer 1

Jeśli używasz kodu wyjściowego Firefox

<div class="mejs-container svg mejs-video" id="mep_0" style="width: 480px; height: 360px;"> 
    <div class="mejs-inner"> 
     <div class="mejs-mediaelement"> 
      <video width="480" height="360" src="http://example.com/video.mp4" style="max-width: 100%;"></video> 

w oryginalnym scenariuszu, należy rozwiązać problem i zachować kod wyjściowy spójne Firefox i Chrome.