Cross Video Gallery 6.6 User Guide

Transcription

1 Page 1 of 22 Cross Video Gallery 6.6 User Guide (DNN 7 Video & Audio & YouTube &Slideshow module) 10/27/2014 Cross Software, China Skype: xiaoqi98@msn.com QQ: Mail: xiaoqi98@msn.com

2 Page 2 of 22 Table of Contents 1. Introduction What s new in v Requirements Quick Start (with setup wizard) Step 1: Install module Step 1: Follow setup wizard to configure module Quick Start (without setup wizard) Step 1: Add CrossVideo_Admin sub module to manage data Step 2: Add a gallery Step 3: Add videos Step 4: Use CrossVideo_List sub module to display videos Introduce 13 sub modules CrossVideo_Detail sub module CrossVideo_List sub module CrossVideo_Slideshow sub module CrossVideo_ListDashboard sub module CrossVideo_Search sub module CrossVideo_Taglist sub module CrossVideo_TagDashboard sub module CrossVideo_Author sub module CrossVideo_Archive sub module CrossVideo_Type sub module CrossVideo_Category sub module CrossVideo_WatchHistory sub module Multiple users support Advanced Configurations Convert video to.flv and h264 (.mp4) online/offline Upload large files and play.flv/.mp4 video files Retrieve YouTube videos Disable unwanted fields Create extra fields (for long content) Create extra fields (for short content) Other detail information How to write templates Templates are ascx files... 17

3 Page 3 of Template directory structure Template create steps Uninstall module More help information About Us Support Acknowledgments Faqs... 21

4 Page 4 of Introduction Cross Video Gallery 6.6 is an enterprise-class DNN module that enables multi-user to publish videos/audio and attach images/documents as easy as ABC. It includes 13 sub modules which offer many cool features, as follows: 1. Powerful yet easy to use, v6.5 introduces a new setup wizard to guide you to configure module step by step, all you need to do is just click Next to follow this wizard. 2. Supports both HTML5 & Flash player to play videos/audio. It automatically selects the best playback for your viewer's device and browser, so you deliver unparalleled video/audio experience on iphone, ipad, Android, Mobile, and the Desktop. 3. Video/audio can be from site file, embed code, or external urls (like YouTube) and RTMP streaming. They can be published as stand-alone media, or publish as serials so visitors can watch/listen them one by one. Module also supports ad video. 4. Automatic imports YouTube videos (like YouTube popular, user upload / user favorite / user play list, or search based certain condition) into user video list. And use YouTube s iframe API to play YouTube content on ios and Android devices, so they can be watched on both PC and Mobile. 5. Multiple users support, authorized users can post their own videos/audio and attach photos/documents with media. Each user can manage his files. Module supports automatic conversion of user uploaded videos to.flv or.mp4 (h264) format. 6. Template-driven layout and design. All sub modules are template based, module already includes 5 built-in templates, and you can create your own templates if necessary. 7. Responsive layout support, so in combination with responsive skins they will adjust to smartphone and tablet screens. 8. Display videos/audio with data list, data grid, JavaScript slideshow (9 effects), and Adobe Flash slideshow. 9. Create extra media attributes, or disable unwanted video/audio attributes as your wish. 10. The new advanced search feature allows you to specify the search conditions, you can search based every built-in data fields and custom attributes which you create. Also fully integrates with DNN built-in search mechanism. 11. Upload multiple/large files at one time using Ms Silverlight upload control. 12. RSS/ integration. 13. There are 13 sub modules in package, but all data are manage via 1 single

5 Page 5 of 22 module (CrossVideo_Admin), the other 12 sub modules are used to display related data. 14. Fully integrate with DNN built-in journal. When a new video/audio/comment is created, it will automatic be added in author journals. 15. Integrate with DNN built-in social, author can share video/audio to his/her friends/followers and groups. 16. SEO friendly url / Google website map / Google video sitemap support to let search engines to index your videos/audio more easily. 17. Google Maps / Amazon Simple Storage Services (Amazon S3) integration... Visit to download 60 days trial version which can be installed on official domain names. And visit dnnmodule.com/modules/crossvideogallery/dnnvideogallerymodule.aspx and for live demo. Note, Cross Video Gallery v6.6 requires DNN 7.3+ ( are all tested) to run. If your sites are still under DNN 5.x/6.x/7.0/7.1/7.2, please check other old versions at 2. What s new in v Rebuild based DNN Use YouTube s iframe API to play YouTube content on ios and Android devices, so they can be watched on both PC and Mobile. 3. Closed Captions, preview image, chapter markers supported new slideshow effects added. 5. Improve load speed. 3. Requirements 1. DNN ( are all supported). 2. Sql server 2008/2012 or sql express 2008/ Asp.net framework 4.0+.

