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

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

转载作者：行者123 更新时间：2023-12-03 07:40:08

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

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

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

1) 音量
2)播放(自动播放)
3)停止
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

您有两个适合您需求的选项:

window.localStorage - stores data with no expiration date

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

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

关于javascript - jPlayer - 通过页面重定向保存用户设置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35446916/

文章推荐： c - 整数范围和溢出

文章推荐： perl - 使用 Perl Tkx 处理错误

jquery - 如果隐藏字段值更改，则应启用“保存”按钮。如果输入相同的值，则应再次禁用“保存”按钮
我尝试根据表单元素的更改禁用/启用保存按钮。但是，当通过弹出按钮选择更改隐藏输入字段值时，保存按钮不受影响。下面是我的代码。我正在尝试序列化旧的表单值并与更改后的表单值进行比较。但我猜隐藏的字段值无
python - 保存 django mongoengine 模型实例时无效的 EmbeddedDocumentField 项(保存()失败)
我正在尝试保存模型的实例，但我得到了 Invalid EmbeddedDocumentField item (1) 其中 1 是项目的 ID(我认为)。模型定义为 class Graph(Docum
iphone - 以 72 dpi 保存 UIImage(Retina 模拟器以 144 dpi 保存)
我有一个非常奇怪的问题......在我的 iPhone 应用程序中，用户可以打开相机胶卷中的图像，在我的示例中 1920 x 1080 像素 (72 dpi) 的壁纸。现在，想要将图像的宽度调整为例
Primefaces 保存/通过过滤数据表结果列表
目前，我正在使用具有排序/过滤功能的数据表成功地从我的数据库中显示图像元数据。在我的数据表下方，我使用第三方图像覆盖流( http://www.jacksasylum.eu/ContentFlow/
Javascript 保存、删除和重新加载输入值
我的脚本有问题。我想按此顺序执行以下步骤: 1. 保存输入字段中的文本。 2. 删除输入字段中的所有文本。 3. 在输入字段中重新加载之前删除的相同文本。我的脚本的问题是 ug()- 函数在我的文本
Laravel 保存/更新多对多关系
任何人都可以帮助我如何保存多对多关系吗？我有任务，用户可以有很多任务，任务可以有很多用户(多对多)，我想要实现的是，在更新表单中，管理员可以将多个用户分配给特定任务。这是通过 html 多选输入来完成
Tensorflow 保存/恢复批量归一化
我在 Tensorflow 中训练了一个具有批归一化的模型。我想保存模型并恢复它以供进一步使用。批量归一化是通过完成的 def batch_norm(input, phase): retur
唯一/保存/更新的Grails问题
我遇到了 grails 的问题。我有一个看起来像这样的域: class Book { static belongsTo = Author String toString() { tit
JavaScript - 保存、存储和更新数组
所以我正在开发一个应用程序，一旦用户连接(通过 soundcloud)，就会出现以下对象: {userid: userid, username: username, genre: genre, fol
Angular 保存/恢复组件状态
我正在开发一个具有多选项卡布局的 Angular 7 应用程序。每个选项卡都包含一个组件，该组件可以引用其他嵌套组件。当用户选择一个新的/另一个选项卡时，当前选项卡上显示的组件将被销毁(我不仅仅是隐
Java JTextPane 保存
我尝试使用 JEditorPane 进行一些简单的文本格式化，但随着知识的增长，我发现 JTextPane 更容易实现并且更强大。我的问题是如何将 JTextPane 中的格式化文本保存到文件？它应
Docker:保存 - 不产生输出
使用 Docker 相当新。我为 Oracle 11g Full 提取了一个图像。创建了一个数据库并将应用程序安装到容器中。正确配置后，我提交了生成 15GB 镜像的容器。测试了该图像的新容器，
ios - 将核心数据值传递到文本字段中以进行编辑/保存
我是使用 Xcode 和 swift 的新手，仍在学习中。我在将核心数据从实体传递到文本字段/标签时遇到问题，然后用户可以选择编辑和保存记录。我的目标是，当用户从 friendslistViewCon
java - 保存/加载具有依赖关系的对象的可靠方法？
我正在用 Java 编写 Android 游戏，我需要一种可靠的方法来快速保存和加载应用程序状态。这个问题似乎适用于大多数 OO 语言。了解我需要保存的内容:我正在使用策略模式来控制我的游戏实体。我
c++ - 保存/加载结构数组是个好主意吗？
我想知道使用 fstream 加载/保存某种结构类型的数组是否是个好主意。注意，我说的是加载/保存到二进制文件。我应该加载/保存独立变量，例如 int、float、boolean 而不是结构吗？我这么
c++ - 保存 QNetworkReply
我希望能够将 QNetworkReply 保存到 QString/QByteArray。在我看到的示例中，它们总是将流保存到另一个文件。目前我的代码看起来像这样，我从主机那里得到一个字符串，我想做的
Android 保存 Canvas
我正在创建一个绘图应用程序。我有一个带有 Canvas 的自定义 View ，它根据用户输入绘制线条: class Line { float startX, startY, stopX, stop
android - 保存 Intent
我有 3 个 Activity 第一个 Activity 调用第二个 Activity ，第二个 Activity 调用第三个 Activity 。第二个 Activity 使用第一个 Activi
ios - 保存 cookies ？
我想知道如何在 Xcode 中保存 cookie。我想使用从一个网页获取的 cookie 并使用它访问另一个网页。我使用下面的代码登录该网站，我想保存从该连接获得的 cookie，以便在我建立另一个连
ios - 保存/编辑重复日历事件的最佳方法
我有一个 SQLite 数据库存储我的所有日历事件，建模如下: TimerEvent *Attributes -date -dateForMark -reminder *Relat

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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