Follow

ProVideo Theme Guide

What's in the ProVideo Theme?

The ProVideo theme now uses the popular open source JW Player(http://www.longtailvideo.com/players/jw-flv-player/),  Flowplayer, HTML5 player. JW Player along with the Drupal Video module (http://drupal.org/project/video) gives you the ultimate control to help you manage video uploading and video management processes in the ProVideo theme. Read more about the technical specifications of the JW Player.

The Drupal video module allows you to upload videos and transcode them from h246, Theora, VP8 to FLV using FFMPEG -- automatically creating video thumbnails and using video thumbnails in video node teaser. The Video module also has a very reliable API for converting videos and auto thumbnailing and can be used as an all-in-one video solution for Drupal. Couple this with the powerful Views module and other cool Drupal capabilities like user roles and permissions, and you have yourself a powerful, open source video solution.

ProVideo Theme Hosting Requirements

The initial requirement for the ProVideo theme is the installed server application called FFMPEG. Since video downloading and converting is required by this theme, it's suggested that you have the following other basic server requirements:

  • GD Library 2 or higher
  • MySQL 5
  • PHP 5.2.11+
  • FFMPEG (Read more: http://www.ffmpeg.org/)
  • Ability to modify PHP Settings through php.ini
  • upload_max_filesize = 100M and more
  • post_max_size = 100M and more
  • max_execution_time = 1000
  • memory_limit = 256M (preferably more, such as 400M+)

Managing the Video Module or Flowplayer

You can manage the video module and Flowplayer settings. However, we would not advise doing so unless you know what you're doing. There are various settings that are straight forward, such as those found on admin/config/media/video where you can do the following:

  • Automatically start video buffering
  • Video convert on node submit
  • Publish when conversion complete
  • etc.

But more advanced settings are included in the video module settings, like video transcosing, player, and presets that may alter the look and feel of your theme or cause other issues. Proceed with caution if not familiar with these configurations.

Managing Flowplayer is easier, as there are only the license key option (if you purchase a license from Flowplayer to remove the Flowplayer branding. You can also manage the look and feel of the player to some extent here: admin/config/media/flowplayer.

Common Questions & Answers for ProVideo

1) Video Formats and FFMPEG Encoder/Decoder

Q: What are the best format or sizes for video uploads? We have tried 1920x1080 H.264 Quicktime files, but they seems to keep failing.

A: This parameter doesn't depend on the ProVideo theme because the FFMPEG converter is a separate web server OS application with coder/encoder plugins and it's configured by the system administrator of the web server. You need to send a request to the system administrator to get the information regarding FFMPEG configuration with a list of all available file formats and codecs installed. The Video module in ProVideo theme is the only add-FFMPEG application to the control panel settings of FFMPEG.

Q. How do I convert .flv or other types of files for playback on iOS devices (iPad/iPhone) or Android devices?

A. You are welcome to set up conversion tools on your servers for certain file types - such as converting .flv to mp4, the preferred format. JWPlayer has a full list of compatible formats available through their website: http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12539/supported-video-and-audio-formats

Scroll down to section: "FLV ( .flv )"

Our theme does not provide file conversion, but it depends on the format uploaded and other converters established on your own hosting server(s). Please consider another file format instead of .flv unless you have a conversion tool set up. This post is very helpful to get your video files running:

http://www.longtailvideo.com/blog/18357/supporting-mobile-video-on-your-site

2) Creating video thumbnails by default for ProVideo when a video is uploaded

Q. How do I create thumbnails for videos I upload so that they can be selected by me or a user when the video uploads?

A. You need go to the Video Content Type fields management section and edit field "Video" to enable the generation of thumbnails automatically. It's disabled by default because it doesn't work without FFMpeg. Make sure you have FFMPEG installed on your server and then go here:

yoursite.com/admin/structure/types/manage/video/fields/field_video

Then, scroll down to the bottom of the page and check the radio button for this part:

"Automatically extract thumbnails from video (with fallback to manual upload)"

Then, click Save. Now, uploaded videos should have automatic thumbnails created when they are uploaded.

3) Uploading Videos using our FTP VideoImport module

