如何在 ionicApp 中播放托管在另一台服务器上的视频答案

【问题标题】：How to play video hosted on another server, in ionicApp如何在 ionicApp 中播放托管在另一台服务器上的视频
【发布时间】：2016-03-13 03:44:13
【问题描述】：

我正在尝试从远程服务器流式传输视频，其 URL 在 JSON 数组中提供。我设法使用ngSanitize 将视频放入框架中，它在我的浏览器上运行良好。当我为 Android 构建时出现了我的问题：它不工作，只有一个 sn-p 框架可见。

如何使用基于 Ionic 框架的应用播放托管在远程服务器上的视频？

这是我在做什么。

控制器：

.controller("myCtrl",["$scope","$sce","$ionicLoading",function($scope,$sce,$ionicLoading){
    $scope.trustSrc = function(src) {
    return $sce.trustAsResourceUrl(src);
  }
    $ionicLoading.show({
        content     : 'Loading...',
        animation   : 'fade-in',
        showBackdrop: true,
        maxWidth    : 200,
        showDelay   : 0,
        duration    :10000
    });

    $scope.videos=[
                    {
                      "title":"video1",
                      "source"  :"http://player.vimeo.com/external/85569724.sd.mp4?s=43df5df0d733011263687d20a47557e4"
                    },
                    {
                      "title":"video2",
                      "source"  :"http://player.vimeo.com/external/85569724.sd.mp4?s=43df5df0d733011263687d20a47557e4"
                    }, 
                    {
                      "title":"video3",
                      "source"  :"http://player.vimeo.com/external/85569724.sd.mp4?s=43df5df0d733011263687d20a47557e4"
                    },
                    {
                      "title":"video4",
                      "source"  :"http://player.vimeo.com/external/85569724.sd.mp4?s=43df5df0d733011263687d20a47557e4"
                    },
                    {
                      "title":"video5",
                      "source"  :"http://player.vimeo.com/external/85569724.sd.mp4?s=43df5df0d733011263687d20a47557e4"
                    },
                    {
                      "title":"video6",
                      "source"  :"http://player.vimeo.com/external/85569724.sd.mp4?s=43df5df0d733011263687d20a47557e4"
                    }
                  ];


}])

查看：

<div class="card" ng-repeat="video in videos">

         <video controls style="width:100%"> 
            <source ng-src="{{trustSrc(video.source)}}" type="video/mp4"/>
         </video> 

    </div>

我也使用了 iframe（没有构建到 apk），但在这里我找不到停止我的视频表单自动播放的方法。

 <div class="card" ng-repeat="video in videos">

                 <iframe src="" dynamic-url dynamic-url-src="{{video.source}}" frameborder="0" width="100%"  controls autoplay="false"></iframe>

            </div>

【问题讨论】：

标签： angularjs html iframe ionic-framework

【解决方案1】：

您可以使用 HTML video 标签代替 iframe 在 Ionic 中嵌入视频：

例子：

<video controls="controls" preload="auto" webkit-playsinline="webkit-playsinline" class="videoPlayer"><source src="http://player.vimeo.com/external/85569724.sd.mp4?s=43df5df0d733011263687d20a47557e4" type="video/mp4"/></video>

【讨论】：