外部播放暂停按钮在状态更改时交换 SVG 和文本
External Play Pause Button Swap SVG & Text on State Change
我在播放 window 下方有一个外部按钮,用于切换播放和暂停,它有一个 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>
您没有提供任何关于文件的 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");
});
我在播放 window 下方有一个外部按钮,用于切换播放和暂停,它有一个 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>
您没有提供任何关于文件的 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");
});