Question

我有一个用PrimeFaces编写的Web应用程序。左侧导航栏包含指向MP4视频的链接。我试图保存上次观看视频的位置，以便用户不必从头开始。示例：用户观看10分钟的视频1并跳转到视频3并观看该视频5分钟并返回视频1.返回视频1时，他应该在第10分钟开始。现在它将它重置为0.

    <h:body onload="PFMedia.pageIndex = 0">

        <p:layout fullPage="true">

            <p:layoutUnit position="center">
                <!--h1 align="center">Part 1:  Introduction</h1-->
                <h1 id="jQuerySampleHeading"/>
                <!-- Begin Content -->
                <h2>OPUS Projects Manager's Training Videos</h2>
                <p>These videos detail the key points for using OPUS Projects. They can be used to:</p>
                <ol>
                    <li>Preview what OPUS PROJECTS can do, so that you can decide if you want to take Manager's training.</li>
                    <li>Serve as refreshers for those who have completed Manager's Training.</li>
                    <li>Be part of formal OPUS PROJECTS training classes.</li>
                </ol>
                <p>Viewing these videos is not an alternate way to obtain the training needed to be a Manager.</p>
                <p>To receive Manager's Training, please see our <a href="https://www.ngs.noaa.gov/corbin/calendar.shtml">training calendar</a>.</p>
                <p style="font-weight: bold">This site has been proven to be compatible with Google Chrome and Internet Explorer 11.<br/>
                    Microsoft Edge users may not be able to view this website due to compatibility issues.</p>
                <div id="chromeVideoContainer" align="center">
                    <video id="jQueryVideoTag" width="600" height="400" autoplay="true" controls="true">
                        <!--source id="jQuerySampleVideo" type="video/mp4"/-->
                        <source src="https://www.ngs.noaa.gov/corbin/class_description/videos/Part1_Intro.mp4" type="video/mp4"/>
                    </video>
                </div>
            </p:layoutUnit><br/>
            <a href="createProject.xhtml">Next Video</a>
        </p:layout>

    </h:body>

var PFMedia = {};

$(window).on("load", PFMedia.initPage());
$(window).on("load", PFMedia.loadUserSession(PFMedia.pageIndex));

PFMedia.initPage = function () {
$("#jQueryVideoTag").on(
    "timeupdate",
    function (event) {
        PFMedia.onTrackedVideoFrame(this.currentTime);
    });

$(window).on("beforeunload", function () {
    //alert("Page is about to be unloaded, saving user session at time " + PFMedia.currentTime);
    PFMedia.saveUserSession(PFMedia.pageIndex);
});
};

PFMedia.onTrackedVideoFrame = function (currentTime) {
console.log("Current video time: " + currentTime);
this.currentTime = currentTime;
};

PFMedia.getPartNumber = function (pageIndex)
{
if (pageIndex <= 2)
{
    pageIndex++;
}
return pageIndex;
};

PFMedia.loadUserSession = function (pageIndex)
{
PFMedia.pageIndex = pageIndex;
console.log(window.body);
$.ajax({
    url: "userSession?cmd=loadSession&videoPage=" + pageIndex,
    context: window.body
}).done(function (data) {
    //alert("Raw XML data: " + data);
    var videoPosition;
    xmlDoc = $.parseXML(data);
    $xml = $(xmlDoc);
    console.log("XML data: " + data);
    var jqueryHeader = $("#jQuerySampleHeading");
    if (jqueryHeader)
    {
        $videoPos = $xml.find("videoPosition");
        if ($videoPos)
        {
            videoPosition = $videoPos.text();
            if (!videoPosition || videoPosition === "")
            {
                videoPosition = 0.0;
                console.log("Could not retrieve video position from the server, using a default of 0.0.");
            }
        }
        else
        {
            videoPosition = 0.0;
            console.log("Could not retrieve video position from the server, using a default of 0.0.");
        }
    }
    var jqueryVideo = document.getElementById("jQueryVideoTag");
    if(jqueryVideo)
    {
        if(videoPosition > 0.0) {
            var setPos = window.confirm("You left off at " + videoPosition
                    + ", would you like to continue from there?");
            if(setPos)  {
                alert("Starting video at " + videoPosition);
                jqueryVideo.currentTime = videoPosition;
            }
        }
    }
    else
    {
        console.log("Could not retrieve video tag from HTML document.");
    }
});
};

PFMedia.saveUserSession = function (pageIndex)
{
console.log("Current video time: " + PFMedia.currentTime +
        ", video " + pageIndex);
$.ajax({
    url: "userSession?cmd=saveSession&videoPage=" + pageIndex +
            "&videoTime=" + PFMedia.currentTime,
    context: document.body
});
};

Answer 1

$(window).on("load", PFMedia.initPage());
$(window).on("load", PFMedia.loadUserSession(PFMedia.pageIndex));

您未将initPage和loadUserSession函数绑定为加载事件处理程序。相反，您立即调用它们，然后尝试绑定它们作为事件处理程序返回的任何内容而是这样做：

$(window).on("load", PFMedia.initPage); // no braces, because we're not calling initPage
$(window).on("load", function() {
    // an anonymous function as handler, so we can call loadUserSession with a parameter
    PFMedia.loadUserSession(PFMedia.pageIndex);
});

使用PrimeFaces的JavaScript OnLoad Listener

1 个答案: