javascript - 外部播放暂停按钮在状态更改时交换 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");
 });