Q: How do I upload videos using your videoimport module used in ProVideo?

A: Files for import must be uploaded to folder "files" on a server. Folder for upload can be changed on the settings page.Choose files that you want to import and click "Import" button. Attention! It's necessary to edit a newly created node after import of a video file. Otherwise image preview will be missing in the node.

4) Changing Header/Footer Graphics

Q: How do you change the header and footer logo graphics?

A: Both header and footer logos can be changed using the standard method of going to: /admin/appearance/settings/provideo and changing the default logo checked under "Logo Image Settings."

5) Video Details Page

Q: Where do I manage the items found below the video on the video details page, such as the Share, Description, Flag, and other tabs?

A: The output of these elements can be found within the template file: /sites/all/themes/provideo/node-video.tpl.php

6) Right Column Items

Q: Where do I manage the right column blocks?

A: Right-hand column blocks are created from the standard "Blocks" admin area of your website and are noted as: "Sidebar Right Top," "Sidebar Right Tab," and "Sidebar Right Bottom." You can manage the display of these right column blocks or check the blocks demonstration layout positions by clicking the "Demonstrate block regions (ProVideo)" link found at location admin/structure/block.

7) ProVideo Large Advertising Image Backgrounds

Q: How do I manage the ProVideo image backgrounds on certain pages?

A: The ProVideo background images can be managed very easily by visiting the settings page and specific "field" for that page type. Examples:

  • Content type of "Basic page" corresponds to the main page background located at: /admin/structure/types/manage/page/fields/field_background_page
  • Content type "Blog entry" corresponds to the section "Blogs" background located at: /admin/structure/types/manage/blog/fields/field_background_blog
  • Content type "Video" section corresponds to the "Videos" background located at:  /admin/structure/types/manage/video/fields/field_background_video

Note: Each node can have its own background image if desired! The background of a page defaults to the content type of the node.

Each term category or even tags can have their own background image applied. Visit:

  • /admin/structure/taxonomy/categories/fields/field_background_categories, or;
  • /admin/structure/taxonomy/tags/fields/field_background_tags to apply the corresponding background.

8) ProVideo Ad Banners

Q: How do I manage banner ads on the ProVideo theme?

A: To display the banner or banners in the right columns, just create a new block with your ad code (select PHP for Google ads or install the Google ads module for easy block placements). The standard banners used in the demo of the ProVideo theme are:

  • "Home Banner"
  • "Banner in Category 1"
  • "Banner in Category 2"
  • "Banner in Category 3"
  • "Banner in Category 4"
  • etc.

In the category pages of the ProVideo theme a banner is placed after the 4th video in either grid or list view. However, you can add more banners in the list or grid view at your discretion using the inactive banners noted above in the bullet list.

9) Modifying the JW Player to include plugins or other modifications from the JW Player website

Q: Where can I find out how to change or add onto the existing JW Player included in the ProVideo Drupal theme?

A: You can visit JW Player's "Using JW Player's Plugins" section for more details. To make changes in the ProVideo theme for the JW Player, please open up and modify this file to fit your needs: /sites/all/themes/provideo/video-play-html5.tpl.php

Please note that the ProVideo theme does not come with additional modules from JW Player and ThemeSnap.com does not support third-party modules used in the JW Player. However, you are free to make modifications to fit your likely and needs.

10) ProVideo Player or Video Management Issues

You may encounter messages like this after submitting a video:

"The video conversion process has failed. You might want to submit a simpler video format like mpeg or divx avi. If the problem persists please contact website administrators."

We found that this error may appear because of the presence of temporary problems on the server. The administrator can re-start the process of converting a video file and then after re-running the file conversion problem is usually eliminated. However, if this problem persists, it means that FFMPEG does not support this video format codec or container. in other words, this mean you need to upload a video file packed with another codec or format container that is compatible.

Each hosting provider may provides the configuration of FFMPEG with their listing of installed codecs/encoders/ and format containers. Please check with your host to make sure they can support FFMPEG conversion.

