Question

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

如何使用基于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>

Answer 1

您可以使用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>

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

1 个答案: