Just a Computer Graphics Studio & My Life

剛學習Ionic寫Hybrid App,AngularJS想要在頁面中載入Youtube影片,可以怎麼做呢?

[Ionic][AngularJS] 載入Youtube影片.png

原來可以這麼容易實現!

在Result.html中寫:

<ion-view view-title="學習成果" hide-nav-bar="true">
<div class="bar bar2-header">
<h1 class="title">學習成果</h1>
</div>
<ion-content>
    </br></br></br></br></br>
    <iframe class="youtube-player" type="text/html" width=100% height="385" ng-src="{{trustSrc(movie.src)}}" allowfullscreen frameborder="0">

  </ion-content>
</ion-view>

在controllers.js中寫:

.controller('ResultCtrl', function($scope, $sce) {

  $scope.trustSrc = function(src) {
    return $sce.trustAsResourceUrl(src);
  }

  $scope.movie = {src:"https://www.youtube.com/embed/fdQgPu3iUYk", title:"好想你~"};

})

是有個問題待解決,怎麼決定Youtube影片高度?寬度設定100%馬上有效果,可是高度就不是啦⋯⋯有請高手幫忙!

好想你 I MiSS U這部影片是阿雅推薦給我聽的,說適合我和泰國女孩的相處狀況。

參考:External resource not being loaded by AngularJs

Advertisements

發表留言

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

標籤雲

%d 位部落客按了讚: