Jwplayer with angularjs

Question

I am trying in several ways to start jwplayer in my web app in which i use angularjs.. I need to pass at file option a dynamic link of the file. In my controller i can have the dynamic link with a simple function

getVideoStreaming: function(file) {
    $scope.fileName = file.name;
    $scope.documentId = document.id;
    $scope.videoSrc = "http://mywebserver.com/" + $scope.fileName;
},

this function is called when i click in a button that opens a modal in which i want show the video.

<button data-uk-modal="{target:'#videoPlayer'}" data-ng-click="files.getVideoStreaming(file)"> Open video </button>

Now the question.. how can i pass this variable to my modal? According to the jwplayer basic configuration this is what i should do:

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

but of course, as i've just said, i need file dynamic. Is it possible find a solution to this?

halfer · Accepted Answer · 2019-08-07 07:37:01Z

2

I have not tried to use JWPlayer from within a modal, but the directive I wrote should work for you. If not, then maybe you can reverse engineer and adapt. See how I use ng-src for the video file, with the directive is watching for a change.

ng-jwplayer

or bower install ng-jwplayer --save

Then use like:

<jwplayer ng-src="{{ videoSrc }}"
         player-options="options"
         player-id="myPlayer1">
</jwplayer>

and move your options to

...
$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!'
}

The package also uses a service to ensure the global jwplayer does not get instantiated multiple times.

edited Aug 7, 2019 at 7:37

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Oct 15, 2015 at 4:07

dkarchmer

5,6344 gold badges28 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jwplayer with angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related