youtube video is not playing from from html5 using ng-src directive

Question

I am creating an online course application and storing the video on YouTube. When a user clicks on courses then They should see the embedded YouTube videos. However It just creates the video frame and video doesn't play.

Here is my angular controller code. courses.client.controller.js

(function() {
'use strict';

angular
.module('courses')
.controller('CoursesController', CoursesController);

CoursesController.$inject = ['$scope', 'courseResolve',  'Authentication', '$sce'];

function CoursesController($scope, course, Authentication, $sce, $timeout) {
var vm = this;

vm.course = course;
vm.authentication = Authentication;

$scope.params = {
videoUrl: $sce.trustAsResourceUrl('https://youtube.com/embed/gZNm7L96pfY')
};
}
}());

Here is my html code. view-course.client.view.html. I have tried to two different approaches. Both Failed.

<section>
<div class="page-header">
  <h1 ng-bind="vm.course.title"></h1>
</div>
<small>
<em class="text-muted">
Posted on
<span ng-bind="vm.course.created | date:'mediumDate'"></span>
by
<span ng-if="vm.course.user" ng-bind="vm.course.user.displayName"></span>
<span ng-if="!vm.course.user">Deleted User</span>
</em>
</small>
<p class="lead" ng-bind="vm.course.content"></p>
<div>
  <video id="movie", ng-src="{{vm.course.courseLecture}}" width="500", height="300" controls>
  </video>
  <br><br><br>
  <video style="width:300px;height:240px" controls preload="none" >
     <source ng-src="{{params.videoUrl}}" type="video/mp4">
  </video>
  <br><br>
  <hr>
  <a ng-href="{{vm.course.courseLecture}}" target="_blank" >link1</a>
  <hr>
  <p class="lead" ng-bind="vm.course.courseLecture"></p>
</div>
</section>

Please let me know, where I am going wrong here.

Sajeetharan · Accepted Answer · 2017-01-19 02:14:46Z

Try adding this and instead of video control load it inside an iframe,

app.config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    'self',
    'https://www.youtube.com/**'
  ]);
});

DEMO

var app = angular.module('myApp', []);
app.config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    'self',
    'https://www.youtube.com/**'
  ]);
});

app.controller('videoController', ['$scope',
  function MyCtrl($scope) {

    $scope.product = {
      name: 'some name',
      description: 'some description',
      media: [{
        src: 'gZNm7L96pfY'
      }]
    };

    $scope.getIframeSrc = function(src) {
      return 'https://www.youtube.com/embed/' + src;
    };
  }
]);

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script src="https://code.angularjs.org/1.2.1/angular.js"></script>
 
</head>

<body ng-controller="videoController">
  <div ng-repeat="media in product.media">
    <div class="thumbnail">
      
      
      <div class="video-container">
        <iframe width="100%" ng-src="{{getIframeSrc(media.src)}}" frameborder="0 " allowfullscreen></iframe>
      </div>
    </div>
  </div>
</body>

</html>

Collectives™ on Stack Overflow

youtube video is not playing from from html5 using ng-src directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related