嘗試使用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加載視頻時出錯

回答

相關問題