온라인 코스 애플리케이션을 만들고 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 코드입니다. view-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>
여기서 내가 어디로 잘못 가고 있는지 알려주십시오.
이것을 추가하고 비디오 컨트롤 대신 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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다