jPlayer - Save user settings through page redirect's

I've been on this for a few days now. I can't get this to work. Hopefully someone can help me out and point me into the right direction.

Using jPlayer (http://jplayer.org)

I need to set cookies to the following below so when the user goes back to that webpage the player has those settings saved!

1) volume
2) play (auto play)
3) stop
4) song (track)

Thank you! Tim

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<link href="music/dist/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="music/lib/jquery.min.js"></script>
<script type="text/javascript" src="music/lib/jquery.cookie.min.js"></script>

<script type="text/javascript" src="music/dist/jplayer/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="music/dist/add-on/jplayer.playlist.js"></script>


<script type="text/javascript">
//<![CDATA[

$(document).ready(function(){

    new jPlayerPlaylist({
        jPlayer: "#jquery_jplayer_1",
        cssSelectorAncestor: "#jp_container_1"
    }, [
        {
            title:"Cro Magnon Man",
            mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
            oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
        },
        {
            title:"Your Face",
            mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
            oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg"
        },
        {
            title:"Cyber Sonnet",
            mp3:"http://www.jplayer.org/audio/mp3/TSP-07-Cybersonnet.mp3",
            oga:"http://www.jplayer.org/audio/ogg/TSP-07-Cybersonnet.ogg"
        },
        {
            title:"Tempered Song",
            mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3",
            oga:"http://www.jplayer.org/audio/ogg/Miaow-01-Tempered-song.ogg"
        },
        {
            title:"Thin Ice",
            mp3:"http://www.jplayer.org/audio/mp3/Miaow-10-Thin-ice.mp3",
            oga:"http://www.jplayer.org/audio/ogg/Miaow-10-Thin-ice.ogg"
        }
    ], {
        swfPath: "music/dist/jplayer",
        supplied: "oga, mp3",
        wmode: "window",
        useStateClassSkin: true,
        autoBlur: false,
        loop: true,
        smoothPlayBar: true,
        keyEnabled: true
    });
});
//]]>
</script>
</head>
<body>



<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
    <div class="jp-type-playlist">
        <div class="jp-gui jp-interface">
            <div class="jp-controls">
                <button class="jp-previous" role="button" tabindex="0">previous</button>
                <button class="jp-play" role="button" tabindex="0">play</button>
                <button class="jp-next" role="button" tabindex="0">next</button>
                <button class="jp-stop" role="button" tabindex="0">stop</button>
            </div>
            <div class="jp-progress">
                <div class="jp-seek-bar">
                    <div class="jp-play-bar"></div>
                </div>
            </div>
            <div class="jp-volume-controls">
                <button class="jp-mute" role="button" tabindex="0">mute</button>
                <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
                <div class="jp-volume-bar">
                    <div class="jp-volume-bar-value"></div>
                </div>
            </div>
            <div class="jp-time-holder">
                <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
                <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
            </div>
            <!-- <div class="jp-toggles">
                <button class="jp-repeat" role="button" tabindex="0">repeat</button>
                <button class="jp-shuffle" role="button" tabindex="0">shuffle</button>
            </div> -->
        </div>
        <div class="jp-playlist">
            <ul>
                <li>&nbsp;</li>
            </ul>
        </div>
        <div class="jp-no-solution">
            <span>Update Required</span>
            To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
        </div>
    </div>
</div>
</body>

</html>

My code is untested, so if any errors and you can't fix just reply.

Don't use cookies. Use Web Storage instead http://www.w3schools.com/html/html5_webstorage.asp

You have two options which should suit your needs:

window.localStorage - stores data with no expiration date

window.sessionStorage - stores data for one session (data is lost when the browser tab is closed)

I presume you want sessionStorage.

$(document).ready(function(){
window.userSettings = null;

new jPlayerPlaylist({
    jPlayer: "#jquery_jplayer_1",
    cssSelectorAncestor: "#jp_container_1"
}, [
    {
        title:"Cro Magnon Man",
        mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
        oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
    },
    {
        title:"Your Face",
        mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
        oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg"
    },
    {
        title:"Cyber Sonnet",
        mp3:"http://www.jplayer.org/audio/mp3/TSP-07-Cybersonnet.mp3",
        oga:"http://www.jplayer.org/audio/ogg/TSP-07-Cybersonnet.ogg"
    },
    {
        title:"Tempered Song",
        mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3",
        oga:"http://www.jplayer.org/audio/ogg/Miaow-01-Tempered-song.ogg"
    },
    {
        title:"Thin Ice",
        mp3:"http://www.jplayer.org/audio/mp3/Miaow-10-Thin-ice.mp3",
        oga:"http://www.jplayer.org/audio/ogg/Miaow-10-Thin-ice.ogg"
    }
], {
    swfPath: "music/dist/jplayer",
    supplied: "oga, mp3",
    wmode: "window",
    useStateClassSkin: true,
    autoBlur: false,
    loop: true,
    smoothPlayBar: true,
    keyEnabled: true,
    ready: function () {
        storeUserjPlayerSettings();
        //Auto play music when jPlayer is ready
        if (userSettings[0].autoPlay)
        {
              $("#jquery_jplayer_1").jPlayer("play");           
        }      
    },
});
});

function storeUserjPlayerSettings(){

var settings = new Object();

settings.volume = $("#jquery_jplayer_1").data().jPlayer.status.volume;
settings.paused = $("#jquery_jplayer_1").data().jPlayer.status.paused;
settings.src = $("#jquery_jplayer_1").data().jPlayer.status.src; //(I presume u want src and not title...)
//Jplayer doesn't have autoplay setting, you'll need to manually set autoPlay somewhere
settings.autoPlay = autoPlay;

sessionStorage.setItem('userjPlayerSettings', JSON.stringify(settings));
window.userSettings = JSON.parse(sessionStorage.getItem('userjPlayerSettings'));
}

Access individual elements by:

 var volume = userSettings [0].volume;

来源：https://stackoverflow.com/questions/35446916/jplayer-save-user-settings-through-page-redirects

标签

javascript

jquery

html

jplayer