I like using YouTube, there's a great package called uTube with some nice integration features.

Another option if you want to keep everything local is to use the Universal Media Picker with the File System provider - that way your users can just dump their videos to a folder on the network and they'll be available for choosing within Umbraco.  This eliminates long upload times etc.

Otherwise you can always use the Media library with a custom media type, and treat it just like an image gallery :)

As far as optimization I'm not sure how you could do that without writing some custom code

-Tom

Hi fuji,

I lately created a video gallery using the Digibiz Advanced Media Picker to select video files from the Media Library and Flowplayer to play the Flash videos in the browser.

You can read more about this in this post: http://our.umbraco.org/forum/using/ui-questions/31325-how-to-build-a-video-gallery

hope this helps,

Anthony

Hi Guys,

Thanks to both of you for the sugggestions. Well for some reason i cant use YouTube since they dont have any internet access.  

The Video gallery is for an intranet used on a local server only.

My best shot will be to either use Universal Media Picker or Digibiz Advanced Media Picker. 

@Tom All my videos files are of video.wmv so i think i will need to convert them to flv.

@Anthony I had a look at your post but have you been able to display the videos? the solution is not marked as solved there.

//fuji

@fuji yes I did, the Razor code for my video list looks like this:

@inherits umbraco.MacroEngines.DynamicNodeContext
@using umbraco.MacroEngines
@{
    var videos = @Model.Children.Where("Visible");    
}
@foreach (var itemgroup in videos.InGroupsOf(3))
  {    
        <div style="float:left;clear:right;margin-right:10px;margin-left:10px;margin-top:10px;margin-bottom:5px;">
        @foreach (var video in itemgroup)
        {
           
           var videothumbnail = video.videoThumbnail.mediaItem.VideoImage;              
           <div style="float:left;margin-left:10px;margin-top:10px;margin-bottom:5px;">
             <a href="@video.Url">
              <img src="/[email protected]&amp;width=200&amp;height=150" style="margin-right:10px;margin-bottom:5px;" />
             </a>
             <p><strong>@video.videoTitle</strong><br />
             Length: @video.videoDuration</p>
           </div>
                               
        }
        </div>  

I use the .InGroupsOf() function to have 3 video thumbnails in a row

The result is this:

Now just need to implement a pager

greetings,

Anthony

Looks nice Anthony!

@Fuji - I think Flowplayer and the likes will play most formats these days, including WMV.  Since you're on an intranet maybe optimization/conversion won't really be a big issue since you're all on the same LAN.

@ Tom, thanks, I followed the example of the Umbraco.TV video gallery: http://umbraco.com/help-and-support/video-tutorials.aspx

Maybe I'll also implement the hover-effect. I guess they have done this with a .css opacity definition, and maybe later on I'll implement the category filter.

greetings,

Anthony

Hi Anthony,

Thanks for the response and help on this. What i did to start with is

1. Create a new Media Type Alias Videos with some properties like Upload, umbracoBytes and umbracoExtension.

2. New Custom Data Type Digibiz Advanced Media Picker .

Aas mentioned in my previous threat i have huge files to upload through the backoffice of umbraco. Some of my videos are 13mb and even 200mb which takes a while to upload.

Am not sure if using this approach will be best for me.

//fuji

Hi fuji,

This is something I possible will have to deal with also as my video library gets bigger and bigger. I think ideally the videos should be pulled in from an external source like Vimeo or Youtube, but I didn't figure out yet how to pull this off :)

greetings,

Anthony

Hi Anthony,

I did try your suggestion, but somehow i couldnt  get large files of more than 9mb uploaded through the backoffice of umbraco.

What am thinking if since this is an intranet is to upload the files in a folder in the root of umbraco.  So something like Video (folder) name and allow only the admin to ftp in this folder.

Then just create a new document type under which i will have a textstring where i will add the path of the video which will allow user to view the videos.

//fuji

If you can't upload files larger than 9mb you should look at the maxRequestLength attribute in the httpRuntime element in the web.config. There you can configure the max size of your upload files.

Jeroen

Hi Jeroen,

Yes but how would i upload 100mb?? :(

//fuji

Hi Jeroen,

Am using the Digibiz Advanced instead to create the thumbnails images and so enabling the user to Cropper the images but am not sure how this is working.

I have created a new customData Type and for the Display Options am not sure "Do i need to create a custom Image Cropper" to make this work?

Using razor how do i get to display the cropped image? right now am doing this 

<img src="@vids.videoThumbnails" />  and am getting an Id 2552 instead.

//fuji

You don't need to set a cropper alias or name. That's just for the preview in the backend, but it's optional.

In this Razor file you can find some examples on how to get the cropped image: http://damp.codeplex.com/SourceControl/changeset/view/86116#1970702.

Jeroen

I tried the classic way and still not getting the cropped image, from the source view this is what am getting

<img src="2554" title="">

Could you past part of your Razor code and also the DAMP xml (which can be found in umbraco.config). 

Jeroen

@inherits umbraco.MacroEngines.DynamicNodeContext
@using umbraco.MacroEngines
@using DigibizAdvancedMediaPicker;


@{
      var videos = Model.NodeById(2519);
      var items = videos.Children.OrderBy("createDate descending").Take(5);
      dynamic media = Model.MediaById(Model.dampClassic);
  
      var counter = 0;
    
  
     foreach(var vids in items)
        {
        counter ++;  
          <ul class="videos">         
          <li><a href="@(vids.Url)?iframe=true&width=660&height=500"  rel="gal[video@(counter)]" title="@vids.Name">@vids.Name</a></li>
         
           @if(String.IsNullOrEmpty(@vids.videoThumbnails.ToString()) == false){
            <img src="@vids.videoThumbnails" title="@vids.Name"/>
            <img src="@media.umbracoFile" alt="@media.nodeName"/>
                                                                                
            }
        
          else{
                 @:No preview
          }
         
          <li><i>@vids.CreateDate.ToString("dd MMMM yyy")</i></li>
          <li class="videoDesc">@Library.Truncate(@Library.StripHtml(vids.videoDescription), 100)</li>
         <li class="videoMore"><a href="@(vids.Url)?iframe=true&width=660&height=500" rel="gal[Viewvideo@(counter)]">view video &#187;</a></li>
         </ul> 
         }
   
 }

This is actually the only thing i can see from the section am working on in the umbraco.config.

<videoThumbnails>2554</videoThumbnails>

Could you also show part of your Umbraco tree and the xml from the umbraco.config? Don't really understand what you're trying to do in your code.

Jeroen

Hi Jeroen,

Well i have a video gallery where the admin will be able to add the url of  the video after creating the node. My tree looks like this

Video Gallery

• Video 1
• Video 2
• Video 3

Here what am trying to achieve is to give the admin the possibility to upload a thumbnail for each video. But somehow i need the images to be cropped first with the width of 106px and height 58px something like that.

What i did is a created a new custom data type and added the cropping height and width there. In my document type i have a alias called videoThumbnails where i can direclty create my image and save it in the specific folder in the media section.

Now in my razor script i would like to display the cropped image but not sure of how to get this done.

//fuji

is working on a reply...