Видео как фоновое изображение ионное приложение

Мне было интересно, есть ли способ сделать кросс-платформенное фоновое видео без использования GIF.Видео как фоновое изображение ионное приложение

Как и учебное пособие here, однако, с MP4, а не с GIF, поскольку я бы хотел использовать более длинное видео.

Я бы хотел использовать это на экране входа в систему, например, в текущем приложении Uber.

источник

2015-06-25 etrey

[Видимо] (HTTPS : //www.designernews.co/stories/22596-what-are-some-examples-of-good-html5-mobile-apps), Uber - приложение кордовы с веб-просмотром. Однако, они используют собственные крючки на открытии для запуска видео? – etrey

Это должно работать: или, по крайней мере, поставить вас на правильный путь: будет ли он работать после компиляции? Я не знаю. Также убедитесь, что ваше видео достаточно высокое, чтобы заполнить пробел. EDIT: пришлось удалить ион-контента, чтобы получить его в масштабе право:

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; 

}

площадка: http://play.ionic.io/app/5157ac74b69b

источник

2015-06-25 20:57:43

Не работает в iphone sim, предположим, что на устройстве [screenshot] (https://imgur.com/PEDz4nn), спасибо за попытку !!! – etrey

, потому что ios автоматически отключает видео, воспроизводимые на мобильном телефоне, для сохранения данных на iphones. Насколько я знаю, нет способа получить фоновое видео. Попробуйте сделать то, что я сделал с gif, возможно, это единственный способ сделать это для IOS –

Кто-нибудь знает, работает ли это хотя бы на Android при компиляции? Если нет, я буду проверять и отчитываться. – John

Видео как фоновое изображение ионное приложение

ответ

Смежные вопросы