HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Need to include audio as part of a catalog description field

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#70779 (In Topic #14950)
Avatar

Community saint

In my image galleries, I want to include audio clips of the commentary on the specific painting by the artist's daughter who is an art historian. How can I do this?

The audio will be uploaded to the site. I just need to make sure that a player appears in the description field. I am assuming I need to make the field Comcode and then maybe create a Custom Comcode Tag. Or is there a way to just access jwplayer directly?

I'll have the audio transcribed in the same field but I want people to have the option of listening to the commentary as well.

Thanks for any tips.

Bob
Back to the top
 
Posted
Rating:
#70781
Avatar

Community saint

Best and most flexible would be use a custom comcode tag. I use that method for the youtube videos on my site to allow me to change/tweak the display and player down the track if needed without having to go back and modify any catalogue records.

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#70821
Avatar

Community saint

I kinda thought tht Custom Comcode was the way to go.

Any hints on what I need to do to get a player into Custom Comcode. The files will be .mov files - most just audio but some with images shown (zoomed detail of painting).

I think I just need to figure out how to embed jwplayer in the Custom Comcode, no?

Thanks for any help.

Bob
Back to the top
 
Posted
Rating:
#70837
Avatar

Community saint

Well, I have had a play just using Comcode URL tags but these fail in two ways: it uses the browser plugin/capability to play the .mov file and it takes you to a new page.

I have hunted high and low for jwplayer but can't seem to find it. I think I need a custom Comcode tag that invokes jwplayer and uses my filename as the 'content'. Hopefully, I can then embed this in a description field with Comcode support.

Any help with this?

Bob

Back to the top
 
Posted
Rating:
#70841
Avatar

Community saint

Looks like there is some JW player embedding info here: How To Embed FLV Flash In WordPress or HTML

Replace the coloured code with code that is appropriate for your site, and use comcode variables were needed.

I don't have any specific knowledge on JW player.

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#70874
Avatar

Community saint

Temp-

Thanks for the link. I am going to try to make sense of it now.

Bob
Back to the top
 
Posted
Rating:
#70876
Avatar

Community saint

I've decided that it probably makes most sense to use the code from GALLERY_VIDEO_FLV since I know that works in the gallery.

Now I need to figure if I really need all this code for a Custom Comcode Tag or if I can strip some of it out.

Or maybe I am just headed in the completely wrong direction.

This is the code from GALLERY_VIDEO_FLV:

Code

{$SET,flv_url,{URL}}
{$JAVASCRIPT_INCLUDE,javascript_jwplayer}
{$SET,rand_id,{$RAND}}

<div class="xhtml_validator_off">
   <video width="{WIDTH*}" height="{HEIGHT*}" id="flv_container_{$GET%,rand_id}" poster="{THUMB_URL*}">
      <source src="{$GET*,flv_url}" />
      {!VIDEO}
   </video>
</div>

