jPlayer-通过页面重定向的保存用户设置 [英] jPlayer - Save user settings through page redirect's

查看：74
本文介绍了jPlayer-通过页面重定向的保存用户设置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经参加了几天.我无法使它正常工作.希望有人可以帮助我，并指出正确的方向.

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.

使用jPlayer( http://jplayer.org )

Using jPlayer (http://jplayer.org)

我需要在下面将cookie设置为以下内容，以便当用户返回该网页时，播放器将保存这些设置！

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)音量
2)播放(自动播放)
3)停止
4)首歌曲(曲目)

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

谢谢！ 蒂姆

<!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.

请勿使用Cookie.使用网络存储代替 http://www.w3schools.com/html/html5_webstorage.asp

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-存储没有到期日期的数据

window.localStorage - stores data with no expiration date

window.sessionStorage-存储一个会话的数据(关闭浏览器选项卡时数据丢失)

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

我想您想要sessionStorage.

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;

这篇关于jPlayer-通过页面重定向的保存用户设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