6 Page 6 of Quick Start (with setup wizard) V6.5 introduces a new setup wizard to guide you to configure module step by step, we strongly recommend new user to choose this method, it will save you a lot of time. With it, you only need 2 steps to setup Cross Video Gallery module. Step 1. Install module. Step 2. Follow setup wizard to configure module. 4.1 Step 1: Install module If you already bought module, unzip package which you download, you will see CrossVideoGallery 6.6 Pa(Standard).zip (or CrossVideoGallery 6.6 Pa(Enterprise).zip if you bought enterprise edition), choose it as install package. If you want to trial module first, you can download CrossVideoGallery 6.6 trial package.zip at Unzip it you will see CrossVideoGallery 6.6 Pa(trial).zip. The trial package can be installed on official domain names for 60 days. Click Host - Extensions - Install extension wizard to install module. After installation, you will see 13 sub modules. Install via Ftp The install package is about 8mb in size. If you have problem uploading by click Host - Extensions - Install extension wizard, there is an alternative installation option you can use. Please use the following procedure:

7 Page 7 of Upload CrossVideoGallery 6.6 Pa(Standard).zip to Install\Module folder of your site using ftp tools. 2. Click Host - Extensions followed by clicking the Available Extensions tab. Install CrossVideo_Admin which is under the Modules section. Click the Install button to install. Note, if you upgrade from trial version to official version. You don t need to uninstall trial version first, simply re-install official package to overwrite existing trial files, your existing data will be kept after upgrade. 4.2 Step 1: Follow setup wizard to configure module Add one of the 13 sub modules to a page (e.g. CrossVideo_Admin, CrossVideo_Archive, or any other sub modules, it doesn t care which sub module you choose). Cross Video Gallery will detect that you are the first time to run it on current site, and will display a setup wizard to help you to configure it. Like below: Setup Wizard All you need to do is follow the wizard, click Next, module will generate necessary system data (e.g. Galleries / Categories) and create related pages. After that, it will show links to let you to publish videos/audio and view them. It is so easy. 5. Quick Start (without setup wizard) Cross Video Gallery contains 13 sub modules. When you put any sub module to a page for the first time, Cross Video Gallery will show a "Cross Video Gallery Module Setup Wizard" to help you to setup it. We strongly recommend you to follow this wizard,

8 Page 8 of 22 it will save you a lot of time. However, if you want to setup it by yourself, you can cancel that wizard, and follow below steps: Step 1. Add CrossVideo_Admin sub module to manage data. Step 2. Add a gallery. Step 3. Add a video. Step 4. Add CrossVideo_List sub module to display videos. 5.1 Step 1: Add CrossVideo_Admin sub module to manage data First, you may need to create a page before add CrossVideo_Admin sub module to it. Like below: Create Video Admin page. After that, add CrossVideo_Admin sub module to the page. This module is used to manage all data in Cross Video Gallery package. You only need 1 instance per portal. 5.2 Step 2: Add a gallery Click Admin Control Panel System Data - Galleries to add galleries. Galleries are top-level unit to organize data. Each gallery has its own categories / attributes / tags /

9 Page 9 of 22 videos (audio). Please note, the default media type is Video, means user can only post videos (flv, mp4, webm..etc) to it. If you want to also post audio (mp3, ogg, aac.etc), you need to create another gallery which media type is Audio. Each gallery needs a separate page to display videos/audio detail which belongs to it. That page must have a CrossVideo_Detail sub module on it. Module will display a wizard page to guide you create it when you create a new gallery. Note, you can also run that wizard by click Run detail page setting wizards button later. Tips: some people may ask why do we need to create gallery? Well, gallery is mainly used to organize attributes / categories. For example, if you use Cross Video Gallery to publish both videos and audio, you may need to create different attributes for

