1
180

Broadcast a video from a website

Thanks to Longtail video, broadcasting a video or an audio content from a website is really simple.

Download the JW Player for Flash v5. Open the archive mediaplayer.zip.

Organize the content of your site by creating in the root of the site the folders longtail for files from Longtail, images for images, files for downloadable files, videos for videos and js for programs in Javascript.

  1. /
    1. longtail
      1. player.swf
    2. images
      1. noscript.jpg
    3. videos
      1. longtail.flv
      2. longtail.jpg
    4. files
      1. longtail.html
    5. js
      1. swobject.js

Copy the Flash player player.swf in the folder longtail and the Javascript code swobject.js in the folder js. Copy the snapshot preview.jpg and the video video.flv in the folder videos while renaming them longtail.jpg and longtail.flv. Check the read access rights.

Create a script called longtail.html in the folder files with the following content:

  1. <script type="text/javascript" src="/js/swfobject.js"></script>
  2. <div id="longtailvideo" class="longtail"></div>
  3. <script type="text/javascript">
  4. var so = new SWFObject("/longtail/player.swf","longtailvideo","320","264","9","#FFFFFF");
  5.  
  6. so.addParam("allowfullscreen","true");
  7. so.addParam("allowscriptaccess","always");
  8. so.addParam("wmode","opaque");
  9.  
  10. so.addVariable("image","/files/folder/videos/longtail.jpg");
  11. so.addVariable("file","/files/folder/videos/longtail.flv");
  12. so.addVariable("controlbar","bottom");
  13. so.addVariable("duration","27");
  14. so.addVariable("icons","true");
  15. so.addVariable("repeat","none");
  16. so.addVariable("autostart","false");
  17.  
  18. so.write("longtailvideo");
  19. </script>
  20. <noscript>
  21. <p><img width="100" height="50" src="/images/noscript.jpg" alt=""/></p>
  22. </noscript>

The first line loads the Javascript file swfobject.js which defines the object SWFObject. The paragraph with the id longtailvideo is left empty on purpose. It will contain the Flash player. The script creates the player with the relative path to the Flash code, the id of the player, the width and the height of the display, the version number of the Flash plugin compatible with the player and the background color. The rest of the code configures the player, in particular the URLs of the video and the snapshot. The last line replaces the paragraph named longtailvideo by the player.

IMPORTANT: Be careful to replace a ? by %3F, a * by %3D and a & by %26 in a URL.

Change the values of the variables image and file to broadcast another content. Add the height of the control bar, 24 pixels, to the height of the video, 240 pixels, to obtain the total height of the display, 264 pixels. Initialize the variable duration to the length of the video in seconds.

To start playing the video immediately after the page is loaded, set the variable autostart to true. To read the video in a loop, set the variable repeat to always. To hide the icon on the snapshot and the control bar set the variable icons to false and the variable controlbar to none and subtract 24 pixels from the height of the display.

All the available options are described in the wiki of the player.

The content tagged <noscript> tries to display an image with a warning if Javascript is not activated in which case the player can't function. Copy the image noscript.jpg in the folder images.

You can display an explanation or an alternative content but an image limits the work done by search engines.

Activate Javascript to read the video!

To read videos from YouTube, copy the file called yt.swf from the archive mediaplayer.zip in the directory longtail where you have already copied the Flash player player.swf. NOTE: Since version 5.6, yt.swf is no longer needed.

Create a script with the variable file set to the complete URL of the video on YouTube.

  1. <script type="text/javascript" src="/js/swfobject.js"></script>
  2. <div id="rolltop" class="longtail"></div>
  3. <script type="text/javascript">
  4. var so = new SWFObject("/longtail/player.swf","rolltop","224","208","9","#FFFFFF");
  5.  
  6. so.addParam("allowfullscreen","false");
  7. so.addParam("allowscriptaccess","always");
  8. so.addParam("wmode","opaque");
  9.  
  10. so.addVariable("image","/files/folder/videos/rolltop.jpg");
  11. so.addVariable("file","http://www.youtube.com/watch?v=7H0K1k54t6A");
  12. so.addVariable("provider","youtube");
  13. so.addVariable("icons","false");
  14.  
  15. so.addVariable("skin","/longtail/glow.zip");
  16.  
  17. so.write("rolltop");
  18. </script>
  19. <noscript>
  20. <p><img width="100" height="50" src="/images/noscript.jpg" alt=""/></p>
  21. </noscript>

If the URL points to an RTMP server, set provider to rtmp.

