Question

我在播放窗口下方有一个外部按钮用于切换播放和暂停，其中有一个带有以下代码的CSS SVG背景图片，效果很好：

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

我想要做的是状态更改，以便如果按钮上显示"> Play"，并且用户点击要播放的按钮，那么SVG和文本会切换到"|| Pause" （使用不同的SVG和文本）。如果再次点击按钮，则反转。

我怀疑这会使用JavaScript（我可以使用jQuery，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");
 });

外部播放暂停按钮交换SVG＆amp;关于国家变化的文本

1 个答案: