如何显示媒体(视频)从WP帖子在移动应用程序

How to display media (videos) from WP post in mobile app

本文关键字：移动 应用程序 WP 视频 何显示 显示 媒体      更新时间：2023-09-26

我在一个移动应用程序中工作，用户可以从一个特定的WordPress帐户可视化的帖子。

到目前为止，我的问题是，我不能显示媒体，只有图片，而不是视频

这是我使用的插件http://wp-api.org/，这里是媒体文档，但我仍然无法沿整个内容显示视频。

这是我到目前为止所拥有的普朗克，在标题为Disfruta el video-set de Faceblind & Melissa O en Nocturnal #6的第三篇文章中，有一个视频，由于我提到的问题，你无法想象。

这是你可以看到post的title和excerpt属性的html 

<script id="tab-news.html" type="text/ng-template">
    <div ng-repeat="post in posts">
      <a ng-href="#/tabs/news/{{post.ID}}">
        <h2><span ng-bind-html="post.title"></span></h2>
        <p ng-bind-html="post.excerpt"></p>
        <p>{{:: post.date | date}}</p>
      </a>
    </div>
</script>

这里是post的完整content 

<script id="tab-post-detail.html" type="text/ng-template">
  <ion-view view-title="Noticia">
      <h3>{{:: post.title}}</h3>
      <p ng-bind-html="post.content"></p>
  </ion-view>
</script>

这是Angular部分

.controller('NewsCtrl', function($scope,
                                 $ionicLoading,
                                 FreshlyPressed, $stateParams) {
  $scope.posts = [];
  $scope.doRefresh = function() {
    $scope.posts = FreshlyPressed.getBlogs($scope);
    $scope.$broadcast('scroll.refreshComplete');
  }
  $scope.doRefresh();
})
.service('FreshlyPressed', function($http) {
  return {
    getBlogs: function($scope) {
      $scope.postsURL = 'http://urbanetradio.com/wp-json/posts?_jsonp=JSON_CALLBACK';
      $http.jsonp($scope.postsURL).success(function(data, status, headers, config) {
        $scope.posts = data;
      });
    },
    getPostById: function(postId) {
      var url ='http://urbanetradio.com/wp-json/posts/'+ postId;
      return $http.get(url);
    }
  }
})
.controller('PostDetailCtrl', function($scope, $stateParams, FreshlyPressed) {
  var postId = $stateParams.postId;
      console.log( $stateParams)
 FreshlyPressed.getPostById(postId).success(function(response){
    $scope.post = response;
  })
});

好的，所以我玩了你的代码，你错过了$sce服务(严格上下文转义)。每次你嵌入某种形式的HTML时，你都需要确保Angular认为它是安全的。

添加到你的控制器:

.controller('PostDetailCtrl', function($scope, $stateParams, $sce, FreshlyPressed) {
    var postId = $stateParams.postId,
    siteId = $stateParams.siteId;
    console.log( $stateParams);
    FreshlyPressed.getPostById(postId).success(function(response){
       console.log(response);
       $scope.post = response;
    });
    // Marks src as safe
    $scope.trustSrc = function(src) {
       return $sce.trustAsHtml(src);
    };
});

在你看来:

<ion-view view-title="Noticia">
  <ion-content has-header="true">
    <div class="list">
      <div class="item item-image text-center item-text-wrap padding">
        <h3 class="item-divider">{{:: post.title}}</h3>
        <p ng-bind-html="trustSrc(post.content)"></p>
      </div>
    </div>
  </ion-content>
</ion-view>

这是你的Plunker的工作叉

相关文章：