youtube 视频未使用 ng-src 指令从 html5 播放答案

【问题标题】：youtube video is not playing from from html5 using ng-src directiveyoutube 视频未使用 ng-src 指令从 html5 播放
【发布时间】：2017-06-03 13:58:52
【问题描述】：

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

这是我的角度控制器代码。 course.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 代码。查看课程.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>

请告诉我，这里哪里出错了。

【问题讨论】：

标签： javascript angularjs html video youtube

【解决方案1】：

尝试添加它，而不是将视频控件加载到 iframe 中，

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

演示

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>

【讨论】：