외부 재생 일시 정지 버튼 스왑 SVG 및 국가의 텍스트 변경

Question

내가 다음 코드를 사용하여 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> 

Answer 1

당신은 파일에 대한 HTML, Js 코드를 (단지 하나의 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"); 
});