程序员经验分享-hwhale

jPlayer - 通过页面重定向保存用户设置

2024-02-01

我已经关注这个问题好几天了。我无法让它发挥作用。希望有人可以帮助我并指出我正确的方向。

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

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

1）体积
2）播放（自动播放）
3) stop
4) 歌曲（曲目）

谢谢你！ 蒂姆

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

我的代码未经测试，因此如果有任何错误并且您无法修复，请回复。

不要使用cookie。使用网络存储代替http://www.w3schools.com/html/html5_webstorage.asp http://www.w3schools.com/html/html5_webstorage.asp

您有两种适合您需求的选择：

window.localStorage - 存储没有过期日期的数据

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

我猜你想要 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'));
}

通过以下方式访问各个元素：

 var volume = userSettings [0].volume;
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

html

jplayer

jPlayer - 通过页面重定向保存用户设置 的相关文章

随机推荐

热门标签