creativeguy

Call to a $page->field from within script

Recommended Posts

creativeguy    0

Hey all - I'm a graphic designer making the transition to web design and have been learning PW from my developer business partner. First post.

So, I've got a bit of code that's NOT working, but pretty sure it's CLOSE to working. I just get a null result, not errors. I have a feeling that the reason I haven't found an answer to this is because this is so simple and straight forward, no one's ever had this problem. It's my new-ness to the development world. Anyway, the idea is that I'm calling a video, and triggering one of 2 files, depending on the screen size. However, I'm stuck at the video source part. I (stupidly) tried to call to the $page->field like PHP only to remember this is JS. How do I get a $page value in this case? This code was a snippet I found (not mine), but you'll see in v0 and v1 is where I'm trying (and failing) to grab the video URL from Amazon S3.

<!--my JS-->
<script>

  var v = new Array();
  v[0] = $page->video_720->url;
  v[1] = $page->video_1080->url;

  function changeVid() {
      var video = document.getElementById('video');
      if (screen.height <= 720) video.setAttribute("src", v[0]);
      else if (screen.height > 720) video.setAttribute("src", v[1]);
      
      video.load();
  }

  changeVid();

</script>


<!--html-->
<!--Video-->
<video id='video' poster='<?= $page->poster->url ?>' preload controls>
<source src='#' type='video/mp4'/>
</video>

 

Share this post


Link to post
Share on other sites
psy    150

Hi and welcome to the forums.

Not sure this is the right forum for your question, but..

The same way you call the poster... ie wrap the code in php tags:

46 minutes ago, creativeguy said:

v[0] = <?=$page->video_720->url?>;

v[1] = <?=$page->video_1080->url?>;

The template will then render the $page->video within the javascript before outputting to the browser.

  • Like 1

Share this post


Link to post
Share on other sites
creativeguy    0

Thanks for the help psy! I knew that was going to be easier than I thought. Makes too much sense, so I couldn't see it.

That said, I'm still getting a "#" for the source, so no video is being loaded from the changeVid(); function. My understanding was that the # would be replaced by the JS, but that seems not the case. You answered my PW question, thank you. Looks like I have to do some more troubleshooting on the JS.

Share this post


Link to post
Share on other sites
psy    150

Maybe you need to carry var v into the function:

<script>

  var v = new Array();
  v[0] = <?=$page->video_720->url?>;
  v[1] = <?=$page->video_1080->url?>;

  function changeVid(v) {
      var video = document.getElementById('video');
      if (screen.height <= 720) video.setAttribute("src", v[0]);
      else if (screen.height > 720) video.setAttribute("src", v[1]);
      
      video.load();
  }

  changeVid(v);

</script>

 

Edited by psy
Corrected - copied your original without the php tags

Share this post


Link to post
Share on other sites
creativeguy    0

Unfortunately not. The "#" keeps persisting as the source. I think I may have to sit down with the developer again - usually when it makes no sense, it's because I've implemented into the theme incorrectly.

Share this post


Link to post
Share on other sites
Macrura    2,142

put the src on the video element, not on the nested source element - the js is setting the src on the video element, not the video's source element

Share this post


Link to post
Share on other sites
creativeguy    0

Still returns "#" as the source.

 

EDIT: I've added the JS to the scripts section of _main to be clear.

Edited by creativeguy
Added more information

Share this post


Link to post
Share on other sites
creativeguy    0

In case anyone reads this thread and wonders what happened, I've ultimately given up this approach in favour of finding an existing video player that has a resolution selector.

Share this post


Link to post
Share on other sites
dragan    212

did you try this?

On 2.9.2017 at 1:54 AM, creativeguy said:

 


<!--my JS-->
<script>

  function changeVid() {
      var video = document.getElementById('video');
      if (screen.height <= 720) video.setAttribute("src", <?=$page->video_720->url?>);
      else if (screen.height > 720) video.setAttribute("src", <?=$page->video_1080->url?>);
      
      video.load();
  }

  changeVid(); // put this inside window.load or document.ready..., or even window.resize

</script>

 

 

  • Like 1

Share this post


Link to post
Share on other sites
creativeguy    0

Hey Dragan - I appreciate the follow up. One reason I didn't mention that I had abandoned this approach is because on one particular template, there are multiple videos being called through a foreach loop. The original code was setting all the videos to the same single video. I haven't tried your code as yet, but before I do, do you see an issue there?

Share this post


Link to post
Share on other sites
dragan    212

Well, if you're using several videos, this won't work.

But you could simply add the two video URLs in data-attributes.

<video id='video' data-src-720="<?=$page->video_720->url?>">...</video>

<video id='video' data-src-1080="<?=$page->video_1080->url?>">...</video>

You could even get rid of IDs altogether. Just create a JS function that sets each video src on resize / window load with reading out the data-attributes.

https://www.sitepoint.com/use-html5-data-attributes/

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.