2013-03-05 7 views
6

Nach einer großen Recherche habe ich keine Antwort auf meine Frage gefunden. Ich wollte mein Ziel erreichen mit FullScreenAPI aber es wird nicht in jedem mobilen Browser unterstützt (außer Firefox 19 und Blackberry-Browser - aber ich brauche eine Cross-Browser-Lösung). Here's the source. Ich testete auch FullScreenAPI auf nativen Android-Browser und Handy-Chrome mit entsprechend vordefinierten Vollbild-Funktionen. Jede Funktion war vom Typ undefined.HTML5 Video Vollbild auf mobilen Browsern (Android)

Ein anderer Ansatz war das rtsp Protokoll, das normalerweise von einem äußeren Spieler gehandhabt wird. Here ist der Typ, der davon ausgeht, dass m.youtube.com diese Lösung verwendet - ich denke, das ist nicht wahr (vielleicht ist die Antwort veraltet). Youtube verwendet den Vollbildmodus des nativen Videos. Wenn Sie in Chrome auf die Wiedergabetaste tippen, wird der Film sofort im Vollbildmodus angezeigt.

Obwohl jede Quelle, die ich gegoogelt mir sagt, dass nativen Vollbild auf Android-Browser nicht möglich ist, noch HTML5-Video-Element mit seinen nativen Kontrollen uns eine Vollbild-Taste gibt, die perfekt da draußen arbeitet.

Da ich jemand eine geniale Lösung event-How to trigger HTML5 video fullscreen button's teilen können nicht die native Steuerelemente wollen?

Antwort

2

Sie können ein Popup mit 100% Breite/Höhe mit einem Schließen-Button auf absolut spielen, während Sie Ihr HTML5-Video abspielen.

Alt, einfach und schmutziger Trick ... Aber funktioniert

+0

Ja, ich habe vergessen, diese Möglichkeit in der Frage zu teilen. Leider ist es keine Lösung für mich :(Ich muss das sehr fullscreen von der nativen Schaltfläche auslösen (oder, wenn es nicht möglich ist, muss ich 100% sicher sein). – matewka

0

Versuchen video.webkitEnterFullscreen() in einem Benutzer interaktiven Event-Handler (ex: klicken)

0

alles, was Sie brauchen auf "webkitbeginfullscreen" zu arbeiten und "webkitendfullscreen" Veranstaltungen für mobile Geräte, think.it ich werde

<!doctype html> 
<html> 
<head> 
<title>video</title> 
<script type="text/javascript"> 
function videoControl() { 
    var myVideo = document.getElementById('myVideo'); 
    myVideo.addEventListener("webkitbeginfullscreen", enteringFullscreen, false); 
    myVideo.addEventListener("webkitendfullscreen", exitingFullscreen, false); 
} 

function enteringFullscreen() { 
    alert("entering full-screen mode"); 
} 

function exitingFullscreen() { 
    alert("exiting full-screen mode"); 
} 
</script> 
</head> 
<body onload="videoControl()"> 
<div id="videoContainer"> 
<video id="myVideo" src="myVideo.m4v" autoplay controls> 
</video> 
</div> 
</body> 
</html> 
-1

Hier ist, was ich benutze das sollte ziemlich viel Arbeit überall:

function toggleFullScreen() { 
    var doc = window.document; 
    var elem = doc.body; //the element you want to make fullscreen 

    var requestFullScreen = elem.requestFullscreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen || elem.msRequestFullscreen; 
    var cancelFullScreen = doc.exitFullscreen || doc.webkitExitFullscreen || doc.mozCancelFullScreen|| doc.msExitFullscreen; 

    if(!(doc.fullscreenElement || doc.mozFullScreenElement || doc.webkitFullscreenElement || doc.msFullscreenElement)) { 
     requestFullScreen.call(doc.body); 
    } 
    else { 
    cancelFullScreen.call(doc); 
    } 
} 
+0

Dies macht die Webseite Vollbild, nicht nur das Element oder Video. –