Contents

{% 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="https://cdn.bootcss.com/cplayer/3.1.3/cplayer.js"></script>
<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>

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
jekyll-theme-mdui-0.5.2.4	_includes/meng/cplayer.html
jekyll-theme-mdui-0.5.2.3	_includes/meng/cplayer.html