Mar 18

Flash videos integration in Textpattern

geekery Add comments


I was searching for some Textpattern (the CMS pow­ering the Jorid) plugin which could give me the pos­si­bility to display a playlist of some of Jib’s ani­ma­tions, and decided that cre­ating my own plugin would be quicker.

It uses Jeroen Wijering’s Flash Media Player to be able to insert Flash movies (.flv) into a webpage, in the manner of a local “youtube”.

[Latest version is now found here]

Some details are given below, if others are inter­ested in imple­menting it (it also works for all the formats rec­og­nized by the Flash media player, like mp3, jpg etc.).
Doc­u­men­tation is scarce, but hope­fully legible enough.

Notes

This plugin is a sim­plified version loosely based on a pre­vious inte­gration (bas_flvplayer) made by Bastian Sackermann.

It is called for instance like this <txp:elk_mediaplayer video="3,4" width="400" height="200" plwidth="200" />
pro­vided that the file mediaplayer.swf is uploaded in the textpattern “files” folder, along with SWFObject javascript library 1.5 that can be found on Jeroen’s website.

Para­meters are (not exhaustive and can be adapted in the code itself)

  • video: a list of videos (names or IDs, sep­a­rated by commas)
  • width: width of the player
  • height: height of the player
  • plwidth: height of the playlist, if applicable (default=0)

NB: to sim­plify the use of the plugin, the Flash Player requires a playlist, even if for just one file. In that case, it requires a special setup of textpattern to deliver a XML file that will create the playlist itself (see function elk_playlist).
This can be done by fol­lowing these steps:

  • create a “playlist” page with the fol­lowing code:
    <txp:mg_setheader />
    <txp:output_form form="playlist" />
    Where the required plugin mg_setheader allows to change the header sent to XML.
  • Create a section “playlist”, using the page “playlist”
  • Create the form “playlist” as follows (a bit dirty, would welcome a more elegant solution)
    <txp:php>
    $videos = isset($_GET["v"]) ? $_GET["v"] : "" ;
    parse("<txp:elk_playlist id=\"$videos\" />") ;
    </txp:php>

And it should work…  (older version, for the record : elk_mediaplayer v0.1)

[June 12th 2008 update] in version > 0.1 the plugin takes the first article image (if any pro­vided) to put as a preview image in the medi­aplayer.
If you want to enable this, you need to change the form accord­ingly, so that the page can pass the image id to the XML playlist:

<txp:php>
$videos = isset($_GET["v"]) ? $_GET["v"] : "" ;
$image = isset($_GET["i"]) ? $_GET["i"] : "" ;
 $sort = isset($_GET["st"]) ? $_GET["st"] : "" ;
 $sortby = isset($_GET["sb"]) ? $_GET["sb"] : "" ;
parse("<txp:elk_playlist id=\"$videos\" img=\"$image\" sort=\"$sort\" sortby=\"$sortby\" />") ;
</txp:php>

Download the plugin (updated July, 9th 2008):

elk_mediaplayer v0.2

written by Yuki \\ tags: , , ,