10 Page 10 of 22 videos and audio, and you also need different categories to organize them. Gallery lets you solve this problem easily. 5.3 Step 3: Add videos Now you can add videos in CrossVideo_Admin sub module - My Videos & Audio My stand alone videos & audio, you may need to upload video/audio/image/document files in My Videos & Audio My Files first. For quick start, let us add a video from embed code as example. Click My Videos & Audio My stand alone videos & audio, click Add Video/Audio button, enter a video title, choose File Type as Embed code, as below. You can copy below content as embed code <embed src=" quality="high" width="480" height="400" align="middle" allowscriptaccess="samedomain" type="application/x-shockwave-flash"></embed> After that, click Update to save video. Cross Video Gallery supports both HTML5 & Flash player to play videos/audio. It automatically selects the best playback for your viewer's device and browser, so you deliver unparalleled video/audio experience on iphone, ipad, Android, Mobile, and the Desktop. You will see a "Video/Audio format support" tab while add videos/audio, please read it first before add your media. 5.4 Step 4: Use CrossVideo_List sub module to display videos. Now you can use CrossVideo_List sub module to show videos. First, create a separate page, then add CrossVideo_List sub module instance on it. You can add multiple instances of CrossVideo_List sub module to the page as your wish. Click media list settings action menu you will see a lot of control options to control the layout of video list.

11 Page 11 of 22 Congratulations! Now try clicking a video in CrossVideo_List sub module, you will see it will be played well. 6. Introduce 13 sub modules There are 13 sub modules in Cross Video Gallery package. Besides "CrossVideo_Admin" sub module (which is mainly used for manage purpose, and should have only 1 instance per portal), the other 12 sub modules are all used to display related data. For example, you can put "CrossVideo_Tag" module on a page to show media tags, put "CrossVideo_Category" module to show categories...etc. Unlike "CrossVideo_Admin" sub module, you can add multiple instances of other 12 sub modules to different pages (or on same page if you like). These 12 sub modules are all template based, you can build your own templates to show related data if you don't like the default layout. They can also support responsive layout, so in combination with responsive skins they will adjust to smartphone and tablet screens. The frequently-used sub modules are CrossVideo_List (show media with data list or data grid), CrossVideo_Slideshow (show featured media with JavaScript slideshow), CrossVideo_ListDashboard (show featured media with Adobe Flash slideshow), CrossVideo_Search (provide search function), and CrossVideo_Category (show categories), CrossVideo_TagList (show tags). Other sub modules are also useful in some situations. 6.1 CrossVideo_Detail sub module Using this module to display video/audio detail information, you need to add a CrossVideoVideo_Detail sub module instance for every video/audio gallery. However, you don't need worry about it. Module will display a wizard page to guide you to create these pages while create media galleries. Of course, you can also add it by yourself, as follows: A: Create a video detail page

12 Page 12 of 22 Make sure page can be viewed by all users. If you don t want this page displaying on menu, you can uncheck include in menu, to hidden it. After page creation, add CrossVideo_Detail sub module to this page. And click Media detail settings to customize its layout. 6.2 CrossVideo_List sub module Use this module to display videos/audio with data list or data grid, click Media list settings to customize it. 6.3 CrossVideo_Slideshow sub module Display videos/audio with JavaScript slideshow, supports 9 slideshow effects. 6.4 CrossVideo_ListDashboard sub module Display video/audio list via Adobe Flash slideshow. 6.5 CrossVideo_Search sub module Provide media search function. 6.6 CrossVideo_Taglist sub module Display media tag list. 6.7 CrossVideo_TagDashboard sub module Display media tag via Adobe Flash slideshow

13 Page 13 of CrossVideo_Author sub module Display media creator list, it is useful if you have many users publish videos/audio in site. 6.9 CrossVideo_Archive sub module Display media archive history by month and date CrossVideo_Type sub module Display media galleries (media type). For some reason, we call gallery as type in previous versions. In v5.7, we change type as gallery based customer s feedback CrossVideo_Category sub module Display media categories CrossVideo_WatchHistory sub module Show registered user watch history. 7. Multiple users support By default, only site administrator can post videos/audio. If you want to enable other users to post videos/audio, you can click CrossVideo_Admin sub module - Admin Control Panel - Configurations - Author Roles to add roles which can post videos/audio. You can specify their disk quota and video/audio count. 8. Advanced Configurations Cross Video Gallery module introduces a lot of powerful features which haven t seen in other competitor modules. Instead of write long and complicated help document to explain every detail of them. We choose to integrate this information directly into module interface. Below are some important areas which you need to read before use this module.

