Html5 Vollbildvideo

Gibt es eine Möglichkeit, dies zu tun? Ich wan-zu-spielen-video im Vollbildmodus. Ohne browser. Einstellung width:100%; height:100%; halten browser sichtbar noch

Kommentar zu dem Problem

mögliche Duplikate von gibt es einen Weg, um HTML5-video in den Vollbildmodus? Kommentarautor: Mat

InformationsquelleAutor der Frage Sahar | 2011-05-18

html5

61

Nein, es gibt keine Möglichkeit, das zu tun dieses noch. Ich wünschte, Sie fügen Sie eine Zukunft wie diese im Browser.

EDIT:

Jetzt gibt es eine Full-Screen-API für die web - können Sie requestFullscreen auf ein Video oder Canvas-element, um den Benutzer Fragen, um Ihnen permisions und machen es Vollbild.

Wir betrachten dieses element:
```
<video controls id="myvideo">
  <source src="somevideo.webm"></source>
  <source src="somevideo.mp4"></source>
</video>
```
Können wir das video in den fullscreen-Modus mit Skript wie dieses:
```
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}
```
Die vollständige Dokumentation

InformationsquelleAutor der Antwort Mohsen

Vom CSS

video {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}

InformationsquelleAutor der Antwort Montaser

Alle Hagel HTML5 _/\_

var videoElement = document.getElementById('videoId');    
videoElement.webkitRequestFullScreen();

InformationsquelleAutor der Antwort Vishnu

Können Sie es mit jQuery.

Habe ich meine video und Kontrollen in Ihren eigenen <div> wie diese:

<div id="videoPlayer" style="width:520px; -webkit-border-radius:10px; height:420px; background-color:white; position:relative; float:left; left:25px; top:55px;" align="center">

    <video controls width="500" height="400" style="background-color:black; margin-top:10px; -webkit-border-radius:10px;">
         <source src="videos/gin.mp4" type="video/mp4" />
    </video>

    <script>  
        video.removeAttribute('controls');  
    </script> 

    <div id="vidControls" style="position:relative; width:100%; height:50px; background-color:white; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; padding-top:10px; padding-bottom:10px;">

         <table width="100%" height="100%" border="0">

             <tr>
                 <td width="100%" align="center" valign="middle" colspan="4"><input class="vidPos" type="range" value="0" step="0.1" style="width:500px;" /></td>
             </tr>

             <tr>
                 <td width="100%" align="center" valign="middle"><a href="javascript:;" class="playVid">Play</a></td>
                 <td width="100%" align="center" valign="middle"><a href="javascript:;" class="vol">Vol</a></td>
                 <td width="100%" align="left" valign="middle"><p class="timer"><strong>0:00</strong> /0:00</p></td>
                 <td width="100%" align="center" valign="middle"><a href="javascript:;" class="fullScreen">Full</a></td>
              </tr>

            </table>

         </div>

      </div>

Dann meine jQuery für die .fullscreen Klasse:

var fullscreen = 0;

$(".fullscreen").click(function(){
  if(fullscreen == 0){
    fullscreen = 1;
    $("video").appendTo('body');
    $("#vidControls").appendTo('body');
    $("video").css('position', 'absolute').css('width', '100%').css('height', '90%').css('margin', 0).css('margin-top', '5%').css('top', '0').css('left', '0').css('float', 'left').css('z-index', 600);
    $("#vidControls").css('position', 'absolute').css('bottom', '5%').css('width', '90%').css('backgroundColor', 'rgba(150, 150, 150, 0.5)').css('float', 'none').css('left', '5%').css('z-index', 700).css('-webkit-border-radius', '10px');

}
else
    {

        fullscreen = 0;

        $("video").appendTo('#videoPlayer');
        $("#vidControls").appendTo('#videoPlayer');

        //change <video> css back to normal

        //change "#vidControls" css back to normal

    }

});

Braucht es ein wenig Aufräumen, da bin ich immer noch arbeite, aber das sollte für die meisten Browser, soweit ich das sehen kann.

Hoffe, es hilft!

InformationsquelleAutor der Antwort JrMatrix

1

Können Sie html5 video player, der hat full-screen Wiedergabe-option.
Dies ist eine sehr gute html5-player zu schauen.

http://sublimevideo.net/

InformationsquelleAutor der Antwort Raathigesh

    if (vi_video[0].exitFullScreen) vi_video[0].exitFullScreen();
    else if (vi_video[0].webkitExitFullScreen) vi_video[0].webkitExitFullScreen();
    else if (vi_video[0].mozExitFullScreen) vi_video[0].mozExitFullScreen();
    else if (vi_video[0].oExitFullScreen) vi_video[0].oExitFullScreen();
    else if (vi_video[0].msExitFullScreen) vi_video[0].msExitFullScreen();
    else { vi_video.parent().append(vi_video.remove()); }

InformationsquelleAutor der Antwort Jat

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.