Further troubleshooting help for video issues:

Issue: If the video is not converting

Solution: Check your Drupal watchdog for a report of the issue and you'll likely need to install a proper FFMPEG version with its libs. Also, viewing watchdog you can see running commands to convert videos.

Issue: video uploads are not working. The videos show upload in the screen without any errors. But it is not showing up in the categories list or the front page.

Solution: Your web server may not be configured properly to support Drupal 7 CMS and some third party drupal modules. Try these steps:

  1. Home --> Administration --> Reports --> Status Reports  -- Your server is capable of displaying file upload progress through APC, but it may not be enabled. Add apc.rfc1867 = 1 to your php.ini configuration. Alternatively, it is recommended to use PECL uploadprogress, which supports more than one simultaneous upload.
  2. Home --> Administration --> Configuration --> Search and metadata --> Clean URLs -- Clean URLs cannot be enabled. If you are directed to this page or to a Page not found (404) error after testing for clean URLs, see the online handbook.

11) iOS Device Playback Help

Issue: Videos need to work with iOS and iPad. (FFMpeg is installed and it generates and plays flv format). I think it converting the video to flv which will not play in ios and ipad.

Solution: FLV is not a video codec but it is a file container and it doesn't affect the video file codec you apply to a video file during conversion. You need to apply the right codec for encoding video file for any iOS devices. You may need to add required codecs (perhaps libx264) to FFMpeg on your web server.

Further resources:

iPhone video specifications from Apple's website:

H.264 video: up to 1.5 Mbps, 640 by 480 pixels, 30 frames per second, Low-Complexity version of the H.264 Baseline Profile with AAC-LC audio up to 160 Kbps, 48kHz, stereo audio in .m4v, .mp4, and .mov file formats

H.264 video: up to 2.5 Mbps, 640 by 480 pixels, 30 frames per second, Baseline Profile up to Level 3.0 with AAC-LC audio up to 160 Kbps, 48kHz, stereo audio in .m4v, .mp4, and .mov file formats

MPEG-4 video: up to 2.5 Mbps, 640 by 480 pixels, 30 frames per second, Simple Profile with AAC-LC audio up to 160 Kbps, 48kHz, stereo audio in .m4v, .mp4, and .mov file formats.

JWPlayer does supports MPEG-4 video.

Useful links:

http://ffmpeg.org/

http://ffmpeg.org/trac/ffmpeg/wiki/x264EncodingGuide

http://community.linuxmint.com/tutorial/view/592

http://www.wowza.com/forums/showthread.php?14804-ffmpeg-presets-for-IOS-devices

http://blog.zencoder.com/2010/09/30/how-to-encode-video-for-mobile-use/

http://rodrigopolo.com/ffmpeg/cheats.html

http://thomer.com/howtos/ipod_video.html

http://mashable.com/2008/11/12/how-to-convert-videos-for-your-iphone-or-any-mobile-device/

12) Information on branding your JWPlayer 

In regards to your embedding/branding questions, please read this page: 

http://www.longtailvideo.com/support/jw-player/28839/embedding-the-player

This will instruct you on how use your key to make it a premium player. For example, you will need to enter this code onto your web page head:

 

<script type="text/javascript">jwplayer.key="[insert-key-here]";</script>

 

You will still need to embed the player itself, which is detailed in the link.

Branding/logo instructions are here:

http://support.jwplayer.com/customer/portal/articles/1406865-branding-your-player

Instructions on adding your own logo or branding the player are found in the above page.

It is up to the customer to purchase any commercial or other license from JWPlayer in order to remove the JWPlayer branding/logo or other video playback functionality.

13) ProVideo Theme Wishlist

Check back for more additions to this tutorial. Common questions, answers, or troubleshooting help will be added here as needed. You can also comment in the ProVideo forum.

-----------------------------------------------------------------------------------------------------------------------------------

Functional structure of theme "ProVideo"

