Passing href attribute value [SOLVED]

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 ez publish 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">eZ Publish 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!

Powered by eZ Publish™ CMS Open Source Web Content Management. Copyright © 1999-2014 eZ Systems AS (except where otherwise noted). All rights reserved.

eZ debug

Timing: Jan 30 2025 19:34:53
Script start
Timing: Jan 30 2025 19:34:53
Module start 'layout'
Timing: Jan 30 2025 19:34:53
Module start 'content'
Timing: Jan 30 2025 19:34:53
Module end 'content'
Timing: Jan 30 2025 19:34:53
Script end

Main resources:

Total runtime0.0217 sec
Peak memory usage8,192.0000 KB
Database Queries3

Timing points:

CheckpointStart (sec)Duration (sec)Memory at start (KB)Memory used (KB)
Script start 0.00000.0043 588.1563151.2109
Module start 'layout' 0.00430.0036 739.3672220.6953
Module start 'content' 0.00790.0124 960.06251,009.8516
Module end 'content' 0.02030.0014 1,969.914141.9766
Script end 0.0217  2,011.8906 

Time accumulators:

 Accumulator Duration (sec) Duration (%) Count Average (sec)
Ini load
Load cache0.002411.0246140.0002
Check MTime0.00104.5605140.0001
Mysql Total
Database connection0.00073.007810.0007
Mysqli_queries0.00209.073930.0007
Looping result0.00000.050410.0000
Template Total0.00115.010.0011
Template load0.00083.854310.0008
Template processing0.00031.173310.0003
Override
Cache load0.00062.603210.0006
General
dbfile0.00219.716480.0003
String conversion0.00000.032940.0000
Note: percentages do not add up to 100% because some accumulators overlap

Templates used to render the page:

UsageRequested templateTemplateTemplate loadedEditOverride
1print_pagelayout.tpl<No override>extension/community/design/community/templates/print_pagelayout.tplEdit templateOverride template
 Number of times templates used: 1
 Number of unique templates used: 1

Time used to render debug report: 0.0001 secs