Ionic and Angular show video problem

ionic-v1
#1

Hello i’m trying to embeme a video from vimeo and got this error in console how i can unblock this to work and show video?

Error: [$interpolate:interr] Can’t interpolate: {{VideoID}}
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. URL: //player.vimeo.com/video/82125785

#2

hi,

You can use $sce.getTrustedResourceUrl() to trust the URL…

var myApp = angular.module('myApp', ['ngSanitize']);

myApp.controller('myController', [$scope, $sce, function ($scope, $sce) {
    $scope.videos = $sce.getTrustedResourceUrl('http://player.vimeo.com/video/xxxxx');
}]);

You can optionally configure $sceDelegateProvider to white list the URLs.

https://docs.angularjs.org/api/ng/service/$sce#getTrustedResourceUrl

1 Like
#3 
app.controller('videoCntr',function($state,$scope,$sce,$stateParams){
$scope.GoBack = function(){
	$state.go('mainMenu');
}
$scope.VideoID = $sce.getTrustedResourceUrl(app.CurrentModule.VideoURL);
$scope.CourseName = app.CurrentModule.Title;

});

Still getting error:
“Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. URL: //player.vimeo.com/video/82125785”

#4

what is your html code?

#5 
    <script  id="course.html" type="text/ng-template" >
<div ng-controller="videoCntr">
  <div class="bar bar-header">
    <button class="button icon ion-arrow-return-left" ng-click="GoBack()"></button>
    <h1 class="title">{{CourseName}}</h1>
  </div>
  <div id="video" class="row">
    <div class="col">
      <iframe ng-src="{{VideoID}}" height="100%" width="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
  </div>
  <div class="row">
    <div class="col-50">
      fss
    </div>
    <div class="col-50">
      fsdfsd
    </div>
  </div>
  
</div>
</script>
#6

write this in the controller tell me if its ok ?
$scope.VideoID = $sce.trustAsResourceUrl(“http://player.vimeo.com/video/82125785”);

and u can use this in the config of your app for all videos from vimeo
$sceDelegateProvider.resourceUrlWhitelist([
‘self’,
‘http://player.vimeo.com/video/**’
]);

1 Like
#7

Thanks it worked :slight_smile: I’ll later try the delegateprovider to configure;)

#8

i need help im new in ionic i cant get the video to show up…

.controller(‘PlaylistCtrl’, function($scope, $stateParams) {
$scope.playlistSet = [
[
{ track: ‘Ignorance’, artist: ‘Paramore’, video:‘www.youtube.com/watch?v=OH9A6tn_P6g’},

],
[
  { track: 'How do you love me now ', artist: 'Hey Monday', video: 'www.youtube.com/watch?v=qzBruRwBltE'},
 
],
[
  { track: 'i write sins not tragedies', artist: 'panic at the disco', video: 'www.youtube.com/watch?v=vc6vs-l5dkc'},
],
[
  { track: 'shameless', artist: 'All Time Low', video: 'www.youtube.com/watch?v=VicpLNKQlJY'},
],
[ 
  { track: 'what do you mean', artist: 'Sam Tsui', video:'www.youtube.com/watch?v=R0n8c4z3lWk'},
]];

$scope.id = $stateParams.playlistId;
});

#9

hi,

add this in the config block of your app

$sceDelegateProvider.resourceUrlWhitelist([
‘self’,
’*://www.youtube.com/**’
]);

#10

Hello
In my project im using iFrame to play videos using vimeo video url. When i scroll to that iframe section in the app , it asks to open that video in browser in phone with alert. Like this

“Complete action using Google chrome, Opera mini”

I dont want this. I want to block this alert.
Error popup url : player.vimeo.com/cometchat-dev/{"event":"ready"}
How can i fix?

#11 
          <iframe ng-src="{{videoUrl}}" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

$scope.videoUrl = $sce.trustAsResourceUrl(url + “?autoplay=1”);
$sceDelegateProvider.resourceUrlWhitelist([
‘self’,
‘http://player.vimeo.com/video/**’
]);