Video Portfolio is a simple HTML 5 video player to showcase video-based portfolios. It's set up to deliver a great video experience no matter what browser or device your viewers have.
The video player is designed to be flexible, so while it has a lot of options, you can use the default setup and get started right away. Once it's set up all you need to do is upload your videos.
- It creates a HTML 5 video player that works in all major browsers: Chrome, Safari, iOs (newer and older iPhones and iPads), Firefox, Opera, IE9 & IE10 and even IE8 (using a flash fallback).
- You can easily add more videos without updating any HTML. Simply upload the videos to your site (via ftp).
- It doesn't require a CMS that needs to be updated and maintained.
The video player script looks for a folder (i.e. video) in a directory (or directories) and adds them to the player.
Directory Structure:
player.php
video/
01_Artwork/
O2_Promos/
In this example player.php is looking in the video folder and sees 2 subfolders: 01_Artwork and O2_Promos. It will look for videos in these folders and create a player. Since there are 2 subfolders in this example it will create navigation options so you can view the contents of both folders. Navigation options can be specified under navigation options in the player config.
You can add just one version of your video or for better compatibility add multiple versions. It's recommended to add; a h264 video (high profile) for desktops, newer phones and tablets, and for the flash fallback; a webm video for Firefox and Opera browsers; and a h264 video (baseline profile) for older phones, tablets, and iPods.
You can either add as many different videos as you like to the same folder or add them to different folders. If there are different video titles in the folder they video player will create a drop down or a playlist so you can navigate between the videos. In this example 01_Artwork has four 'flavors' of the same video (artwork_1). In O2_Promos we have four 'flavors' of two different videos (Trailer_1 and Promo_1).
video/
01_Artwork/
artwork_1-hd.mp4
artwork_1-sd.mp4
artwork_1-sm.mp4
artwork_1-wb.webm
O2_Promos/
Trailer_1-hd.mp4
Trailer_1-sd.mp4
Trailer_1-sm.mp4
Trailer_1-wb.webm
Promo_1-hd.mp4
Promo_1-sd.mp4
Promo_1-sm.mp4
Promo_1-wb.webm
We want to have pretty (legible, human readable) names for our directories and videos without the hassle of updating HTML. So we have to go through a few slightly tricky steps to do this. Essentially, we're converting machine-friendly text into human-friendly text (i.e. manipulating strings). We got some rules to follow aka naming conventions to get this to work properly.
The sub folders by default will be in alphabetical order. Numbering the sub folders will make them appear in a particular order i.e. 01_Artwork, O2_Promos, 03_Motion_Graphics. However, we usually don't want to display these ordering numbers in the interface. In the player.php configuration settings, we can tell the script to ignore the first n characters (the default is 3). The folders will be then listed as Artwork, Promos, Motion Graphics. If you want to use a different naming scheme you can change the numbers of characters to remove. See $dir_offset_start under filename variables in the player config file.
The script compares the file names of each video to see if they are different versions of the same video i.e. artwork_1-hd.mp4 and artwork_1-sd.mp4. It then removes the last n characters (the default is 3) i.e. -hd and -sd and compares the remaining name i.e. artwork_1 to make sure it's the same.
If you want to use a different naming scheme you can change the number of characters to remove. Look for $file_offset_end variable—under filename variables in the player config file—this should be a negative number. You can also control the order of the videos, in the same way as with folder names, by numbering them and using the $file_offset_start variable—also under filename variables—to remove n characters (this should be a positive number).
The $video_sources array (under video sources in the player config) tells the script what codec the video is encoded with. If the site is responsive it tells what the dimensions of the video are. These values are the ones from the encoding script.
$video_sources = array();
$video_sources[] = array('filename_stem' => '-hd', 'codec' =>'avc1.64001E, mp4a.40.2', 'media' =>'');
[…]
Responsive example:
$video_sources = array();
$video_sources[] = array('filename_stem' => '-hd', 'codec' =>'avc1.64001E, mp4a.40.2', 'media' =>'all and (min-width: 1280px)');
[…]
Note: If you have changed the video file naming scheme be sure to change the filename_stem here too.
In the names.txt you can escape or substitute characters. As it's can be problematic to have spaces in filenames underscores _ are convert to HTML non-breaking spaces . The pipe | acts as a divider between what to look for and what to replace it with. You can use regular expressions on the first half if you wish.
/_/|
You can add in other characters here to. You can use this for abbreviations in filenames or folder name.
/Big_Bunny/|Big Buck Bunny
You can change the name of the names.txt to whatever you like by changing the $names_file variable (under Prettify Names and Add Playlist Descriptions in the player config).
Adding description to the playlist is very similar to adding file and folder names. The descriptions.txt is used to add descriptions in the playlist. For the playlist descriptions to show up $playlist and $playlist_descriptions must be set to true. As the filenames have already been processed be sure to use the escaped version from the names.txt i.e. Big Buck Bunny not big_buck_bunny.
You can also change the name of the descriptions.txt to whatever you like by changing the $playlist_descriptions_file variable (under Prettify Names and Add Playlist Descriptions in the player config).
In player.php you have a long list of configuration options. They are broken down into sections that control different elements on the page.
$dir = 'video';
$playerurl = 'player.php';
$root_dir = '';
Note: Which folder contains the videos. If you want to rename player.php to something else i.e. videos.php be sure to update the $playerurl here.
If your player is in a subdirectory add the correct relative path to root dir where the css, php, and javascript files are i.e. If you need to go up one level then $root_dir = '../';
$websitename = 'Video Portfolio';
$stylesheet = $root_dir . 'css/global.css';
$responsive = true;
$mediaelementplayer = true;
- Set the name of the website
- Set the location of the stylesheet.
- Choose whether or not to be a responsive site.
- Choose whether to use
mediaelementjsto style the look of html 5 and flash player.
$dropdown = true;
$prev_next = false;
$prev_text = '<span class="hidden">Previous</span>';
$next_text = '<span class="hidden">Next</span>';
$playlist = true;
$playlist_descriptions = true;
$w = 1280;
$h = 720;
The standard dimensions of the player. This is not used if $responsive is set to true.
Sets the HTML 5 video tag and it's attributes (full list of video tag attributes). Set whether or not you have a flash fallback.
$html5_video = true;
$poster_image = true;
$video_tag_attributes = 'controls autoplay';
$flash_fallback = true;
$header = true;
$h1 = true;
$h2 = true;
$heading2 = '<a href="'. $root_dir . $playerurl .'" title="Home" rel="home">Video Portfolio</a>';
$footer = true;
$footer_text = '<a href="https://github.com/alienresident/Video-Portfolio">Video Portfolio</a> (Github)';
$names_file = $root_dir . 'names.txt';
$playlist_descriptions_file = $root_dir . 'descriptions.txt';
Detailed description of these files and how they work see the section Escaping or Substituting Characters in File and Folder Names above.
$offline = false; // for development only: use a local copy of jQuery rather than the Google CDN
If your developing locally with no internet connection set this to true otherwise you can ignore this.
$dir_offset_start = 3; // remove the first 'n' characters from the directory name i.e. 3 = '01_' from O1_Artwork
$file_offset_start = 0; // remove the first 'n' characters from the filename
$file_offset_end = -3; // remove the last 'n' characters before file extension i.e. -3 will remove '-sd' from filename-sd.mp4
$body_classes = "player";
Note: the playlist adds to $body_classes so you can style things if you have a playlist on the page.
$video_sources = array();
$video_sources[] = array('filename_stem' => '-hd', 'codec' =>'avc1.64001E, mp4a.40.2', 'media' =>'all and (min-width: 855px)');
$video_sources[] = array('filename_stem' => '-sd', 'codec' =>'avc1.64001E, mp4a.40.2', 'media' =>'all and (min-width: 513px and max-width: 854px)');
$video_sources[] = array('filename_stem' => '-sm', 'codec' =>'avc1.42E01E, mp4a.40.2', 'media' =>'all and (max-width: 512px)');
$video_sources[] = array('filename_stem' => '-wb', 'codec' =>'vp8, vorbis', 'media' =>'');
What codecs and media queries are to be used with certain filenames:
-sdvideo filename ends with a 3 character abbreviation (Standard Definition)avc1.64001E, mp4a.40.2is h264 video using the high profile with AAC audioall and (min-width: 513px and max-width: 854px)a media query that specifies a max-width and/or a min-width
Note: media queries should only be used if $responsive = true.
$flash_fallback_source = '-hd';
Which h264 file to use a flash fallback.