1. Features of the ProVideo theme files

   /sites/all/themes/provideo/provideo.info
   Contains information about the theme name, default settings, available regions, and also the enabling of stylesheet files and scripts

   /sites/all/themes/provideo/page.tpl.php
   Contains the template of appearance design for internal pages of the site

   /sites/all/themes/provideo/node.tpl.php
   Contains the template of appearance design for nodes of all content types except "Blog", "Video" content types

   /sites/all/themes/provideo/node--blog.tpl.php
   Contains the template of appearance design for nodes of "Blog" content type

   /sites/all/themes/provideo/node--embedded-video.tpl.php
   Contains the template of appearance design for nodes of "embedded video" content type
   
   /sites/all/themes/provideo/node--video.tpl.php
   Contains the template of appearance design for nodes of "video" content type

   /sites/all/themes/provideo/block.tpl.php
   Contains the template of appearance design for blocks except block regions that are listed below

   /sites/all/themes/provideo/block--banner_in_category_1.tpl.php
   Contains the template of appearance design for block region "Banner in Category 1"
   
   /sites/all/themes/provideo/block--banner_in_category_2.tpl.php
   Contains the template of appearance design for block region "Banner in Category 2"
   
   /sites/all/themes/provideo/block--banner_in_category_3.tpl.php
   Contains the template of appearance design for block region "Banner in Category 3"
   
   /sites/all/themes/provideo/block--banner_in_category_4.tpl.php
   Contains the template of appearance design for block region "Banner in Category 4"

   /sites/all/themes/provideo/block--exposed_form.tpl.php
   Contains the template of appearance design for block region "Exposed Form"
   
   /sites/all/themes/provideo/block--footer_copyright.tpl.php
   Contains the template of appearance design for block region "Copyright"
   
   /sites/all/themes/provideo/block--provideo_helper--1.tpl.php
   Contains the template of appearance design for block "provideo helper"
   
   /sites/all/themes/provideo/block--sidebar_footer.tpl.php
   Contains the template of appearance design for block region "Sidebar Footer"
   
   /sites/all/themes/provideo/block--sidebar_main_menu.tpl.php
   Contains the template of appearance design for block region "Sidebar Main Menu"
   
   /sites/all/themes/provideo/block--sidebar_tabs.tpl.php
   Contains the template of appearance design for block region "Sidebar Tabs"
   
   /sites/all/themes/provideo/block--views--block_tags-block.tpl.php
   Contains the template of appearance design for block "Tags"
   
   /sites/all/themes/provideo/block--views--categories_block-block.tpl.php
   Contains the template of appearance design for block "Categories"

   /sites/all/themes/provideo/comment-wrapper.tpl.php
   Contains the template of appearance design of comments container

   /sites/all/themes/provideo/comment.tpl.php
   Contains the template of appearance design of a separate comment container
   
   /sites/all/themes/provideo/views-view--my-videos--page.tpl.php
   /sites/all/themes/provideo/views-view--page-video--all-videos.tpl.php
   /sites/all/themes/provideo/views-view--page-video--page-1.tpl.php
   /sites/all/themes/provideo/views-view--page-video--page-2.tpl.php
   /sites/all/themes/provideo/views-view--page-video--terms-videos.tpl.php
   /sites/all/themes/provideo/views-view--suggestions--block-1.tpl.php
   /sites/all/themes/provideo/views-view-fields--block-recent-video--block.tpl.php
   /sites/all/themes/provideo/views-view-fields--block-recommended--block.tpl.php
   /sites/all/themes/provideo/views-view-fields--categories-block--block.tpl.php
   /sites/all/themes/provideo/views-view-fields--featured-videos--block-1.tpl.php
   /sites/all/themes/provideo/views-view-fields--home-player--block.tpl.php
   /sites/all/themes/provideo/views-view-fields--most-viewed--block-1.tpl.php
   /sites/all/themes/provideo/views-view-fields--new-video--block.tpl.php
   /sites/all/themes/provideo/views-view-fields--top-picks--block.tpl.php
   /sites/all/themes/provideo/views-view-fields--top-rated--block.tpl.php
   /sites/all/themes/provideo/views-view-fields--top-rated-video--block.tpl.php
   /sites/all/themes/provideo/views-view-fields--user-videos--block-1.tpl.php
   /sites/all/themes/provideo/views-view-unformatted--block-tags--block.tpl.php
   /sites/all/themes/provideo/views-view-unformatted--categories-block--block.tpl.php
   /sites/all/themes/provideo/views-view-unformatted--home-featured-videos--block-1.tpl.php
   /sites/all/themes/provideo/views-view-unformatted--home-recent-videos--block-1.tpl.php
   /sites/all/themes/provideo/views-view-unformatted--my-videos--page.tpl.php
   /sites/all/themes/provideo/views-view-unformatted--new-video--block.tpl.php
   /sites/all/themes/provideo/views-view-unformatted--news--page.tpl.php
   /sites/all/themes/provideo/views-view-unformatted--page-video--all-videos.tpl.php
   /sites/all/themes/provideo/views-view-unformatted--page-video--page-1.tpl.php
   /sites/all/themes/provideo/views-view-unformatted--page-video--page-2.tpl.php
   /sites/all/themes/provideo/views-view-unformatted--page-video--terms-videos.tpl.php
   /sites/all/themes/provideo/views-view-unformatted--suggestions--block-1.tpl.php
   Contain the templates of appearance design of Views
   
   /sites/all/themes/provideo/html.tpl.php
   Contains html titles and the container of the theme

   /sites/all/themes/provideo/template.php
   Contains the auxiliary php code required for the functioning of the theme

   /sites/all/themes/provideo/theme-settings.php
   Contains the description of the additional fields of the form settings of the theme

   /sites/all/themes/provideo/screenshot.png
   Screenshot of the theme

   /sites/all/themes/provideo/logo.png
   Default logo of the theme for various color designs

   /sites/all/themes/provideo/author-picture.gif
   Default user avatar

   /sites/all/themes/provideo/css/bootstrap.css
   /sites/all/themes/provideo/css/main.css
   The stylesheet files of the site design

   /sites/all/themes/provideo/img
   This folder contains image files for the theme design

   /sites/all/themes/provideo/js
   This folder contains the JavaScript files that provide the functionality of the theme

