COLA Homepage Video Podcast Update

Posted on March 5, 2012 by kathy

How to upload videos and images for the video podcast section of COLA homepage through Cascade. Note that these steps are specific to updating JW Players versus Youtube Embedded Videos.

You will be working with the ‘HTML Source Editor” function in Cascade. To change the video specifically, the following code will be modified. Specifically the paths in red, green, and blue:

<h2>Title</h2>
<!–#START-CODE 
<script type=”text/javascript”> 
jwplayer(“container_hp”).setup({ 
flashplayer: “http://media.la.utexas.edu:8080/jwplayer/player.swf“, 
file: “http://media.la.utexas.edu:8080/colasites/homepage/clip_03_2012-10-25.mp4“, 
height: 153, 
width: 272,
‘image’: ‘http://media.la.utexas.edu:8080/colasites/homepage/tpp_issenberg.jpg‘,
‘controlbar.position’: “bottom”,
‘controlbar.idlehide’: “true”,
‘controlbar.position’: “over”,
‘controlbar.margin’: 0,
 
‘skin’: ‘http://media.la.utexas.edu:8080/jwplayer/skins/five/five.zip‘,
plugins: {
       ‘captions-2’: {back: ‘false’, state: ‘false’, file: ‘http://media.la.utexas.edu:8080/colasites/homepage/clip_03_2012-10-25.srt‘},
       ‘gapro-2’: {
       }}
}); 
</script>
#END-CODE–>
<p>DESCRIPTION</p>

1) Change the Video File

The section of code highlight in red denotes the path to the video file. To change the video intended, you would just need to change the path to the new video file (mp4):

1. Find video and change what follows the “file:” section of the code.

  • If video is hosted on our server:
    • Find video file and copy to folder: Media > colasites > streams > homepage
    • Change file path in code: http://media.la.utexas.edu:8080/colasites/homepage/clip_03_2012-10-25.mp4
  • If video is hosted by Youtube:
    Change file path in code to the proper youtube link. Remember to use the long ling: http://www.youtube.com/watch?v=FuOGpzSYxt8
  • If video is a Know Event Video:
    • View Know event “page source”
    • Find “sef”
    • Look for something like “/opa/video/closeup/2012/2012_election_casellas.mp4”
    • Input www.utexas.edu/ with “opa/video/closeup/2012/2012_election_casellas.mp4” found and see if it will link to the video
    • Ultimate file link should look like: “http://www.utexas.edu/opa/video/closeup/2012/2012_election_casellas.mp4”

2) Change the Cover Image

The section of code highlight in green denotes the path to the cover image (jpg). To change the image intended, you would just need to change the path to the jpg file:

A) Creating Cover Image for the Video

For every video posted there should be a stagnant cover image representative of the video. Here’s how you do it:

    1. Extract cover image from video via screenshots
    2. Place screenshot in the photoshop file with the set dimensions of  153px by 272px. Here is a sample of the correct dimensions:
    3. Drag into Photoshop to use as a template.
    4. Size accordingly so your image is properly set.
    5. ‘Save for Web & Devices’ located under photoshop files toolbar

B) Change Image Path

  • If image needs to be hosted:
    • Add to folder: Media > colasites > streams > homepage
    • Change image path in code: http://media.la.utexas.edu:8080/colasites/homepage/tpp_issenberg.jpg
  • If image is already hosted elsewhere, change code to the image url

3) Change Corresponding Caption File

The section of code highlight in blue denotes the path to the corresponding caption file (srt). To change the image intended, you would just need to change the path to the srt file:

Add the path to the caption file:

  • Find video file and copy to folder: Media > colasites > streams > homepage
  • Change file path in code: http://media.la.utexas.edu:8080/colasites/homepage/clip_03_2012-10-25.srt
This entry was posted in Cascade and tagged , , . Bookmark the permalink.

Leave a Reply