Notice the parameter skin which changes the look of the player. You can download more skins here.

To play an audio track, create a script with file pointing to an MP3 or an AAC file, set provider to sound, add an image if you want, reduce the size of the player to the minimum:

  1. <script type="text/javascript" src="/js/swfobject.js"></script>
  2. <div id="smokeloop" class="longtail"></div>
  3. <script type="text/javascript">
  4. var so = new SWFObject("/longtail/player.swf","smokeloop","250","31","9","#FFFFFF");
  5.  
  6. so.addParam("allowfullscreen","false");
  7. so.addParam("allowscriptaccess","always");
  8. so.addParam("wmode","opaque");
  9.  
  10. so.addVariable("file","/files/folder/sounds/smoke.mp3");
  11. so.addVariable("provider","sound");
  12. so.addVariable("icons","false");
  13.  
  14. so.addVariable("skin","/longtail/modieus.zip");
  15.  
  16. so.write("smokeloop");
  17. </script>
  18. <noscript>
  19. <p><img width="100" height="50" src="/images/noscript.jpg" alt=""/></p>
  20. </noscript>

The 5.3 player has introduced a new JavaScript API which has the advantage of masking the differences between Flash and HTML5.

  1. <div class="longtail">
  2. <div style="display:inline-block;border:3px solid #cccccc">
  3. <div id="bbbtrailer"></div>
  4. </div>
  5. <script type="text/javascript" src="/js/jwplayer.js"></script>
  6. <script type="text/javascript">
  7. jwplayer('bbbtrailer').setup({
  8.     'flashplayer': '/longtail/player.swf',
  9.     'id': 'bbbtrailer',
  10.     'width': '480',
  11.     'height': '270',
  12.     'file': '/files/folder/videos/bbb.m4v',
  13.     'image': '/files/folder/videos/bbb.png',
  14.     'controlbar': 'hidden',
  15.     'screencolor': 'ffffff'
  16. });
  17. </script>
  18. </div>

The document loads the file jwplayer.js, the code in Javascript from Longtail, then it passes the id of the <div> which will replaced by the player to the jwplayer function and a series of configuration parameters to the setup function. Notice that the parameters are practically identical to the ones for the Flash version but that the video can now be encoded in H264/AAC in a M4V container.

  1. <script type="text/javascript" src="/js/jwplayer.js"></script>
  2. <div id="thanatos"></div>
  3. <script type="text/javascript">
  4. jwplayer('thanatos').setup({
  5.     'flashplayer': '/longtail/player.swf',
  6.     'id': 'thanatos',
  7.     'width': '100',
  8.     'height': '24',
  9.     'file': '/files/folder/sounds/thanatos.m4a',
  10.     'duration' : '18',
  11.     'controlbar': 'bottom',
  12.     'skin': '/longtail/simple.zip'
  13. });
  14. </script>

  1. <div class="longtail">
  2. <video class="noprint" id="yt" src="http://www.youtube.com/watch?v=BeP80btBxIE" width="320" height="240"></video>
  3. <script type="text/javascript" src="/js/jwplayer.js"></script>
  4. <script type="text/javascript">
  5. jwplayer('yt').setup({ flashplayer: '/longtail/player.swf' });
  6. </script>
  7. </div>
Format of audio and video files

To transcode your audio or video files, use ffmpeg and mencoder.

To resize a video, compute the ratio of its width to its height - 320 / 240 = 1.33 - and preserve its aspect by dividing both dimensions by the same factor:

$ ffmpeg -i longtail.flv -s 160x120 -aspect 1.33 -y video.flv

To take a picture of a video, generate a series of snapshots with the proper size:

$ ffmpeg -i longtail.flv -s 160x120 -r 1 snap-%03d.jpg

Press q to stop the program after a short while and choose one of the snap-*.jpg images.

To convert a WMA in MP3:

$ ffmpeg -i audio.wma -acodec libmp3lame -ar 22050 -ab 64k audio.mp3

This command sets the audio sampling frequency to 22050 Hz and the audio bitrate to 64k.

To convert a MP3 in AAC in a MP4 container:

$ ffmpeg -i audio.mp3 -f wav - | faac - -b 96 -ws -o audio.m4a

Or more simply:

$ ffmpeg -i audio.mp3 audio.m4a

To convert a video in FLV in MP4:

$ ffmpeg -i video.flv video.m4v

Read the article Transcoding an audio or a video file to learn how to convert the different formats.

Comments

To add a comment, click here.