Help with replacing video player code


#1

A previous web video script had code that created a pop-up/modal video player. I'm attempting to add a modal player to the web script that I'm using now. The code below shows the previous code using the jw player. The new script uses the mediaelement player (at another script area). The mediaelement player appears to located at ../themes/default/player/ folder. In the folder is css/media-elementplayermin.css and js/mediaelement-and-player.min.js. Any insight/guidance into what/how I should replace the jwPlayer in the following code, would be appreciated:

<script src="/inc/js/jwplayer/jwplayer.js"></script>
    <script>jwplayer.key="ptjJrvi3YcZfpkwX0KQT7v11POQ7ql+ormMJMg==";</script>

    <div class="modal fade" id="modalPlayer" tabindex="-1" role="dialog" aria-labelledby="modalPlayerLabel" data-file="" data-preview="">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="modalPlayerLabel"></h4>
                </div>
                <div class="modal-body">
                    <div style="display:flex;justify-content: center;">
                        <div>
                            <div id="videoPlayerBox"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function(){
            var playerInstance = jwplayer("videoPlayerBox");

            $('#modalPlayer').on('shown.bs.modal', function(){
                console.log('window opened');
                playerInstance.setup({
                    file: $(this).attr('data-file'),
                    image: $(this).attr('data-preview'),
                    width: 540,
                    height: 405
                });
            });

            $('a[data-link-type=modal]').click(function(){
                console.log('hit on link');
                var modalWindow = $('#modalPlayer');

                modalWindow.attr('data-file', $(this).attr('data-file'));
                $('#modalPlayerLabel').html($(this).attr('data-title'));
                modalWindow.modal('show');
            });

        });
    </script>