2. The structure of ProVideo

   The pages consist of the following regions
      Sidebar Main Menu
      Content
      Sidebar Right
      Sidebar Footer
      Sidebar Tabs
      Exposed Form
      Home Player
      Home Banner
      Copyright
      Banner in Category 1
      Banner in Category 2
      Banner in Category 3
      Banner in Category 4
      Related Videos

   The content types:
      "Basic page" is used for separate pages such as "About Us"
      "Blog entry" is used for articles of blogs section
      "Embedded Video" is used for posting an embedded video
      "Video" is used for posting a video

   Blogs section is based on the standard "Blog" module

   Video section is implemented using "Views" module

   Blocks Banner, Our Network, Count Videos, Banner in Category 1, Banner in Category 2, Banner in Category 3, Banner in Category 4 Copyright are standard custom blocks

   Blocks View: Categories (Term), Block Tags, Featured Videos, User Videos, Top Rated, Most Viewed, Exposed form: page_video-all_videos, Related Videos are implemented using "Views" module
   
   Blocks Main menu, About Us, Information, Rules &amp; Polices, are standard menus

   "Main menu" is used for the display of the upper menu
   
3. ProVideo Warnings

   It's necessary to make a backup of all files and a database before updating any modules, theme or Drupal core
   
   The additional theme settings are in the settings section of ProVideo 7.x-1.0 theme that is enabled by default for the given site
   The following additional settings are available: Fonts, Colors, Accounts
   The fonts are used from this service http://www.google.com/webfonts
   just write the name of a font into field "Google Font for Font Headers", write the syle of a font into field "Styles for Font Headers", write additional parameters of a font into field "Character sets for Font Headers", "Font Menu" and "Theme Font" are configured by analogy with the steps described above.

Flowplayer, HTML5 player

0 Comments

Article is closed for comments.