cloud34221.beauty

Optimizing Video Delivery with LongTail FLV Player: Tips & Best Practices

Written by

admin

in

How to Integrate LongTail FLV Player into Your Website (Step‑by‑Step)LongTail FLV Player is a lightweight, flexible Flash-based video player historically used to deliver FLV (Flash Video) files on websites. Although Flash is deprecated and unsupported in modern browsers, you may still encounter FLV content that needs to be played (for archival projects, intranet sites with legacy support, or controlled environments). This guide walks through a step‑by‑step integration of LongTail FLV Player into a website, covers optional enhancements, fallbacks, and migration advice.

Important note about modern compatibility

LongTail FLV Player requires Flash (SWF) and therefore will not work in current mainstream browsers without special configuration. For public-facing websites, strongly consider converting FLV files to MP4 (H.264) and using HTML5 players (Video.js, Plyr, or native

1. Prepare your environment and assets

  1. Gather the following files:

    • The LongTail FLV Player SWF file (usually named something like longtail.swf or player.swf).
    • Your FLV video files (e.g., sample.flv).
    • Optional: a poster image (thumbnail) for the video (sample.jpg).
    • Optional: a JavaScript embed helper (some distributions include an embed.js).

  2. Decide where to host the files:

    • Place them in a public directory on your web server, e.g., /assets/player/ for the SWF and /media/videos/ for FLVs.
    • Ensure correct MIME types are configured on your server for .swf and .flv if needed.

  3. Check your audience’s environment:

    • If users don’t have Flash, prepare a fallback (see section 6).
    • For intranet or legacy kiosks, verify that Flash is enabled and the Flash plugin or standalone projector is present.

2. Basic HTML embed (OBJECT/EMBED)

The classic method uses the OBJECT and EMBED tags to insert the SWF. Create an HTML file (e.g., player.html) and add the following structure, updating paths and parameters:

<!doctype html> <html lang="en"> <head>   <meta charset="utf-8" />   <title>LongTail FLV Player Example</title>   <meta name="viewport" content="width=device-width,initial-scale=1" />   <style>     /* Basic centering */     .video-container { max-width: 640px; margin: 20px auto; }   </style> </head> <body>   <div class="video-container">     <!-- OBJECT tag for Internet Explorer -->     <object type="application/x-shockwave-flash"             data="/assets/player/longtail.swf"             width="640" height="360">       <!-- Flash vars pass settings such as the video file and poster -->       <param name="movie" value="/assets/player/longtail.swf" />       <param name="allowFullScreen" value="true" />       <param name="wmode" value="opaque" />       <param name="flashvars" value="file=/media/videos/sample.flv&image=/media/videos/sample.jpg&autostart=false" />       <!-- EMBED for other browsers -->       <embed src="/assets/player/longtail.swf"              type="application/x-shockwave-flash"              width="640" height="360"              allowFullScreen="true"              flashvars="file=/media/videos/sample.flv&image=/media/videos/sample.jpg&autostart=false">       </embed>     </object>   </div> </body> </html>

Key parameters in flashvars:

  • file — path to the FLV file.
  • image — poster/thumbnail to show before playback.
  • autostart — true/false for automatic play.
  • You may encounter other player-specific parameters such as volume, controlbar, skin, etc., depending on the SWF version.

3. Using a JavaScript embed (SWFObject / embed.js)

For more robust detection and graceful degradation, use a small JS library like SWFObject or the player’s provided embed helper to insert the SWF and pass flashvars dynamically.

Example using a generic embed script pattern:

<script src="/assets/player/swfobject.js"></script> <div id="player">Flash player requires JavaScript enabled.</div> <script>   var flashvars = {     file: "/media/videos/sample.flv",     image: "/media/videos/sample.jpg",     autostart: "false"   };   var params = {     allowFullScreen: "true",     wmode: "opaque"   };   var attributes = {     id: "longtailPlayer"   };   swfobject.embedSWF("/assets/player/longtail.swf", "player", "640", "360", "10.0.0", null, flashvars, params, attributes); </script>

Benefits:

  • Detects whether Flash is installed and provides alternate content if not.
  • Keeps HTML cleaner and allows dynamic configuration (e.g., selecting video from a list).

4. Player configuration options and customization

LongTail FLV Player distributions often include configurable options passed via flashvars. Common options:

  • file — main video URL.
  • image — poster image.
  • autostart — true|false.
  • repeat — none|list|always.
  • controlbar — top|bottom|none.
  • volume — initial volume percentage.
  • skin — path to a custom skin file (if supported).
  • backcolor / frontcolor — control colors in hex.

Example flashvars string:

file=/media/videos/sample.flv&image=/media/videos/sample.jpg&autostart=false&repeat=none&volume=80

If the player includes a playlist XML or JavaScript API, you can create playlists and advanced controls. Check the specific SWF’s readme or docs for exact parameter names.

5. Accessibility and UX considerations

  • Provide visible fallback content for users without Flash (see next section).
  • Add accessible captions or transcripts alongside the player for compliance and usability.
  • Ensure keyboard navigation and visible controls when possible in your environment.
  • For mobile users, note that Flash is unsupported on iOS and many modern Android browsers.

6. Fallbacks and progressive enhancement

Because Flash is deprecated, always provide alternatives:

  1. Convert the FLV to MP4 (H.264) and use HTML5
  2. Provide a direct download link to the FLV or converted MP4.
  3. Show an explanatory message with steps to view the video in legacy setups.

Example fallback block inside the OBJECT tag (replace embed section’s inner HTML):

<p>Your browser does not support Flash. Download the video: <a href="/media/videos/sample.flv">sample.flv</a></p>

Or detect Flash with JavaScript and swap to an HTML5 player when Flash is absent.

For long-term compatibility, convert FLV files to MP4/H.264. Example using FFmpeg:

ffmpeg -i input.flv -c:v libx264 -preset slow -crf 22 -c:a aac -b:a 128k output.mp4
  • Use CRF around 18–24 depending on quality needs.
  • Test the resulting MP4 across browsers and devices.

After conversion, replace flashvars with an HTML5

8. Security and deployment notes

  • Serve media over HTTPS to avoid mixed-content issues.
  • Keep server MIME types correct: application/octet-stream for FLV may be acceptable but configure if needed.
  • Don’t accept untrusted SWF files from unknown sources.
  • If deploying in restricted environments, use local copies of SWF and JS to avoid third‑party dependencies.

9. Troubleshooting

  • Video not loading: confirm paths, check server logs, and verify the SWF file is accessible.
  • Poster not showing: ensure the image path is correct and supported by the SWF.
  • Flash not detected: check browser plugin settings or use SWFObject to diagnose.
  • Playback stutters: verify server bandwidth, and test with a locally hosted player.

10. Example full integration checklist

  • [ ] Obtain longtail.swf and any skins/embed scripts.
  • [ ] Place FLV files and poster images on server.
  • [ ] Embed SWF using OBJECT/EMBED or SWFObject.
  • [ ] Provide fallback content or convert to MP4.
  • [ ] Add captions/transcripts.
  • [ ] Test in target environments (desktop, intranet).
  • [ ] Secure and serve via HTTPS.

Final recommendation

For public sites, migrate FLV assets to MP4 and use HTML5 playback. Use LongTail FLV Player only for legacy environments where Flash is already supported and unavoidable.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts