2015-02-02

JUGNOON Video Uploading & Publishing script for ASP.NET MVC allows asp.net developers to implement advance real time video uploading, publishing, cloud storage and saving video data in database just by integrating easy to use script in your ASP.NET MVC projects. it can allow you to upload, publish and manage unlimited number of videos at a time but videos to be published in sequential mode one by one to avoid overload on server.

Main features of Jugnoon Video Uploader too includes.

upload one or more videos

publish videos to mp4 or other format one by one in sequence if multiple videos selected,

displaying publishing status via progress bar in real time

send all published video information (source filename, published filename, duration, duration in seconds and more) of each video at the end to server site scripting in order to allow developer to write code for saving information in database

support large video uploading via smaller chunks

with lots of customization options

builtin support for responsive bootstrap 3.2 themes

and more

Screenshots:

Video Selections



Video Uploads



Video Publishing



Video Publishing if error occured in processing with error code

List of published videos

Technical Information

Jugnoon Video Uploader can be easily integrate and use in your existing asp.net mvc projects. It is currently written using ASP.NET MVC 5 (builtin project) with bootstrap 3.0 compatible theme.

Configuration Options

Jugnoon Video Uploader configuration can be managed from web.config file. Here is list of configurations supported.

sourcepath: source directory path e.g “contents/source/” where to upload original videos

publishedpath: published directory path e.g “contents/published” where to save published videos

allowedextensions: list of videos extensions to be allowed for uploading.

maxfilesize: max file size e.g “1000” mb to be allowed.

chunksize: chunksize e.g “10mb” in order to send video file in chunks if your video is too huge.

maxallowedvideos: no of videos to be allowed to upload at a time.

outputformat: output video format e.g .mp4. In order to choose another format you must also set encoding settings according to your choosen video format.

Make sure you allow large videos files in your asp.net mvc website by increasing file upload size limitation in web.config file.

Directory Structure:

Jugnoon Video Uploader list features in the following directories

Areas: where core video api written which is responsible for uploading, processing, sending progress information to client browser, check video publishing status and more. Within areas, there is single controller responsible for everything named “videoController“

Contents: where to save original and published videos. you can change your directory structure according to your site requirement.

Controllers: there is only one controller used in jugnoon video uploader script named “mediaController” . It is responsible for loading upload video module in lazer view.

css: List of bootstrap 3.3.2 compatible themes used in this project.

ffmpeg: Core utility for processing videos

mp4box: Core utility for adding meta information to mp4 videos to be make it compatible for web streaming.

Models: Only one model used “VideoSettingsModel” responsible for sending configuration data set in web.config file to upload module.

Plugins: Plugin like plupload located here.

Views: few files used for loading home and upload page. Most files located here depends on builtin asp.net mvc project which doesn’t have any role in jugnoon video uploader.

Permission Settings:

In order to upload videos properly. you must provide full or write permission to the following directories

contents

ffmpeg

mp4box

Also make sure full trust asp.net configuration enable on your server in order to allow script to process / publish videos.

Video API Important Calls

As mentioned earlier there is only one controller in area section “videoController” with few methods responsible for handling upload and video processing activities while communicating with jQuery upload application. here is list of video api calls and their usage with customization instruction.

I: /api/video/upload: this method is responsible for uploading video files, one by one.  You can access this method from /Areas/api/Controllers/videoController.cs file

If you want to change the path of directory where to save video, you can do this via this line

II: /api/video/encode: this is the main method responsible for video encoding and sending video progress information to client browser. This method publish each video in background while using advance script to calculate how much video processed and send all video processing stats to jquery application in JSON format where to display stats in progress bar.

In encode method the main section involve is video encoding or publishing. here we used our own utility Media Handler Pro to publish videos, images, audio files by executing any type of ffmpeg commands. We recommend using latest ffmpeg build with upto date commands for better result. Here is how we use code for publishing mp4 videos

Parameters attribute is the most important attribute, you can use it to pass almost any type of ffmpeg command according to your own settings here.

Make sure the command you are sending properly supported by ffmpeg you are using. In case of error you will see error message with error code as shown in screenshot. For more detail visit http://www.mediasoftpro.com/error-codes.html

Review rest of method features, you will understand how everything works. Code is written in a well mannered and easy to understandable format.

II: /api/video/published: This method call except list of uploaded and published files in JSON Array and process all files. Processing includes

Validate each file to make sure videos are published properly.

Rename each published video to avoid duplication issue.

Allow you to use any cloud API to send published videos to cloud storage e.g amazon s3

Allow you to save each video information in database

You can do any type of custom processing here before sending response to jQuery application with published report.

We used to display published information, you can add jquery code to redirect user to another page e.g myaccount or my videos page once video processing completed.

Video Uploader Module:

Video uploader module located in normal /views/media/upload.chtml page. upload.chtml page include both html and jquery code. You can customize both according to your needs.

Feedbacks and Error Report:

We appreciate reporting feedback and error reports to make this solution more feature rich and easy to use. you can contact us via our official support mail.

Show more