<script type="text/javascript">// <![CDATA[
{$,Carefully tuned to avoid this problem: http://www.longtailvideo.com/support/forums/jw-player/setup-issues-and-embedding/8439/sound-but-no-video}
addEventListenerAbstract(window,'load',function () {
   jwplayer("flv_container_{$GET%,rand_id}").setup({
      width: {WIDTH*},
      height: {HEIGHT*},
      autostart: false,
      duration: {LENGTH*},
      players: [
         { type: "flash", src: "{$BASE_URL#}/data/flvplayer.swf?rand={$RAND*}" },
         { type: "html5" }
      ],
      provider: {$?,{$EQ,{$SUBSTR,{URL},-4},.mp3},'sound','video'}
   });
} );
//]]></script>

Do I really need the "rand_id" since this is not a gallery and will simply embed one .mp4 file.

Does anyone have any suggestions?

Bob
Back to the top
 
Posted
Rating:
#70879
Avatar

Community saint

Bob,

This isn't part of the core feature(s) of ocPortal, but take a look at this entry on my site, and see if it makes any sense as to how, and whether you can use it. I built it to make life easy for my 'silver-surfers' who are very partial to the one-click solution.

If yes, PT me and I will try and make some coherent sense in getting all the info to you.

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#70892
Avatar

Community saint

Temp-

Thanks for the pointer. I finally got this working although it seems like it took forever for things to "click". I just need to see how to also enter the height and width of the video which I recall was covered in the video tutorial and I'll be good to go.

Thanks again for your help.

Bob



temp1024 said

Looks like there is some JW player embedding info here: How To Embed FLV Flash In WordPress or HTML

Replace the coloured code with code that is appropriate for your site, and use comcode variables were needed.

I don't have any specific knowledge on JW player.
Back to the top
 
Posted
Rating:
#70896
Avatar

Community saint

Leave the rand stuff as is. It will give you flexibility later, if for example, you want to blog about something and have the audio/video in the blog or forum.

As for width and height, take a look here: View topic: FreeOurMoney - advocating monetary reform - ocPortal . In this code I use width and height. You need to change your code accordingly.

When defining the comcode add "width=640,height=390" (numbers as appropriate) in the default values field so that you only have to change them if you have non-standard values for a specific individual catalogue entries.

Then in you catalogue field you can use:
   [myvid]bala[/myvid],  
   [myvid width=500]bala[/myvid] or  
   [myvid width=700 height=800]bala[/myvid]

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#70898
Avatar

Community saint

Temp-

I ended up using the code from the link you posted earlier. It works fine and I have allowed for the entry of width and height params.

I will revisit the other code when I have time. I wasn't sure where the {content} tag goes - I was thinking it replaces {URL} in the first line.

Anyways, I appreciate your help.

Bob
Back to the top
 
Posted
Rating:
#70902
Avatar

Community saint

Well, I have a new problem since I got this working. The video is not syncing to the audio (video starts late) on a file in the gallery which was working perfectly well before I added my Custom Comcode.

Is it possible that invoking jwplayer with different code has caused this problem? I downloaded the file from the site and it plays properly on my computer so it is not the file.

Any thoughts?

Bob
Back to the top
 
Posted
Rating:
#70907
Avatar

Community saint

BobS said

I wasn't sure where the {content} tag goes - I was thinking it replaces {URL} in the first line.
{content} comes from what is defined between the comcode tags, so yes it would replace {URL}.

BobS said

Is it possible that invoking jwplayer with different code has caused this problem
Assuming the problem is not with the player itself, it will most likely be with the way it is invoked.

I haven't played with these players before, so unfortunately can't help you there.

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#70908
Avatar

Community saint

temp1024 said

{content} comes from what is defined between the comcode tags, so yes it would replace {URL}.
Well, I plugged {content} to the 2 places that were previously {URL} and I have specified default parameters so I no longer get missing parameter messages but it still does not display a player.

My code now looks like this:

Code

{$SET,flv_url,{content}}
{$JAVASCRIPT_INCLUDE,javascript_jwplayer}
{$SET,rand_id,{$RAND}}

<div class="xhtml_validator_off">
   <video width="{width}" height="{height}" id="flv_container_{$GET%,rand_id}" poster="{THUMB_URL*}">
      <source src="{$GET*,flv_url}" />
      {!VIDEO}
   </video>
</div>

<script type="text/javascript">// <![CDATA[

addEventListenerAbstract(window,'load',function () {
   jwplayer("flv_container_{$GET%,rand_id}").setup({
      width: {width},
      height: {height},
      autostart: false,
      duration: {length},
      players: [
         { type: "flash", src: "{$BASE_URL#}/data/flvplayer.swf?rand={$RAND*}" },
         { type: "html5" }
      ],
      provider: {$?,{$EQ,{$SUBSTR,{content},-4},.mp3},'sound','video'}
   });
} );
//]]></script>

I wish I could figure out why the player is not displaying.


Assuming the problem is not with the player itself, it will most likely be with the way it is invoked.

The player worked fine until I used the second method to invoke the player (not for this clip, but for some audio clips that I am embedding in catalog descriptions). The video now starts about 10 seconds late. If I download the mp4 to my computer, it plays right. So the player was working and the file is not the source of the problem; that seems to leave the the possibility that using different methods to invoke jwplayer (even if they are in different places) creates some kind of problem.

I'd love to figure out the above code so that I am using the same code to invoke jwplayer in all places.

I think this problem may have the best of me today. I was so excited to get my embedded audio working and then retested my video and had this snafu. Arrrrgh.

Bob

EDIT: It's just a caching issue with Safari. The video plays fine in both Firefox and Chrome, and it also plays fine in Safari when I log into a different account. YEAH.

I'd still like to figure out how to use ocPortal's code to play the audio files.






Last edit: by BobS
Back to the top
 
Posted
Rating:
#71037
Avatar

Community saint

Although I have some Custom Comcode working, I'd like to use the code that ocPortal uses for displaying videos allowing entry of a file name along with width, height and clip length.

I've tried fiddling with the code and have been able to get rid of the missing parameter messages, but I can't get the player to display. I'm hoping that one of the coding gurus can point me in the right direction for creating a Custom Comcode from the ocPortal base code:

Code

{$SET,flv_url,{URL}}
{$JAVASCRIPT_INCLUDE,javascript_jwplayer}
{$SET,rand_id,{$RAND}}

<div class="xhtml_validator_off">
   <video width="{WIDTH*}" height="{HEIGHT*}" id="flv_container_{$GET%,rand_id}" poster="{THUMB_URL*}">
      <source src="{$GET*,flv_url}" />
      {!VIDEO}
   </video>
</div>

<script type="text/javascript">// <![CDATA[

addEventListenerAbstract(window,'load',function () {
   jwplayer("flv_container_{$GET%,rand_id}").setup({
      width: {WIDTH*},
      height: {HEIGHT*},
      autostart: false,
      duration: {LENGTH*},
      players: [
         { type: "flash", src: "{$BASE_URL#}/data/flvplayer.swf?rand={$RAND*}" },
         { type: "html5" }
      ],
      provider: {$?,{$EQ,{$SUBSTR,{URL},-4},.mp3},'sound','video'}
   });
} );
//]]></script>






[mp4]/uploads/commentary/Christine_reflects.mp4[/mp4]
 

Any suggestions?

Bob
Back to the top
 
Posted
Rating:
#71041
Avatar

Community saint

Just did some tests and works fine for me as a comcode tag.

The reason is may not be playing for you is if you have not set your default values.

That was the only problem I had, once I made sure I had default values for length,width and height all was well. When these are missing they cause javascript errors because the comcode tag will generate "{width}" instead of say "640" in the code that is output.

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#71043
Avatar

Community saint

Hmm. I'll try again.

I did initially have problems with "parameters not passed" because I did not set defaults. Once I set them, the errors disappeared by my player did not appear.

I really don't know why I am so hung up on using this chunk of code, but I am.

Thanks for your input temp.

Bob
Back to the top
 
Posted
Rating:
#71044
Avatar

Community saint

This chunk of code works fine, I'm sure its just a some silly oversight.

BTW, I've tested it on FF and IE.

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#71047
Avatar

Community saint

I'm likely playing the part of anotherof the seven dwarfs: Dopey. Maybe it will all com together tomorrow.

Bob
Back to the top
 
Posted
Rating:
#71109
Avatar

Community saint

Well, after much tinkering, I finally got a player displayed. How can I get rid of the black background?

Most of my clips will be just audio so I want the player as it is above the text. But some of my clips will have a video track, as well, which is why I want the flexibility. This clip is audio only and the default value for thumb_url is "".

The default values for parameters are:

Code

width=400,height=50,thumb_url="",length=100

I've invoked the player using only default values:

Code

[test]/uploads/commentary/Christine_reflects.mp4[/test]

When it is audio only, I'd like the player to appear as in the top player or at least without all the dark around it:



Any suggestions?

Thanks for your help.

Bob
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Expand