18 Responses to “Flash videos integration in Textpattern”

  1. 1. Finckelways Says:
    March 19th, 2008 at 6:55 pm

    sounds cool. i have exceeded my broadband useage this month and it is taking ages to look at any­thing so i will have to wait till i am on high speed again

  2. 2. Yuki Says:
    March 19th, 2008 at 9:01 pm

    The good thing is that these flash movies are not very big to download…
    Well, as long as Jib isn’t doing a whole feature film that is ;))

  3. 3. Zander Says:
    June 11th, 2008 at 3:20 pm

    Hey Yuki,

    I’ve got this plugin working fine, thanks by the way, but I want the ability to have a place­holder image before the movie starts. I have tried mod­i­fying the code myself, but it is beyond my very basic skills. Can you tell me what needs to be done?

    Many Thanks

  4. 4. Yuki Says:
    June 11th, 2008 at 4:46 pm

    Hi Zander, glad it works for you.
    For doing what you want, you may use an external JS function encap­su­lating the call (basi­cally some­thing like this)

    function showVideo(myId, url, width, height){
    swfobject.embedSWF(url, myId, width, height, "8.0.0");
    }

    instead of directly calling the movie as it is done in the plugin.

    For the place­holder image, it needs to be put inside the <div> with some­thing like
    <a href="javascript:void(0)" onClick="javascript:showVideo('etc.')><img src="link_to_your_placeholder_image"/></a>

    So that when the page first loads it loads the image inside the <div>, and when you click on it, it calls the javascript replacement of what’s inside the named <div>.

    Hope it helps :)

  5. 5. Zander Says:
    June 11th, 2008 at 5:34 pm

    Hey Yuki,

    Cheers for replying so soon. Why would you not use a flashvar like it says you are able to on JW’s site? could a solution not be made for that?

    Also, your solution is a bit beyond me, could you explain? or even better, spell it out step by step… maybe you’d prefer to email me..?

    Cheers

  6. 6. Yuki Says:
    June 12th, 2008 at 9:23 am

    Oh, I probably got you wrong; do you mean you’d want to have an image inside the medi­aplayer before it starts?

    (I thought you wanted an image to load instead of the player, and then, when you click on the image, it loads the player… That would be a bit more tricky to realize)

    If that’s what you want, that must be easy with the flashvars and adapting the XML… Only thing is… what image would you take? with a name based on the name of the video(s)?
    And if you got more than one clip (with the playlist having more than one file) how do you manage this case?

  7. 7. Yuki Says:
    June 12th, 2008 at 1:25 pm

    I’ve made an updated version of the plugin; it seems to works here, hope it will for you too :)

  8. 8. Zander Says:
    June 12th, 2008 at 3:02 pm

    Eric,

    Thank you so much for all the help.

    It works perfectly.

  9. 9. Randy Levine Says:
    July 2nd, 2008 at 6:59 pm

    Yuki:

    Thanks for the great plugin, I was looking for the exact upgrade you just made.

    My problem is that when I try to load it into TXP 4.06 I get:

    Badly formed or empty plug in

    Any assis­tance would be greatly appreciated.

  10. 10. Yuki Says:
    July 2nd, 2008 at 7:56 pm

    Hi Randy,
    I’m using the 4.06 version too, and don’t have the problem you mention… Not sure how you are pro­ceeding?
    Usually, going to admin>plugins tab and pasting all the code (select all with CTRL+A, then copy) inside the .txt file into the Install plugin area works fine…

  11. 11. Randy Levine Says:
    July 3rd, 2008 at 2:01 pm

    Yuki:

    Thanks for the quick reply Uki. I tried again and got same message.

    To test I uploaded a dif­ferent plug in and it worked like a charm. Is there any other way we can do this. I know in the past when I have worked with Gerhard, we have had it look at a Plug In folder rather than loading thru TXP. Not sure if this is an option.

    Willing to try any­thing. Please let me know.

    Randy

  12. 12. Yuki Says:
    July 3rd, 2008 at 5:41 pm

    Randy, I’ve sent you the decoded php version of the plugin, if you want to try it in the plugin folder… You can try to reimport it into the database plugins with the useful “plugin com­poser” extension (ied_plugin_composer)…
    Hope it helps!

  13. 13. Randy Levine Says:
    July 8th, 2008 at 3:40 am

    Yuki:

    I just wanted to let you know .. I have now got the plug in to load and the player to appear … I am close … but now I get two dif­ferent error mes­sages I was hoping you could decipher …

    If I use the image ID (I assume you mean File ID) I get Error #2032.

    If I use the actual file name, it states that it can not find it and pro­vides me with the path …/playlist?v=video.flv. I have uploaded this file thru TXP. I also made a copy in a folder called “playlist”. Finally I put a copy in the root. All of theses were unsuccesful.

    I have fol­lowed the instruc­tions regarding the section; page and form. So I am now stumped. Any assis­tance would be appreciated.

    Thanks.

  14. 14. Yuki Says:
    July 8th, 2008 at 11:33 am

    Hi Randy,

    The error #2032 seems to be related to Flash having issue with crossdomain.xml file

    I didn’t mention that, but usually it seems you’d have to put a crossdomain.xml at the root of your domain to allow flash to access files -> see some doc­u­men­tation here

    Tell me if that helps :)

  15. 15. Zander Says:
    July 8th, 2008 at 9:33 pm

    Hey Yuki,

    Hope all’s well. I would like to be able to sort the playlist created from this plugin. At the moment it uses the files id ascending to create it play order. I can’t seem to use the sort attribute. Can I make it so they play in the order I enter them?
    For instance:

    Many thanks

  16. 16. Yuki Says:
    July 9th, 2008 at 1:58 pm

    Hey Zander,
    I’ve updated the plugin elk_mediaplayer v0.2 with your sug­gestion.
    You have to make some adjust­ments to the form to pass the new vari­ables (sort, and sortby).
    By default, the sorting should be the same as pro­vided, as long as you keep it all IDs.
    It made me learn a new sql trick on the way ;)
    Enjoy! (very nice use of the plugin on your website by the way!)

  17. 17. Ivan Says:
    July 25th, 2008 at 1:52 pm

    Hello, Yuki.
    I try to setup your plugin. Every­thing is ok but i can’t to under­stand how to use playlist. I follow all your recomen­da­tions, and now player write ” This playlist is not valid XML file”.Please give advise me, what to do?! And just one question: in what folder i must to store video and other media =)

  18. 18. Yuki Says:
    July 27th, 2008 at 8:16 pm

    Hi Ivan,
    You can try to display the playlist directly in your browser; as it’s an XML file, browsers like Firefox and probably IE can show the XML if it’s properly rendered.

    The address should be some­thing like my.site/playlist?v=1,2 where 1 and 2 are for example the textpattern IDs of the uploaded videos I want to have in my playlist.
    By default in my instal­lation, uploaded videos go in the “files” folder, so the XML reads the correct path in the <location> tag… (some­thing like my.site/files/video1_name.flv )
    If the XML doesn’t show up, then it may be a problem with the sent headers (you need to install the mg_setheader plugin)… Oth­erwise, you should be able to tell by reading it what is the problem.
    Hope it helps =)