外部プレイポーズボタンスワップSVG＆テキスト

Question

私は次のコードでのCSS、SVGの背景画像を持ってプレーし、一時停止を切り替えるために使用される再生ウィンドウは、以下の外部のボタンを持って、素晴らしい作品：

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

私がしたいのは状態の変更です。ボタンに"> Play"が表示され、ユーザーがボタンをクリックして再生すると、SVGとテキストが"|| Pause"（別のSVGとテキストを使用）にスワップします。ボタンをもう一度クリックすると元に戻ります。

これはJavaScript（私はOKですが、jQueryもOKです）と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> 

Answer 1

あなたはどのHTML、あなたのファイルに関するJsコード（1つだけaタグが十分ではありません）が、この意志を提供していませんでしたあなたがこれを行うことができます方法についてのアイデアを与える：

JS/jQueryの：

jwplayer("containerpreview").on('play', function(){ 
     $('.jwp-btn').empty().html("Your (Pause)SVG Element"); 
}); 

jwplayer("containerpreview").on('pause', function(){ 
     $('.jwp-btn').empty().html("Your (Play)SVG Element"); 
});