13. To Add a Video Clip to the Website

03 Tháng Sáu 201511:47 CH(Xem: 9939)
13. To Add a Video Clip to the Website
53Vote
41Vote
31Vote
20Vote
10Vote
4.45
blank (Download PDF)

To Add a Video Clip to the Website

Before adding a video clip to the website, your website must already have a category for this type of content. If your website hasn’t had such a category, you will need to add a video category to the website first. Then, you can add a video clip to it.

Adding a video category

In this example, you will add a category named “Video” to the Left Menu of the English section. Here is how to do it.

A. Login the Control Panel as usual.

B. Click "Website Manager" on the top menu. Select "Categories" to the drop down list. You may, instead, click on the Categories icon in the center area.

A list of existing categories will appear.

C. Select which language site to manage.

You are going to add category "Video" to the English site, so you will click on the box near the upper left corner and select "English Site".

The list will show the categories of the English site.

Supporting managing responsive web design vnvn cms 2.5 add a video clip

The category you are adding is after Homepage in the Left Menu (pointed by the red arrow).


D. Click the "Record Edit" button near the upper right corner. A blank record will appear.

E. Click the "New" button if the record is not blank. Otherwise, go on to the next step.

F. Please focus on these 3 data: Parent, Title and Content Type. In the “Content Type" group, remember to select video as the content type for this category.

    .Parent. Select "Left Menu" here.

    .Title. Fill in "Video" here.

    .Content Type. Select "Video" here.

You do not need to concern about other data at this moment.

The record would look like this after those boxes are filled in.

Supporting managing responsive web design vnvn cms 2.5 add a video clip

G.
Click the "Add" button at the top or bottom of the record. The message "Data Added Successfully!" will appear near the upper left corner.


H. Next, change the order of this category so that it will come after "Writings". Find the Order box in the Properties group. Click on the arrow at the end of the box; then select "After : Writings" in the drop down list. The new category will come after Writing.

Supporting managing responsive web design vnvn cms 2.5 add a video clip

I.
Then click the “Update” button. The message "Update Successful!" will appear near the upper left corner.


J. Go to your website and check if the Video category has been added to the Left Menu. You must refresh the web page. Click the "Refresh" button of your browser, or hit the "F5" key on your keyboard.

You have finished adding video category to the website.

Adding a video clip to the website

The following steps can be used for adding audio files to the website. Our program treats video and audio as the same kind of media files.

Suppose you have already had a video category. Now, it’s time to add a video clip to it.

In this example, you will add a video clip to the English section. Here is how to do it.

A. Login the Control Panel as usual.

B. Click “Content Manager” on the Top Menu, then select “Video & Audio” in the drop down list.

Supporting managing responsive web design vnvn cms 2.5 add a video clip

C. Select which language site to manage.


You are going to add a video clip to the English site, so you will click on the box near the upper left corner and select "English Site".

The list will show the existing video clips in the English site.

Supporting managing responsive web design vnvn cms 2.5 add a video clip

The list of existing video clips in the English site will appear. The list is now empty in this example.


D. Click the "Record Edit" button near the upper right corner. A blank record will appear.

Supporting managing responsive web design vnvn cms 2.5 add a video clip

Please focus on the 5 essential data: Category, Title, Description, Author and Thumbnail Image (marked with red numbers in the above picture).


    1. Category. On the right side of the screen, click the box on the same line with “Video”.

    2. Title. Fill in a title for this video clip. For this example, you will fill in “Khanh Ly sings Nguoi Em Nho”.

    3. Description. Insert the video file here.

Supporting managing responsive web design vnvn cms 2.5 add a video clip

    Click the “Insert/edit embedded media” icon to start inserting video file. This icon has the picture of a film strip. The “Insert/edit embedded media” screen will appear.


Supporting managing responsive web design vnvn cms 2.5 add a video clip

    Click the icon at the end of the “File/URL” box. You will enter the file area of your web server. Since this is a video file, you should upload it into the “Media” folder.


    Click the “Upload” button near the upper right corner.

    Click on “Media” on the left panel. You will enter the file area for your media files. It is quite empty at this moment.

Supporting managing responsive web design vnvn cms 2.5 add a video clip

    The Upload screen will appear. Click the "Add" button. You will see the files in your computer.


Supporting managing responsive web design vnvn cms 2.5 add a video clip

    Find your video file and click on it. Then, click the “Open” button. Your website supports these video file formats: Windows media (wmv), Flash video (flv), Quicktime (mov), Shockwave (swf), Realmedia (rm).


