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

ScalaBoy Published at Dev

Scalaboy

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

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.