HTML & Gadgets‎ > ‎

Media Players

            
Subscribe to posts

Flash Media Playback

posted Dec 3, 2011, 9:44 AM by Morteza Mirmojarabian   [ updated Dec 21, 2013, 10:43 PM ]

Adobe Flash Media Playback is a configurable video player.

Instructions
  • Go to Flash Media Playback Setup ► customize your player and click Preview. Here's a sample code you get:
    <object width="480" height="360"> <param name="movie" value="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf"></param><param name="flashvars" value="src=http%3A%2F%2Fwww.example.com%2Fvideo.flv&poster=http%3A%2F%2Fwww.example.com%2Fimage.jpg"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="360" flashvars="src=http%3A%2F%2Fwww.example.com%2Fvideo.flv&poster=http%3A%2F%2Fwww.example.com%2Fimage.jpg"></embed></object>
  • Get back to your Google Site ► click Edit page ► Insert ► More gadgets ► Public ► Search gadgets: "Flash Wrapper" by Mori ► Select ► enter the SWF URL:
    https://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf
    and the flashvars value:
    src=http%3A%2F%2Fwww.example.com%2Fvideo.flv&poster=http%3A%2F%2Fwww.example.com%2Fimage.jpg
  • Customize the gadget Display ► OK ► Save.
Result

DiscussPlease note that all posts are moderated.

YouTube

posted Jul 30, 2011, 4:00 AM by Morteza Mirmojarabian   [ updated Dec 21, 2013, 10:43 PM ]

YouTube is a place to discover, watch, upload and share videos. Each YouTube video and playlist is accompanied by a code, which can be used to embed it on your page.

Instructions
    • Go to the desired YouTube video page ► click Share ► Embed ► customize and copy the iframe source. For example:

      Embed code:
      <iframe width="640" height="480" src="//www.youtube.com/embed/kefTLicuxb4" frameborder="0" allowfullscreen></iframe>
Iframe source: //www.youtube.com/embed/kefTLicuxb4

Notes:
  1. To set the video background to transparent, add ?wmode=transparent to the URL:
    //www.youtube.com/embed/kefTLicuxb4?wmode=transparent
  2. You can find more advanced embedded player parameter settings here. These parameters will help you customize the URL even more. For example:
    //www.youtube.com/embed/kefTLicuxb4?wmode=transparent&showinfo=0
    • Get back to your Google Site ► click Edit page ► Insert ► More gadgets ► Public ► Search gadgets: "Iframe Wrapper" by Mori ► Select ► enter the URL ► customize the gadget Display ► OK ► Save.
Result




Take similar steps to embed a playlist. For example:
<iframe width="640" height="360" src="//www.youtube.com/embed/qcCTw3oaP5Q?list=PL8EBAFF1425C29078" frameborder="0" allowfullscreen></iframe>

Result

DiscussPlease note that all posts are moderated.

XSPF Web Music Player

posted Jan 2, 2010, 10:11 AM by Morteza Mirmojarabian   [ updated Dec 31, 2014, 10:29 PM ]

XSPF Web Music Player is a flash-based web application that uses XSPF playlist format to play MP3 files.

There are two main flavors of the player:
  • Extended version: includes album photos and playlist display
  • Slim version: shows only the current playing song in a compact version

Installation
  • Download the latest extended version and unzip it.
  • As per the instructions, upload xspf_player.swf to a public folder in Drive and copy the SWF URL to use on the gadget.
  • Download the playlist file ► open it with a plain text editor, e.g. Notepad, and customize it:
    <?xml version="1.0" encoding="UTF-8"?>
    <playlist version="1" xmlns="http://xspf.org/ns/0/">
    <title>Classics</title>
      <trackList>

        <track>
          <location>http://www.example.com/song1.mp3</location>
          <title>Fur Elise</title>
          <creator>Beethoven</creator>
          <info>http://www.forelise.com/</info>
          <image>http://www.example.com/image1.jpg</image>
        </track>

        <track>
          <location>http://www.example.com/song2.mp3</location>
          <title>The Four Seasons</title>
          <creator>Vivaldi</creator>
          <info>http://www.classicalnotes.net/classics/vivaldi.html</info>
          <image>http://www.example.com/image2.jpg</image>
        </track>

        <track>
          <location>http://www.example.com/song3.mp3</location>
          <title>Air on a G String</title>
          <creator>Bach</creator>
          <info>http://en.wikipedia.org/wiki/Air_on_the_G_String</info>
          <image>http://www.example.com/image3.jpg</image>
        </track>

        <track>
          <location>http://www.example.com/song4.mp3</location>
          <title>Hooked on Classics</title>
          <creator>Royal Philharmonic Orchestra</creator>
          <info>http://en.wikipedia.org/wiki/Hooked_on_Classics</info>
          <image>http://www.example.com/image4.jpg</image>
        </track>

      </trackList>
    </playlist>
Note: Alternatively you can create a playlist code using the playlist generator, add a title to it, and copy it into the playlist file.
  • Upload the playlist file to the public folder in your Drive and copy its XSPF URL to use as the playlist_url value.
  • Click Edit page ► Insert ► More gadgets ► Public ► Search gadgets: "Flash Wrapper" by Mori ► Select:
    • FlashVars:
      playlist_url=https://xxxxx.googledrive.com/host/xxxxx/playlist.xspf
      Note: To use more than one parameter on the player, separate each parameter by an "&". For example:
      playlist_url=https://xxxxx.googledrive.com/host/xxxxx/playlist.xspf&autoplay=true&repeat_playlist=true
    • Height:
      170 pixels

Example






Take similar steps to add the slim version:
    • FlashVars:
      playlist_url=https://xxxxx.googledrive.com/host/xxxxx/playlist.xspf&player_title=soundtracks - click to start
    • Height:
      15 pixels

Example

DiscussPlease note that all posts are moderated.

| Attachments: playlist.xspf

Google Reader Player

posted Jan 2, 2010, 10:01 AM by Morteza Mirmojarabian   [ updated Dec 21, 2013, 10:41 PM ]

Google Reader had a built-in MP3 player that can be embedded on Google Sites.

Features
  • Volume control
  • Timer
  • AutoPlay function (optional)
  • Keyboard shortcuts
    • space key: play/pause
    • right/left arrow keys: fast-forward/rewind
    • up/down arrow keys: volume up/down 

Installation
  • Download the player and unzip it.
  • As per the instructions, upload audio-player.swf to a public folder in Drive and copy the SWF URL to use on the gadget.
  • Click Edit page ► Insert ► More gadgets ► Public ► Search gadgets: "Flash Wrapper" by Mori ► Select:
    • FlashVars:
      audioUrl=http://www.example.com/song.mp3
      Note: To turn on the autoPlay function, add &autoPlay=true to the FlashVars value:
      audioUrl=http://www.example.com/song.mp3&autoPlay=true
    • Height:
      27 pixels

Example
DiscussPlease note that all posts are moderated.

| Attachments: audio-player.zip

Flash Wrapper

posted Nov 16, 2009, 8:34 AM by Morteza Mirmojarabian   [ updated Dec 21, 2013, 10:39 PM ]

Flash WrapperUse this gadget to embed a Flash movie/SWF in your page.




Instructions

Click Edit page ► Insert ► More gadgets ► Public ► Search gadgets: "Flash Wrapper" by Mori ► Select ► enter the URL ► customize the gadget Display ► OK ► Save.

Note: Setting flash 'transparency' to 'yes' overrides its 'background color' setting.

Example

  • Default background color



  • Custom background color



  • Transparent
More examples




DiscussPlease note that all posts are moderated.

1-5 of 5