DNN Video Player - User Guide

pdf iconDownload user guide for this module in PDF format

Introduction
Original Coding Staff Video Player was enhanced with new features and improved to make videos management more straightforward and simple.  

Module Installation
Follow the steps below to install the Video Player module to a DNN portal.

  • Log in to a DNN portal.
  • Proceed to the “Host - > Module Definitions” page.
  • Scroll down to the bottom of the page and click the “Install module” link.
  • On the next page click “Upload” and browse for the module pack on your computer. Choose the pack and click “Open”.
  • Follow the steps offered by the installation wizard to run the installation.

After the installation is complete the module is going to be available for setup and use.

Adding a video to the player
There are several ways of adding a video to the module:

  • Play video from server.
  • Play video from external source.

Before learning how both options should be used there’s one more thing we need to take care of. If you choose the option to play videos from server make sure the videos are in the appropriate format: .mp4, .webm or .flv. We also need to check that this format is enabled on the portal.

  • Go to the “Host -> Host Settings” page and find the “Other Settings” section. Unfold it and locate the “Allowable File Extensions” field where you’ll need to indicate the required file extension - flv,mp4,webm. Make sure that the indicated formats are separated from previously inserted values by a comma as shown on the screenshot.

allowable file extensions

Now that the necessary formats have been activated we can learn of the two ways videos should be added to the portal.

Playing video from server
In order to play a video located on the server, we need to upload it there first. There are several ways of doing this.

If a video file is smaller than or equals to 8Mb it can be uploaded with the help of the “File Manager” functionality available on the portal.

  • Go to the “Admin - > File Manager” page.
  • There’s a list of folders on the left displaying a root portal folder and folders from the server directory Portals/0/.
  • Create a new “Videos” folder by clicking on the “Add Folder” icon.
  • Choose the newly created folder from the folders’ list and click “Upload”.
  • On the next page you will be suggested to choose a folder to which a video file should be uploaded to (let’s choose the “Videos” folder) and to browse your computer for a video file you intend to upload. Choose the file and a portal folder and click “Upload File”.
  • upload a video file
  • Let’s get back to the “File Manager” page and choose the “Videos’ folder from the list of folders. We’ll see that the video we have uploaded is there.
  • video player image

  • Finally, let’s go to the page with the video player module and access its settings. The “Play video from server” radio button should be chosen in the first “Video” option. From the “Folder” dropdown menu let’s choose the “Videos” folder. From the “File’ dropdown menu choose the file we’ve just uploaded using “File Manager”.

    We recommend you add your video in two major formats - mp4 and webm. It will increase the number of compatible with the Video Player browsers, the browsers of different Operation Systems and mobile devices. If you have the video in none of mentioned above video formats or would like to convert the video to one of these video formats, you are welcome to strengthen video player with using Coding Staff Video Converter application for Windows. This desktop application supports the convertion in flv, mp4 and webm video formats.

If the file is bigger than 8Mb there’s still a way to upload it to the portal and the video player to play it.

To upload a large video file go to the “Videos” folder on the server through FTP ( using “Total Commander”, free "FileZilla" or any other FTP client) and upload the required file into the folder.

After uploading the file get back to the “File Manager” page on the portal and click “Synchronize folders” and “Synchronize files” buttons.

In case you still want to upload big files via File Manager, there is an article which might be helpful for you. Your site administrator would be able to extend this limitation.

Checking server settings

Next step will be the checking of your web server - IIS - on availability to play your videos. The most easiest way it is a simple opening just-loaded video by URL. In our example we've uploaded a .webm video file into the "video" folder via Admin->File Manager. Thus, the exact URL will be http://www.mydomain.com/Portals/0/video/sample.webm, where video - it's a folder name 

If you use Host -> File manager, you can check the video with this URL http://www.mydomain.com/Portals/_default/video/sample.webm 

You should see your video in browser if the server is configured properly.

If you don't see anything or see the 404 server error, you can:

1) ask your hosting provider to add necessary MIME types (.flv, .mp4, .webm)

2) ask your system/server administrator to add the necessary MIME types (.flv, .mp4, .webm)

3) configure it manually. We have an article about how to add the necessary MIME type in IIS.

Playing video from external source

Coding Staff Video Player can also play videos from external sources. Tested supportable video sources include Vimeo and Youtube.

In order to play a video from an external source:

  • Go to the module’s settings and choose the “Play video from external source” radio button in the first “Video” option.
  • In the “Source” field insert embedded code of the video taken from either Youtube or Vimeo.
  • Alternatively in the same field it is possible to indicate a path to the video stored on a different server. The path to the video should have the following format http://www.portalname.com.sample.mp4

Example of YouTube embedded code:

<iframe width="420" height="315" src="http://www.youtube.com/embed/W9wsw3KHe9o" frameborder="0" allowfullscreen></iframe>

Example of Vimeo embedded code:

<iframe src="http://player.vimeo.com/video/8077783?title=0&amp;byline=0&amp;portrait=0" width="400" height="250" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe><p><a href="http://vimeo.com/8077783">MenuBox - a new free DotNetNuke menu platform</a> from <a href="http://vimeo.com/codingstaff">Coding Staff</a> on <a href="http://vimeo.com">Vimeo</a>.</p>


Questions?

+1-775-979-5505