Video als Hintergrundbild ionic app

Ich frage mich, ob es eine Möglichkeit gibt, ein plattformübergreifendes Hintergrundvideo ohne GIF zu erstellen.Video als Hintergrundbild ionic app

Viel wie das Tutorial here, jedoch mit MP4 und nicht GIF, wie ich ein längeres Video verwenden möchte.

Ich möchte dies auf einem Anmeldebildschirm verwenden, wie die aktuelle Uber App.

Quelle

2015-06-25 etrey

[Offenbar] (https : //www.designernews.co/stories/22596-what-are-some-example-of-good-html5-mobile-apps), Uber ist eine Cordova-Anwendung, die eine Webansicht ausführt. Verwenden sie jedoch native Hooks in der Eröffnungsansicht, um das Video abzuspielen? – etrey

Dies sollte funktionieren: oder zumindest auf den richtigen Pfad: Wird es einmal kompiliert funktionieren? Ich weiß es nicht. Stellen Sie außerdem sicher, dass die Auflösung Ihres Videos hoch genug ist, um den Speicherplatz zu füllen. EDIT: hatte Ionengehalt zu entfernen, um es richtig zu skalieren zu erhalten:

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    <link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet"> 
    <script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script> 
    </head> 
    <body ng-app="app"> 
    <ion-pane> 
     <ion-header-bar class="bar-stable"> 
     <h1 class="title">Awesome App</h1> 
     </ion-header-bar> 
      <video autoplay loop poster="" id="bgvid"> 

    <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm"> 

    <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/mp4"> 

    </video> 
    </ion-pane> 
    </body> 
</html>

CSS:

#bgvid { 

position: fixed; 

top: 50%; 

left: 50%; 

min-width: 100%; 

min-height: 100%; 

width: auto; 

height: auto; 

z-index: -100; 

-webkit-transform: translateX(-50%) translateY(-50%); 
-moz-transform: translateX(-50%) translateY(-50%); 
-ms-transform: translateX(-50%) translateY(-50%); 
-o-transform: translateX(-50%) translateY(-50%); 

transform: translateX(-50%) translateY(-50%); 

background: url(http://video.webmfiles.org/big-buck-bunny_trailer.webm) no-repeat; 

background-size: cover; 

}

Spielplatz: http://play.ionic.io/app/5157ac74b69b

Quelle

2015-06-25 20:57:43

Funktioniert nicht in der iPhone-Sim, nehme das selbe auf dem Gerät an [Screenshot] (https://imgur.com/PEDz4nn), danke fürs ausprobieren !!! – etrey

Das ist der Grund, dass iOS Videos auf dem Handy deaktiviert, um Daten auf iPhones zu speichern. Es gibt keine Möglichkeit, ein Hintergrundvideo zu spielen, soweit ich weiß. Versuchen Sie, das zu tun, was ich mit einem gif gemacht habe, vielleicht ist das der einzige Weg, es für IOS zu tun. –

Weiß jemand, ob dies zumindest auf Android funktioniert, wenn es kompiliert wird? Wenn nicht, werde ich es testen und melden. – John

Video als Hintergrundbild ionic app

Antwort

Verwandte Themen