Call to a $page->field from within script

[creativeguy]

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>

 

[psy]

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.

[creativeguy]

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.

[psy]

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 September 2, 2017 by psy
Corrected - copied your original without the php tags

[creativeguy]

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.

[Macrura]

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

[creativeguy]

Still returns "#" as the source.

 

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

Edited September 2, 2017 by creativeguy
Added more information

[creativeguy]

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.

[dragan]

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>

 

 

[creativeguy]

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?

[dragan]

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/

[adrian]

Not sure if this helps, but this PW video fieldtype (https://github.com/adrianbj/FieldtypeVideo) makes use of http://www.mediaelementjs.com/ to play videos in HTML5 with a flash fallback if there is no browser support.

[creativeguy]

I found a new bit of Javascript someone had written which allowed me to set the src with an event listener on a button click. Within that JS function, the field can be called that holds the alternate video link. Worked out perfectly.