外部播放暂停按钮交换SVG和状态更改文本

我在播放窗口下面有一个外部按钮,用于切换播放和暂停,它有一个CSS SVG背景图像,带有以下代码,效果很好:

<a onclick="jwplayer().play();" class="jwp-btn jwp-btn-icon-pl">Play</a>

我想做的是改变状态,这样如果 "> Play" 显示在按钮上,用户单击按钮播放SVG和文本切换到的内容 "|| Pause" (使用不同的SVG和文本)。如果再次单击按钮,则返回。

我怀疑这将使用JavaScript(我可以使用,jQuery也可以),并且 jwplayer().on('play') 和 jwplayer().on('pause') 事件触发器。SVG图标不必在CSS中。

但我不知道如何做到这一点。

以下是播放器代码(也使用播放列表):

<script>
              var playerInstance = jwplayer("containerpreview");
                playerInstance.setup({
                  //file: "//content.jwplatform.com/videos/12345.mp4",
                  //image: "//content.jwplatform.com/thumbs23456.jpg",
                  //playlist: "//content.jwplatform.com/feeds/123.rss",
                  playlist: "//cdn.jwplayer.com/v2/playlists/222?format=mrss",
                  displaytitle: false,
                  width: "100%",
                  aspectratio: "16:9"
                });

                var list = document.getElementById("list");
                var html = list.innerHTML;

                playerInstance.on('ready',function(){
                var playlist = playerInstance.getPlaylist();
                for (var index=0;index<playlist.length;index++){
                var playindex = index +1;
                html += "<li><span class='dropt' title='"+playlist[index].title+"'><a href='javascript:playThis("+index+")'><img height='75' width='120' src='" + playlist[index].image + "'</img></br>"+playlist[index].title+"</a></br><span style='width:500px;'</span></span></li>"
                list.innerHTML = html;
                }

                });

                function playThis(index) {
                playerInstance.playlistItem(index);
                }

              </script>