The blogging system BlogEngine .Net, used while creation this blog, have not included the supporting of playing media files. This incovenience can be fixed by using the feature of BlogEngine .Net extensions. This way some time ago I found and enhanced the FLV Player for BlogEngine .Net by Matt J. Sherman.
Unfortunately, instantly I did experience some problems with using this extension, so I decided to develop my own extension. Differences are:
- tested with BlogEngine 1.5;
- have improved support for youtube;
- applied non-standard nice skin;
- improved the behaviour of threating .xml playlists;
- automatically added the necessary javascript (only once);
- fixed some inconveniences with paths, which gave me additional five minutes of headache and forced me to study the code.
Features
I have tested the extension by playing .flv, .mp3 and .xml playlists formats. But just because I used the embedded JW FLV Media Player, it can support untested yet:
“supports playback of any format the Adobe Flash Player can handle (FLV, MP4, MP3, AAC, JPG, PNG and GIF). It also supports RTMP, HTTP, live streaming, various playlists formats , a wide range of settings and an extensive javascript API .”
The files to be played can be set up by defining their network location, youtube address or just reffering the name of a file, uploaded locally.
Notes
- Plays any file type that JW FLV Player supports.
- You can customize every aspect of the player by editing MediaPlayer.cs
- For youtube player is trying to determine the picture to be shown before starting video
- For other media the picture can be set up by using .xml playlist
- By default the player size is 320x60 for mp3, 470x320 for youtube and 320x240 for all others
- It doesn't autoplay
Installation
- Download the zip.
- Unzip using any archive manager. Copy the unzipped package onto the standard BlogEngine site (i.e. MediaPlayer.cs and ExtensionsBase.cs will be added to your BlogEngine extensions directory /App_Code/Extensions, will appear the folder /js having one swfobject.js file and folder /media having all the JW FLV Media Player stuff).
- Folder "/media" is where you'll upload your locally situated media files for embedding. Make sure ASP.NET has at least read permissions on this folder. (you can delete the test files after you verify it works - they're not needed)
- You can customize very easily the location of /media folder by editing MediaPlayer.cs variable _audioroot.
Using
single local predefined FLV file
1. Create a blog post. Add this line anywhere in the post: [ media:test.flv ] (without the spaces)
2. You should see something like the embedded player below
single local custom FLV file
1. Replace my me.flv file in the folder /media. Create a blog post. Add this line anywhere in the post: [ media:me.flv ] (without the spaces)
2. You should see something like the embedded player below
single custom FLV file located at another site
1. Create a blog post. Add this line anywhere in the post: [ media:http://content.longtailvideo.com/videos/flvplayer.flv ] (without the spaces)
2. You should see something like the embedded player below
single custom YOUTUBE file
1. Find out your youtube video you want to refer and show on your site. Copy the youtube page link – like http://www.youtube.com/watch?v=YGIfDZXTnTA&feature=popt16us00. In fact, we are interested only by parameter v=bla-bla-bla, so cut out the unnecessary part and leave the url as http://www.youtube.com/watch?v=YGIfDZXTnTA.
2. Create a blog post. Add this line anywhere in the post: [ media:http://www.youtube.com/watch?v=YGIfDZXTnTA ] (without the spaces, using the link obtained at step 1)
3. You should see something like the embedded player below
Note: Only youtube video, allowed for embedding, will be played
single local predefined MP3 file
1. Create a blog post. Add this line anywhere in the post: [ media:test.mp3 ] (without the spaces)
2. You should see something like the embedded player below
local predefined media playlist
1. Create a blog post. Add this line anywhere in the post: [ media:tiraspol_en.xml ] (without the spaces)
2. You should see something like the embedded player below
Note: The simplest XML schema is:
<?xml version="1.0" encoding="UTF-8" ?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>
<track>
<creator>Boris Sirbu</creator>
<annotation>Here we are dansing Slow Vals.</annotation>
<location>http://babooo.md/Sasha/media/f835577c-4dcd-48e7-85bf-a74c50c58ec1/tiraspol2.flv</location>
<image>http://babooo.md/Sasha/media/f835577c-4dcd-48e7-85bf-a74c50c58ec1/tiraspol2.flv.jpg</image>
<info>http://babooo.md/Blogs.aspx</info>
</track>
<track>
………other track info
</track>
</trackList>
</playlist>
where tag <title> and <annotation> is used to identify track in the playlist, <image> is drawn in playlist as a left thumbnail and location identify the every media clip.
media playlist located at another site
1. Create a blog post. Add this line anywhere in the post: [ media:http://mirror.video.blip.tv/hot-shows.xml ] (without the spaces)
2. You should see something like the embedded player below
Other examples:
Testing embeded Flash Player (single local FLV, MP3 and playlist on other site)
Oceana Cry Cry (using youtube)
Enrique Iglesias - Ring my bells (using youtube)
H2O - No ordinary girl (using youtube, preloading youtube picture)
Конкурс бальных танцев в Тирасполе (using custom XML playlists)
A lot of videos in one post (using youtube)
Warning: Something is wrong while posting posts like the using Windows Live Writer 2009 for BlogEngine .Net. It is broken the JW FLV Media Player and dissappear some categories. The quick fix around this problem is simple: use Live Writer to initially prepare the post and after publishing it, switch to the blog, open it for edit, add missing categories if necessary, and just save it immediately.
Warning: Other cases (if something is wrong), please switch the view to “Raw HTML Editor” and remove accidentally inserted HTML formatting between [], after media: tag or in the link. It is not the place of span, different colors and font switching. Usually it appears by copying using clipboard :-)
.