Video in Drupal

In this post, we cover how to install and configure Drupal site to play video files using either JW player or Video.js player. The post is divided into three sections. In the first part, we describe how to install and configure Video module necessary for JW video player to play the video. In the second part, we cover how to install and configure JW video player. Next, we show how to incorporate the video file to test the setup. At last, we cover how to play videos with only Video.js player.

Required modules: video, libraries, jw_player, videojs

Part I – Install and Configure Video Module

a) Download and Enable Video module
If you use drush, then:

drush dl video
drush en video, video_ui

This downloads video module and enables video as well as video_ui modules

b)Configure Video module
To configure video module, go to ‘admin/config/media/video’ and turn off transcending in ‘transcend’ tab. In addition, select ‘html 5 player’ for all of the video types or the video type of files you are going to play

This completes video module install. Next, we need a player to play the video files. In this post we demonstrate how to install/configure two different video players but you only need one to play the video.

Part II – Installing and Configuring JW Player

a) Install Drupal module – jw_player
With drush:

drush dl jw_player
drush en jw_player

b) Install JW Player Library
Go to http://www.jwplayer.com/about-jwplayer/ and download the JW player.You will have to create account in order to get the jw player and there licensing restriction all of which makes the other player vidoe.js covered next a more appealing alternative.

Once you download the library, copy it into the libraries folder – ‘sites/all/libraries/jw_player’

c) Configure JW Player
The only configuration necessary is to set video presets that is size for the video window. To do so, go to admin/config/media/jw_player and create jw_player presets

Part II – Installing and Configuring Video.js Player

An alternative to the JW Player is Video.js Player. The Video.js Player doesn’t require Drupal Video module.

a) Install Drupal module – videojs
With drush:

drush dl videojs
drush en videojs

b) Install Video.js Library
Go to videojs.com and download the Video.js player. Once you download the library, copy it into the libraries folder – ‘sites/all/libraries/video-js’ which is default location but you can be changed under videojs configurations

c) Configure Video.js Player
There is nothing to configure except make sure that the library(sites/all/libraries/video-js) contains video.min.js file

This completes the back end work for playing the video

Part 3 – Incorporate Video in your Drupal site

For the front end, you would create a field of type ‘file’ to incorporate the video on the page. For this field, go to ‘manage display’ and select ‘HTML 5: Video Player’ for Video.js player or ‘JW Player’ for JW Player. You would also specify the type of video files to play part of standard Drupal file field configuration

You are done. Now, create new instance that has this field and upload the video file.

For developers, to render the field in template file as following:

            $video_render_array = field_view_field(
                'node',
                $node,
                'field_video_file',
                array(
                    'type' => 'jw_player',
                    'label' => 'hidden',
                    'settings' => array(
                        'jwplayer_preset' => 'video_small_preset',
                    ),
                )
            );

            vars['some_var'] = render($video_render_array);

To render a field of VideoJs:

$video_render_array = field_view_field(
                'node',
                $node,
                'field_video_file',
                array(
                    'type' => 'videojs',
                    'label' => 'hidden',
                    'settings' => array(
                        'width' => '400',
                        'height' => '400',
                        'posterimage_field' => NULL,
                        'posterimage_style' => NULL,
                    ),
                )
            );

            vars['some_var'] = render($video_render_array);

Troubleshooting

1. Look into ‘admin/reports/status’ for errors
2. Check the module documentation (README file in module folder)

Issue

ERROR 1: Invalid argument supplied for foreach() in video_players_admin_settings() (line 326…

This may be because the field type is ‘video’ when it needs to be a ‘file’ with display format ‘JW Player’

ERROR 2: Please select a player to play Flash videos

This may be because the JW player is not present in ‘libraries’ folder or the field type is configured to be a video type when its need to be a simple ‘file’ type

ERROR 3: No video with supported format and MIME type found

Make sure the Drupal video module is installed and configure if using JW Player. For Video.js, make sure that there exists the video.min.js file in the sites/all/libraries/video-js folder

References

Play and Pause Buttons for YouTube and Vimeo Videos (via Their APIs)

Leave a Reply

Your email address will not be published. Required fields are marked *