尝试使用angularjs加载视频时出错

我试图通过使用角度来播放视频文件。当我检查console.log(url)在$scope.playVideo。它传递正确的网址(http://localhost:20205/Content/RaceVideos/IE/ABB/NOTTS-2016-03-21-HT14.mp4)但我插入video.play(url);其显示以下错误。我没有任何想法，哪里会出错。我不知道这段代码是否正确？尝试使用angularjs加载视频时出错

angular.js:13920 Error: One of template or templateUrl options is required. 
at Object.l.open (ui-bootstrap-0.14.3.min.js:9) 
    at Object.play (Global.js:768) 
    at ChildScope.$scope.playVideo (VideosController.js:29) 
    at fn (eval at compile (angular.js:14817), <anonymous>:4:451) 
    at expensiveCheckFn (angular.js:15906) 
    at callback (angular.js:25885) 
    at ChildScope.$eval (angular.js:17682) 
    at ChildScope.$apply (angular.js:17782) 
    at HTMLAnchorElement.<anonymous> (angular.js:25890) 
    at HTMLAnchorElement.dispatch (jquery-2.2.1.js:4732)

角控制器

$scope.playVideo = function (url) { 
video.play(url); }

的Html

<td><a ng-click="playVideo('http://localhost:20205/Content/'+film)" target="_blank" class="cursor-pointer"><span class="glyphicon glyphicon-film"></span></a></td>

来源

2017-05-09 ManojKanth

你是怎么弄到的视频元素？ –

尝试此。动态创建video元素并将video.src设置为url。然后致电video.play();

var app = angular.module('myApp', []); 
 
app.controller('AppController', [ 
 
    '$scope', 
 
    function($scope) { 
 
    $scope.videoIcon = true; 
 
    $scope.playVideo = function(url) { 
 
     var video = document.createElement("video"); 
 
     $scope.videoIcon = false; 
 
     angular.element(document.getElementsByTagName('body')).append(video); 
 
     video.src = url; 
 
     video.play(); 
 
    } 
 
    } 
 
]);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<html ng-app="myApp"> 
 

 
<body ng-controller="AppController"> 
 
    <a ng-click="playVideo('https://www.w3schools.com/html/mov_bbb.mp4')" target="_blank" class="cursor-pointer"><span class="glyphicon glyphicon-film" ng-if="videoIcon"> 
 
</span> 
 
    
 
    </a> 
 
</body> 
 

 
</html>

来源

2017-05-09 04:50:53

完美。谢谢Geethu。 – ManojKanth

如何更改此代码以在弹出窗口上播放视频？ – ManojKanth

尝试使用angularjs加载视频时出错

回答

相关问题