私は次のコードでのCSS、SVGの背景画像を持ってプレーし、一時停止を切り替えるために使用される再生ウィンドウは、以下の外部のボタンを持って、素晴らしい作品:外部プレイポーズボタンスワップ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>
がTHIを得ていません私はこれを挿入すると表示されません: jwplayer()。( '再生'、機能(){ $( '。jwp-btn')。空().html( " 一時停止 "); }); (再生); }); (ja) – gigaboy
間違いはありますか?おそらく、あなたはそれらをjwplayer()にまとめるべきです( 'ready '、function(){THE CODE GOESISERE});' –
あなたの提案を試しても、プレーヤーはまだロードされません。エラーを探して、デバッガには何も表示されません。 – gigaboy