14 Page 14 of Convert video to.flv and h264 (.mp4) online/offline Expand CrossVideo_Admin sub module - Help Online / Offline Video convert permission for more detail. Note, we strongly recommend to choose video convert target as h264 (.mp4) format because these videos can be watched via mobiles like iphone/ipad/android/nokia 8.2 Upload large files and play.flv/.mp4 video files. it: Expand CrossVideo_Admin sub module - Help mime type to see how to configure

15 Page 15 of Retrieve YouTube videos. Expand CrossVideo_Admin sub module My Videos & Audio section, you can create YouTube RSS items and retrieve videos from them. 8.4 Disable unwanted fields Media has some built-in fields, like author/source/image, etc. If you don't need these fields, you can disable them in CrossVideo_Admin sub module - Admin control panel System Data Galleries. If a field is disabled, it will not be displayed on video/audio edit interface which belong to current media gallery. Of course, it will also disappear in video list and detail sub modules too. 8.5 Create extra fields (for long content) Module has a built-in filed: media detail, it allows you to publish long content (text/html content). Besides that, module also supports up to 5 additional fields to let you publish long content (text/html content). You can enable them in CrossVideo_Admin sub module - Admin control panel System Data Galleries. You can specify its title and default value. If a field is enabled, it will be displayed on video/audio edit interface and detail module which belong to current gallery.

16 Page 16 of Create extra fields (for short content) You can use CrossVideo_Admin sub module - Admin control panel System Data Attributes feature to create extra data fields. You can create attributes of varied data type like string/date/time/decimal/integer/image/url/ , and specify its title / default value / help text / validate rules / edit style, you can also provide a list of value to let author choose while editing. After create a field, it will be treated like the built-in fields. It can be displayed in CrossVideo_List and CrossVideo_Detail sub modules. Note, while Admin control panel System Data Attributes feature can also be used to create text/html filed (to store long content), we don t recommend you to do that. Instead, we recommend you to use additional fields in Admin control panel System Data Galleries feature to handle long content. (See section 8.5).

17 Page 17 of Other detail information We provide as detail as possible information for every fields via DNN standard help label. Whenever you feel confusion, click the left help button of field, you will see more detail information. Like below: 9. How to write templates There are 13 sub modules in Cross Video Gallery package. Besides CrossVideo_Admin sub module (which is used to manage data), the other 12 sub modules are used to display related data and they are all template based, you can customize your desired display effect by create different templates. 9.1 Templates are ascx files All the templates are ascx files. To write a template, you need to be familiar with asp.net syntax. 9.2 Template directory structure Template files should be put under related directory. 9.3 Template create steps Take video list template as example.

18 Page 18 of Create a folder under DesktopModules\CrossVideo\Template\List directory, name it as MyList, for example. 2. Copy DesktopModules\CrossVideo\Template\List\default\App_LocalResources directory and DesktopModules\CrossVideo\Template\List \default\ VideoList_Standard.ascx file to MyList folder. 3. Change VideoList_Standard.ascx file name as your wish, for example, MyList.ascx. Of course, you can keep its original file name if you wish. 4. Open MyList.ascx file via Visual studio 2008 or something else, change its content. Note, you need to be familiar with asp.net syntax before change it. 5. Add CrossVideo_List module instance to page, click Media list settings, in General template, select MyList.ascx. 6. Now module will use your own template to display. Of course, you can put your own templates under DesktopModules\CrossVideo\Template\List\default directory if you like. We have put 5 templates under DesktopModules\CrossVideo\Template \List \default as example, you can open them to see more detail. Note, the templates can also support responsive layout, so in combination with responsive skins they will adjust to smartphone and tablet screens. In v6.5, we create a new template for CrossVideo_List sub module - DesktopModules\CrossVideo\Template\List\default\VideoList_Responsive.ascx which supports responsive layout. You can use it as a reference. In v6.6, we also created a template for CrossVideo_Detail sub module (DesktopModules\CrossVideo\Template\Detail\default\VideoDetail_Responsive.ascx), to support responsive video player. Tips: module provides a method GetUDFieldValue to let you to get custom attribute values in CrossVideo_List sub module template. This method is very helpful if you want to show custom attribute in your media list template.