Supporting managing responsive web design vnvn cms 2.5 add a video clip

    The “Upload” screen will re-appear. You will see the filename at the upper left corner.


    Click the "Upload" button. The file will be transferred to the web server. The video file may take a long time to upload.

Supporting managing responsive web design vnvn cms 2.5 add a video clip

    When transferring in completed, the message “All files have been uploaded” will appear. Click “OK”. The “Upload” screen will re-appear.


    Click the "Close this window" button at the right bottom to exit the upload screen.

Supporting managing responsive web design vnvn cms 2.5 add a video clip

    You will be asked to confirm. Click the "Yes" button.


Supporting managing responsive web design vnvn cms 2.5 add a video clip

    You are back to the file area of your web server and you will see your video file here. Click on the filename; then click the "Insert" button at the right bottom.


Supporting managing responsive web design vnvn cms 2.5 add a video clip

    The “Insert/edit embedded media” will re-appear. The “File/URL” box has been filled with the path to the video file.


Supporting managing responsive web design vnvn cms 2.5 add a video clip

    Below the “File/URL” box is the “Video Type” box which shows the video format of the file you just uploaded. Underneath is the “Dimension” box. The numbers show the actual dimension of the video screen. You can enter a different set of numbers to make the background of the video larger or smaller.


    Now, click the "Insert" button, you will be back to the record of the video clip. A video file icon will now appear in the “Description” box. It looks like a light yellow frame.

    4. Author. You may want to fill in the author or performer of this video in this box.

    5. Thumnail Image. You will need to fill in the path to the thumbnail image of the video here. The program will create a thumbnail image from the video for you. Here is how to do it.

    Click the “Browser" button at the end of the box. You will see the files in the Media folder because you’ve just uploaded the video file here.

Supporting managing responsive web design vnvn cms 2.5 add a video clip

    Find the video file and click on it. Look at the lower left bottom, you will see a button named "Media Tools". Click on it.


Supporting managing responsive web design vnvn cms 2.5 add a video clip

    A list of tools will appear. Click the box on the same line with “Create thumbnail image”. Then click the “OK” button.


    The thumbnail image will be created and placed in the same folder as the video file. The filename is the same as the video file with addition of the part: “-thumbnail

Supporting managing responsive web design vnvn cms 2.5 add a video clip

    Click on the thumbnail file, you will see a small image at the left bottom. Now, click the "Insert" button at the right bottom.


Supporting managing responsive web design vnvn cms 2.5 add a video clip

The next two boxes are for audio files only.


    6. Brief. You do not need to fill in this box. It will not be shown on the website along with this video clip. This information is used with audio file only.

    7. Audio Present. This information is used with audio file only. Fill in the name of the performer here. It will not be shown with the video; so you can leave it blank.

After the above boxes are filled in, your record will look like the following picture.

Supporting managing responsive web design vnvn cms 2.5 add a video clip

The next 2 boxes are for special purposes.


    8. Ordinal. This box is used for changing the order of this video clip in relation to the other video clips.

    9. Hot News. Check this box if you want this video to appear in the “Hot Video” box on the web page.

E. Click the "Add" button at the top or bottom of this screen. The message "Data Added Successfully!" will appear near the upper left corner.

F. Go to your website to check if the video clip has been added to the category “Video”. You may need to refresh the web page. Click the "Refresh" button of your browser, or hit the "F5" key on your keyboard.

Supporting managing responsive web design vnvn cms 2.5 add a video clip

G.
Click on the thumbnail image or the title of the video to view the detail page.


Supporting managing responsive web design vnvn cms 2.5 add a video clip

H.
You will see that the video screen is not centered in the page. If you want to move the video to the center, go to your video record and edit it.


Supporting managing responsive web design vnvn cms 2.5 add a video clip

    1. Go back to the Control Panel. The video record is still there. Click on the yellow frame inside the “Description” box to select the video file. This frame represents the video file.


    2. Click on the centered paragraph in the tool box. The yellow frame is moved toward the center.

    3. Click the "Update" button. The message "Update Successful!" will appear near the upper left corner.

    4. Go to your website and check if the video screen has moved to the center. You need to refresh the web page. Click the "Refresh" button of your browser, or hit the "F5" key on your keyboard.

Supporting managing responsive web design vnvn cms 2.5 add a video clip

You have finished adding a video clip to the website.
Gửi ý kiến của bạn
Tên của bạn
Email của bạn