{% assign cplayer = site.data.meng.music_player %} <style> k-cplayer{
position: fixed; bottom: 130px; -webkit-box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px; box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px; transition: transform .5s ease;
}
@media screen and (max-width: 600px){ #k-cplayer{ transform:translateX(-300px) } }
</style> <script src=“cdn.bootcss.com/cplayer/3.1.3/cplayer.js”>> <div id=“k-cplayer”> <div class=“k-music-btn”>></div> </div> <script>
jQuery(document).ready(function ($) { var player = new cplayer({ element: document.getElementById('k-cplayer'), playlist: [ {% for music in cplayer.music %} { src: '{{music.url}}', poster: '{{music.pic}}', name: '{{music.title}}', artist: '{{music.author}}', }, {% endfor %} ] });
if($(window).width()<=600){
var flag = true;
}else{
var flag = false;
}
$('.k-music-btn').click(function(){
if (flag == false){ $('#k-cplayer').css('transform','translateX(-300px)'); flag = true; }else if(flag == true){ $('#k-cplayer').css('transform','translateX(0px)'); flag = false; }
});
document.addEventListener("visibilitychange", function() { if(document.visibilityState == "hidden" ){ player.pause(); } if(document.visibilityState == "visible"){ if($(window).width()>600){ player.play(); } } }, false); })
</script>