Forums / Developer / Passing href attribute value [SOLVED]

"Please Note:
  • At the specific request of Ibexa we are changing this projects name to "Exponential" or "Exponential (CMS)" effective as of August, 11th 2025.
  • This project is not associated with the original eZ Publish software or its original developer, eZ Systems or Ibexa".

Passing href attribute value [SOLVED]

« 
Previous topic
|
Developer
|
Next topic
 »
Author Message

Lo' F.

Tuesday 19 October 2010 4:13:09 am

Hi again!

I am puzzling over one thing and I was wondering if there may be one ready to go solution which I might not be aware of!

I have a frontpage object devided into two columns.

In the right column I have a list of videos and it will be nice and cool to see the clicked video in the left column of this page.

I have racked my brain over it, since I have trouble passing the clicked video's file path to the href attribute of an <a> tag of an external template containing the script used to render these videos which I included in this page's left column.

I really, really, really look forward to your help!!

Thanks a lot!

loredanaebook.it

Lo' F.

Tuesday 19 October 2010 9:28:08 am

I have been trying implementing an ajax script but just can pass the template content into a div, not able to pass value to its <a href=..>.

So I skipped Ajax for jQuery but when I pass the value through jquery.. cannot make it work - when I click the video it just ignores the given video's path (the player behaves as it is searching for the file and cannot find it) even though on mouse over this path is displayed in the browser status bar and in firebug the value matches the href attribute.

This is the jquery script inserted in the head of pagelayout.tpl:

{literal}
<script type="text/javascript">
var videoPath = "";
var videoTitle = "";
$(document).ready(function() {
  $("a#video").click(function() { 
    videoPath = $(this).attr('href');
    videoTitle = $(this).attr('title');
    //alert(videoPath + "\r\n " +videoTitle);
    return false;
  });
});

$(document).ready(function() {
  $("a#player").attr({href: videoPath, title: videoTitle});
});
</script>
{/literal}

..

If there might be something to accomplish what I am trying to do, which has more to do with Exponential I am all ears!

Or if you can see any flaw in here why it is behaving such so, any hint would be, as always, highly appreciated!

loredanaebook.it

Lo' F.

Wednesday 20 October 2010 5:37:08 am

..made a teeny-tiny progress but still couldn't get it work properly.

I added this line too..

$('object#videoplayer_api param[name=flashvars]').attr('value','config={"clip":{"autoPlay":false,"autoBuffering":true,"url":"' + videoPath + '"},"playerId":"player","playlist":[{"autoPlay":false,"autoBuffering":true,"url":"' + videoPath + '"}]}');

..to pass the variable value to the rendered object (which comes compiled when the page is loaded - the original script recalls just an <a> tag and a floplayer's script).

The progress is that, with this line, unlike before, when the page is loaded the player get the default videoPath value and plays that video.

But if I click on other videos' link, it successflully passes the related value to the code (which I can see from firebug) but it still keeps playing the default video.

One strange thing I noticed is that in IE, when checking the code through its developers tool, the above code has no value within the brackets of clip: and playlist:.

loredanaebook.it

Quoc Huy Nguyen Dinh

Wednesday 20 October 2010 6:04:03 am

Is it what you want to get?

<html>

<head>
<style>
#player {
width: 480px;
height: 385px;
border: solid 1px #000;
float: left;
margin-right: 15px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $(".video").click(function() {
    $("#player").html('<object width="480" height="385"><param name="movie" value="' + $(this).attr('href') + '"></param><param value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="'+ $(this).attr('href') +'" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>');
    return false;
  });
});
</script>
</head> 

<body>
<div id="player"></div>
<div id="list">
Video list:<br/>
<a href="http://www.youtube.com/v/Ylco0bkFYIo?fs=1&amp;hl=en_US" class="video">Exponential 4.3 demo</a><br/>
<a href="http://www.youtube.com/v/w4Rx1U-heYg?fs=1&amp;hl=en_GB" class="video">eZ Awards 2010</a>
</div>
</body></html>

Quoc Huy Nguyen Dinh

Wednesday 20 October 2010 6:19:34 am

When you use the <embed> tag, the URL of that tag is the SWF player which in turns load the URL of the video.

I might be wrong but I don't think you can dynamically change the URL video as it is internal to the SWF unless you recode the SWF to support this.

You need to rebuild the whole <embed> HTML code and replace the existing one as my example above.

Lo' F.

Friday 22 October 2010 12:43:07 pm

Hi Quoc Huy, thanks for your reply!

More or less it was that what I was aiming to do, but had to pass the video path to a Flowplayer object (which is created by a flowplayer script )

I finally managed to dynamically change the URL video this way:

- just set this script in the head of the document..

{literal}
  <script type="text/javascript">
    $(document).ready(function() {
      $("a.video").click(function () {
         mediaplayer.setClip({url: $(this).attr("href")});
         return false;
      });
    });
  </script>
{/literal}

- embedded this script in an external template included into a div of my frontpage left column..

<a style="display:block;width:500px;height:300px;"  id="player"></a>
<script type="text/javascript" language="javascript">
    mediaplayer = flowplayer("player", "/extension/ezextension/design/ezextension/javascript/flowplayer/flowplayer-3.2.5.swf", {
                  clip: {
                       autoPlay: false,
                       autoBuffering: true
                  }
    });
</script>

- and set a class name for the <a> tag of each fetched video where the event comes triggered..

{def $videos=fetch('content', 'tree', hash('parent_node_id', 2, 'class_filter_type', 'include', 'class_filter_array', array('video_content')))}
{foreach $videos as $video}
    <a href="{concat('/', $video.data_map.video.content.filepath)}" title="{$video.data_map.title.content}" class="video">Watch video</a>
{/foreach}

loredanaebook.it

Quoc Huy Nguyen Dinh

Monday 25 October 2010 7:44:21 am

So Flowplayer has been built with this in mind.

Great stuff!