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

Posted 2023-03-05

【中文标题】如何在 ionicApp 中播放托管在另一台服务器上的视频

【英文标题】：How to play video hosted on another server, in 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"   controls autoplay="false"></iframe>

            </div>

【参考方案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>