Jump to content

Call to a $page->field from within script


creativeguy
 Share

Recommended Posts

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>

 

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

  • 3 weeks later...

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
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...