Html5-video-set von browser-full screen - das gleiche wie noborder für flash-Film

Ich versuche ein html5 video in voller browser Größe. Ich könnte es tun, aber nicht so wie ich will.

Habe ich Sie vor der Verwendung von flash mit "Scale" gleich "noborder". Dies ist das Ergebnis: http://inoq.com/lxgo/transportes.html - klicken Sie auf das Menü rechts, es öffnet sich ein Popupfenster mit dem video.

Möchte ich das gleiche tun mit HTML5-video. Ich könnte es in voller browser Größe, sondern zeigt die schwarzen Balken oben und unten oder Links und rechts, je nach Bildschirm-Größe, um das Seitenverhältnis beizubehalten. Dies ist das Ergebnis: http://inoq.com/lxgo2/cidade.html

Irgendwelche Ideen auf, wie es zu tun? Ist es überhaupt möglich?

Dank
Bruno

InformationsquelleAutor Bruno Fernandes | 2012-08-03
  1. 2

    Mit der HTML5 - video element, Skalierung eine der Dimensionen bewirkt, dass der andere automatisch skaliert, um das Seitenverhältnis beibehalten. Als solche, wenn Sie die height Ihrer video element der height des window und in der Mitte innerhalb mit div mit overflow eingestellt hidden sind, sollten Sie die Wirkung, die Sie suchen.

    HTML:

      <div id="container">
        <video id="player" autoplay loop>
          <source src="http://inoq.com/lxgo2/videos/transtejo.mp4" type="video/mp4" />
          <source src="http://inoq.com/lxgo2/videos/transtejo.webm" type="video/webm" />
          <source src="http://inoq.com/lxgo2/videos/transtejo.ogv" type="video/ogg" />
          Your browser does not support the video tag.
        </video>
  </div>

    JavaScript:

        //Using jQuery for ease
    var $player = $('#player');
    var $window = $(window);

    //if you only set one of width and height, the other dimension is automatically 
    //adjusted appropriately so that the video retains its aspect ratio.
    //http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/       
    $player[0].height = $window.height(); 

    //centre the video 
    $player.css('left', (($window.width() - $player.width()) / 2) + "px");

    CSS:

      #container { 
      position: absolute; 
      width: 100%; 
      height: 100%; 
      overflow: hidden; 
  }

  #player { 
      position: absolute; 
  }
    • Bitte werfen Sie einen Blick auf meine Antwort.
    • Stellen Sie eine neue Frage, Kumpel, du bist viel mehr wahrscheinlich, um eine Antwort zu bekommen.
    InformationsquelleAutor net.uk.sweet
Schreibe einen Kommentar