我正在尝试以多种方式在使用angularjs的Web应用程序中启动jwplayer。我需要在file
选项中传递文件的动态链接。在我的控制器中,我可以通过简单的功能获得动态链接
getVideoStreaming: function(file) {
$scope.fileName = file.name;
$scope.documentId = document.id;
$scope.videoSrc = "http://mywebserver.com/" + $scope.fileName;
},
当我单击一个按钮时,将调用此功能,在该按钮中,我要显示视频。
<button data-uk-modal="{target:'#videoPlayer'}" data-ng-click="files.getVideoStreaming(file)"> Open video </button>
现在的问题..如何将这个变量传递给我的模态?根据jwplayer的基本配置,这是我应该做的:
<!-- dialog video -->
<div id="videoPlayer" class="uk-modal">
<div class="uk-modal-dialog" style="width: 680px!important;">
<a class="uk-modal-close uk-close"></a>
<h3 class="uk-panel-title">
<i class="zmdi zmdi-collection-text"></i>
{{docName}}
</h3>
<div id="myElement">Loading the player...</div>
<script type="text/javascript">
var playerInstance = jwplayer("myElement");
playerInstance.setup({
file: "http://example.com/uploads/file.mp4",
image: "http://example.com/uploads/myPoster.jpg",
width: 640,
height: 360,
title: 'Basic Video Embed',
description: 'A video with a basic title and description!'
});
</script>
</div>
</div>
但是,当然,正如我刚才所说,我需要动态设置
file
。有可能找到解决方案吗? 最佳答案
我没有尝试在模式内使用JWPlayer,但是我编写的指令应该对您有用。如果没有,那么也许您可以进行反向工程和适应。看看我如何将ng-src用于视频文件,指令正在监视更改。
ng-jwplayer
或bower install ng-jwplayer --save
然后使用像:
<jwplayer ng-src="{{ videoSrc }}"
player-options="options"
player-id="myPlayer1">
</jwplayer>
并将您的选项移至
...
$scope.videoSrc = "http://mywebserver.com/" + $scope.fileName;
$scope.options = {
image: "http://example.com/uploads/myPoster.jpg",
width: 640,
height: 360,
title: 'Basic Video Embed',
description: 'A video with a basic title and description!'
}
该软件包还使用服务来确保全局jwplayer不会被实例化多次。
关于javascript - Jwplayer与angularjs,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33099366/