19 Page 19 of 22 Its signature is protected string GetUDFieldValue(string fieldname, string videoid). For example, if you create a color attribute in CrossVideo_Admin sub module Admin control panel System Data Attributes, you can get its value for a video (suppose its id is 10) as follows: GetUDFieldValue( color, 10 ) This method (GetUDFieldValue) is also available in CrossVideo_Detail sub module template. However, its signature becomes as GetUDFieldValue(string fieldname) in CrossVideo_Detail module template, doesn t need videoid parameter. For more information, please see our forum ( 10 Uninstall module Please follow below steps to uninstall Cross Video Gallery package. 1. Click Host - Extensions, click the button to uninstall CrossVideo_WatchHistory... to CrossVideo_Archive sub modules one by one 2. When uninstall CrossVideo_Admin sub module, check on delete files option to delete all files which are related to Cross Video Gallery package. 11 More help information We provide many detail help information on CrossVideo_Admin sub module, login in as site administrator and expand Help section you will see it.

20 Page 20 of 22 For media format support, visit For browser & device support, visit For mp4 video encoding, visit For RTMP streaming, visit 12 About Us DnnModule.com is built to provide professional DNN modules and skins, some of them are free, some not. We wish these stuffs (free or not) can be useful to you. Following are part of our released modules: Cross Video Gallery 6.5 DNN 7 video/audio/youtube/slideshow module Cross Article 7.8 DNN 7 news article & blog module Classified Pro 8.2 DNN 7 store/auction/classified ads module Cross Bulk Mailer the best marketing module for DNN 7 Cross Photo Gallery DNN 7.x photo & Flickr & Picasa & Slideshow module Ultra Flash Player 7.7 (21-in-1) Ultra Image Slideshow 4.7(24-in1) Silverlight Photo Gallery 5.

21 Page 21 of 22 Silverlight Carousel Magazine 4.0 Visitor tracking plug-in 4.1 (Google Analytics and Ms Bing, free) Flash Media Gallery 3.7 for dnn YouTube Sidebar 4.2 Skin/Container Switch 3.5 Yahoo Media Player for DNN (free) Flash Numeric Rotator 4.0 (free) Carousel Flow Gallery 4.3 (free) Silverlight Panorama Viewer 3.0 Please visit for more details. 13 Support You can visit our support forum at or mail to for directly help. 14 Acknowledgments Video convert engine is based two GNU projects: 1. ffmpeg at 2. MPlayer at We learn a lot of from below modules while developing this module: 1. Silverlight file upload module from Michael Washington 2. DNN official module - Form and list 15 Faqs Q. How to upgrade from trial version to official version? A. Simply re-install official version to overwrite existing trial version, module will keep your existing data after upgrade. Q. How to register my module?

22 Page 22 of 22 A: If you bought standard edition of Cross Video Gallery module, you need to register your copy by provide invoice id. As follows: 1. In CrossVideo_Admin sub module, click Register Cross Video Gallery Module, enter your invoice id, and click Register. 2. If you install module on test sites, don t register it. 3. Unregistered copy of standard edition only allows you to add 50 video/audio items. 4. Enterprise edition and enterprise + source edition don t require register. Q. The captcha image doesn t show in media detail, how to solve it? A: It occurs in some DNN version with asp.net 4.0, check DNN forum at pe/posts/default.aspx# to see how to fix it. Q. Why the video detail doesn t display correctly? A. Click CrossVideo_Admin sub module - System Data Gallery, check its CrossVideo_Detail sub module page property. That page must have a CrossVideo_Detail sub module instance on it and its media gallery settings must be the same as current gallery. You can click the Run type detail page settings wizard to configure it. Q: I want to approve videos/audio before display, how can I do that? A: Click "CrossVideo_Admin sub module - Admin Control Panel - Configurations - Global Settings", check on "General - Approval media before display" option. Q: Why I can t watch my videos using iphone/ipad? A: Make sure your video is h264 (.mp4) format. Currently there is no way to play.flv videos in iphone/ipad. Q: I don't want to allow author to attach documents (images) to his videos/audio, how can I do that? A: Click "CrossVideo _Admin module - Admin Control Panel - Configurations - Global Settings", you will see "Enable attach documents/ Enable attach images options under "General" section, uncheck them will hide related functions. For example, if you uncheck "Enable attaches images" option, then "add related images" button will disappear when author edit his videos/audio.