angularjs - Angular ng-include with ng-Covervid -
i'm using ng-include in ionic slide :
<ion-slide> <div ng-include src="'vid.html'"></div> </ion-slide> <ion-slide> <div ng-include src="'templates/rooms.html'"></div> </ion-slide> <ion-slide> <div ng-include src="'templates/splash2.html'"></div> </ion-slide>
vid.html not in templates, in root folder, , file full screen video :
<!-- video markup --> <section class="masthead"> <!-- directive element --> <covervid class="masthead-video" autoplay loop muted height="720" width="1280"> <source src="assets/videos/dreamscapes.mp4" type="video/mp4"> <source src="assets/videos/dreamscapes.webm" type="video/webm"> </covervid> <!-- directive attribute --> <!-- <video covervid class="masthead-video" autoplay loop muted height="720" width="1280"> <source src="assets/videos/dreamscapes.mp4" type="video/mp4"> <source src="assets/videos/dreamscapes.webm" type="video/webm"> </video> --> <div class="masthead-overlay"></div> <div class="masthead-arrow"></div> <h1>ngcovervid<span>angular background video cover</span></h1> <a class="masthead-video-credit" href="http://vimeo.com/82495711" target="_blank"> <span>video: dreamscapes</span> <span>by jonathan besler</span> </a> </section> <section class="content"> <div class="container"> <h2>special thanks</h2> <p>a special , shoutout <a href="http://github.com/stefanerickson">stefan erickson</a> creating original <a href="http://github.com/stefanerickson/covervid">covervid</a>.</p> <h2>why special?</h2> <p>for starters, makes html5 video behave background cover image, other plugins that. ngcovervid lightweight, 1279 bytes of javascript. logic parent based, meaning parent element can size (not full-screen background).</p> <h2>how use it?</h2> <ol> <li>first pull project down <a href="http://github.com/jfeigel/ngcovervid">github</a> or install through <a href="http://www.bower.io">bower</a> , link <code>ngcovervid.min.js</code> site.<pre>bower install ng-covervid</pre></li> <li>add ngcovervid dependency of angular application.<pre>angular.module(<span class="nt">'app'</span>,[<span class="nt">'ngcovervid'</span>]);</pre></li> <li>it important note video target use parent element scale. in mind, create simple markup , add base styling size videos' parent/wrapper element. directive must declared either attribute of video element or element itself.<br/><br/><div>attribute</div><pre><span class="nt"><div</span> <span class="na">class=</span><span class="s">"covervid-wrapper"</span><span class="nt">></span> <span class="nt"><video</span> <span class="na">covervid</span> <span class="na">class=</span><span class="s">"covervid-video"</span> <span class="na">autoplay</span> <span class="na">loop</span> <span class="na">poster=</span><span class="s">"img/video-fallback.png"</span><span class="nt">></span> <span class="nt"><source</span> <span class="na">src=</span><span class="s">"videos/clouds.webm"</span> <span class="na">type=</span><span class="s">"video/webm"</span><span class="nt">></span> <span class="nt"><source</span> <span class="na">src=</span><span class="s">"videos/clouds.mp4"</span> <span class="na">type=</span><span class="s">"video/mp4"</span><span class="nt">></span> <span class="nt"></video></span> <span class="nt"></div></span> </pre><div>element</div><pre><span class="nt"><div</span> <span class="na">class=</span><span class="s">"covervid-wrapper"</span><span class="nt">></span> <span class="nt"><covervid</span> <span class="na">class=</span><span class="s">"covervid-video"</span> <span class="na">autoplay</span> <span class="na">loop</span> <span class="na">poster=</span><span class="s">"img/video-fallback.png"</span><span class="nt">></span> <span class="nt"><source</span> <span class="na">src=</span><span class="s">"videos/clouds.webm"</span> <span class="na">type=</span><span class="s">"video/webm"</span><span class="nt">></span> <span class="nt"><source</span> <span class="na">src=</span><span class="s">"videos/clouds.mp4"</span> <span class="na">type=</span><span class="s">"video/mp4"</span><span class="nt">></span> <span class="nt"></covervid></span> <span class="nt"></div></span> </pre><br/><div>styles</div><pre><span class="nc">.covervid-wrapper</span> <span class="p">{</span> <span class="k">position</span><span class="o">:</span> <span class="k">absolute</span><span class="p">;</span> <span class="k">top</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">left</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">width</span><span class="o">:</span> <span class="m">100%</span><span class="p">;</span> <span class="k">height</span><span class="o">:</span> <span class="m">100%</span><span class="p">;</span> <span class="p">}</span> </pre></li> <li>you have option include native height , width of video attributes of element or let directive determine them you. note including these values attributes ensure there no lag in initial sizing of video directive needs wait video's metadata load before can resize video.<pre><span class="nt"><covervid</span> <span class="na">class=</span><span class="s">"covervid-video"</span> <span class="na">autoplay</span> <span class="na">loop</span> <span class="na">poster=</span><span class="s">"img/video-fallback.png"</span> <span class="na">height=</span><span class="s">"720"</span> <span class="na">width=</span><span class="s">"1280"</span><span class="nt">></span></pre></li> </ol> </div> </section>
now, when navigate vid.html page manually displays fine , see fullscreen video, when im including via ng-src showing me everythign video. missing something?
Comments
Post a Comment