Reply To: Get Jquery from Advanced Custom Fields value

• Bryant

• February 26, 2018 at 4:01 am

Yea, I’m aware of both method you have mentioned. But for 2 reasons they wont work for me. The first and major one is that I’m not fluent at all with writing js.. and second, this small piece of js is for a video player (for which I have a few hundred videos).. each video has different “cue points”, amongst a few other things that would make each run of this js unique just for that player / instance of js.

Here is the js:

<script>
                window.onload = function () {
                    var onPlayergo = {
                        cuepoints: [10, 26, 43, 65],
                        qualities: ["240p", "360p", "480p", "720p", "1080p"],
                        defaultQuality: "360p",
                        sources: [
                        { type: "video/mp4",    src: "/v-assets/video/test.mp4" }               
                         
                         ]                           
                         },                     
                         
                    container = document.getElementById("player");
                    sidecarLeft = document.getElementById("sidecar-left");
                    sidecarRight = document.getElementById("sidecar-right");
                    msgOne = document.getElementById("msg-01");
                    msgTwo = document.getElementById("msg-02");
 
                    Player(container, {
                        clip: onPlayergo,
                        autoplay: false
                    }).on("cuepoint", function (e, api, cuepoint) {
                        if (cuepoint.time === onPlayergo.cuepoints[0]) {
                            jQuery(sidecarLeft).removeClass('sidecar-left-one').addClass('sidecar-left-two');
                            jQuery(sidecarRight).removeClass('sidecar-right-one').addClass('sidecar-right-two');                        
                        }
                        else if (cuepoint.time === onPlayergo.cuepoints[1]) {
                            jQuery(sidecarLeft).removeClass('sidecar-left-two').addClass('sidecar-left-three');
                            jQuery(sidecarRight).removeClass('sidecar-right-two').addClass('sidecar-right-three');
                        }               
                        else if (cuepoint.time === onPlayergo.cuepoints[2]) {
                            jQuery(sidecarLeft).removeClass('sidecar-left-three').addClass('sidecar-left-four');
                            jQuery(sidecarRight).removeClass('sidecar-right-three').addClass('sidecar-right-four');
                        }
                         
==== REMOVED ====
                     
                    }).on("beforeseek", function (e, api, pos) {
                        onPlayergo.cuepoints.forEach(function (cue) {
                            if (pos > cue) {
                                if (!isNaN(cue)) {
                                  cue = {time: cue};
                                }
                                api.trigger("cuepoint", [api, cue]);
                            }
                        });
                    });
                };
            </script>

Ideally, I would like to put this code into a template file I have for this “player custom post type”.

Above are hard coded cue points like:

cuepoints: [10, 26, 43, 65],

Now what I would like to do is have something like this:

cuepoints: [custom_field_cue_one, custom_field_cue_two, custom_field_cue_three],

So your methods above could work IF, I knew how to code js well enough. Thus the reason why I am asking for this less elegant method.