Question

我正在创建一个在线课程应用程序并将视频存储在YouTube上。当用户点击课程时，他们应该会看到嵌入的YouTube视频。然而，它只是创建了视频帧，视频无法播放。

这是我的角度控制器代码。 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')
};
}
}());

这是我的HTML代码。视图course.client.view.html。我试过两种不同的方法。两者都失败了。

<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>

请告诉我，我在这里错了。

Answer 1

尝试添加此内容而不是视频控件将其加载到iframe中，

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

<强>样本

＆＃13;

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;
    };
  }
]);

＆＃13;

<!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>

＆＃13;

youtube视频不是使用ng-src指令从html5播放的

1 个答案: