ng-srcディレクティブを使用してhtml5からyoutubeビデオが再生されない

私はオンラインコースアプリケーションを作成してYouTubeに保存しています。ユーザーがコースをクリックすると、埋め込まれたYouTubeビデオが表示されます。ただし、ビデオフレームは作成され、ビデオは再生されません。ng-srcディレクティブを使用してhtml5から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コードです。 view-course.client.view.html。私は2つの異なるアプローチを試みました。どちらも失敗しました。

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

私がここで間違っているところを教えてください。 IFRAME内で、この代わりに、ビデオ制御負荷のそれを追加すること

出典

2017-01-19 Vikas Pandey

てみてください、

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>

出典

2017-01-19 02:14:46 Sajeetharan

どうもありがとうございました。その期待どおりの動作。 –

ng-srcディレクティブを使用してhtml5からyoutubeビデオが再生されない

答えて

関連する問題