Skip to content

How to add videos

Jump to bottom Edit New page
xbgmsharp edited this page Aug 7, 2018 · 52 revisions

How to add videos

Step 1 Configure

First let's configure PWG.

Use the LocalFiles Editor Plugin 'Administration' -> ' Plugins ' -> 'LocalFiles Editor'

Add video support

You need to allow video file, use the LocalFiles Editor Plugin and added this lines to it:

$conf['upload_form_all_types'] = true;

To allow special characters in your video filename, use the LocalFiles Editor Plugin and added this lines to it:

$conf['sync_chars_regex'] = '/^[a-zA-Z0-9-_. ]+$/';

Add video metadata support

You might want to display the metadata information of the video, use the LocalFiles Editor Plugin and added those lines to it:

$conf['show_exif'] = true;
$conf['show_exif_fields'] = array(
  'Make',
  'Model',
  'ExifVersion',
  'Software',
  'DateTimeOriginal',
  'FNumber',
  'ExposureBiasValue',
  'FILE;FileSize',
  'ExposureTime',
  'Flash',
  'ISOSpeedRatings',
  'FocalLength',
  'FocalLengthIn35mmFilm',
  'WhiteBalance',
  'ExposureMode',
  'MeteringMode',
  'ExposureProgram',
  'LightSource',
  'Contrast',
  'Saturation',
  'Sharpness',
  'bitrate',
  'channel',
  'date_creation',
  'display_aspect_ratio',
  'duration',
  'filesize',
  'format',
  'formatprofile',
  'codecid',
  'frame_rate',
  'latitude',
  'longitude',
  'make',
  'model',
  'playtime_seconds',
  'sampling_rate',
  'type',
  'resolution',
  'rotation',
  );

The upper case EXIF metadata items are photos related and the lower case (starting at bitrate) one are video related metadata.

This sample display all available metadata. You can removed any of those if don't want to expose them.

Custom binary path

We try to gather metadata for a video we use ffprobe or Exiftool or MediaInfo. If "mediainfo" is not visible by the web user, you can define the full path of the directory where "mediainfo" executable is. Custom binary path now need to set manually into the local config file local/config/config.inc.php.

$conf['vjs_mediainfo_dir'] = '';
$conf['vjs_exiftool_dir'] = '';
$conf['vjs_ffprobe_dir'] = '';
$conf['ffmpeg_dir'] = '';

Step 2 Install

Now, do you have root access to your system?

If yes, you can install the external tools to use the synchronize page in automatic mode. You don't need those external tools to play the video. Those software are used to generate the poster (via ffmpeg) and the thumbnails (via ffmpeg) as well as metadata parsing (via MediaInfo).

Yes I'm root

External tools

MediaInfo and FFmpeg/Avcon are external program of PWG and of the plugin.

You don't need those external tools to play the video.

FFmpeg can be install using the official distribution repository. For linux system, you can safely replace FFmpeg by Avconv, please refer to this forum post for more details. MediaInfo can be install using the official distribution repository. Some official distribution repository like Debian or RedHat may out of date (too old). It is prefer to install from the MediaInfo official website.

Be sure to download the correct version according to your distribution and your architecture.

Do not use MediaInfo v0.7.72 due to important XML output is broken, Use a lower or higher version eg: v0.7.71 or v0.7.73.

Do not use MediaInfo v0.7.83 to v0.7.86 due to XML output change, Use a lower or higher version eg: v0.7.79 or v0.7.87.

If you are using Debian/Ubuntu like distribution:

In this sample I used Debian 7 (Wheezy) x64 (amd64).

 # apt-get install ffmpeg
 # wget http://mediaarea.net/download/binary/mediainfo/0.7.74/mediainfo_0.7.74-1_amd64.Debian_7.0.deb
 # wget http://mediaarea.net/download/binary/libmediainfo0/0.7.74/libmediainfo0_0.7.74-1_amd64.Debian_7.0.deb
 # wget http://mediaarea.net/download/binary/libzen0/0.4.31/libzen0_0.4.31-1_amd64.Debian_7.0.deb
 # dpkg -i libzen0_0.4.31-1_amd64.Debian_7.0.deb libmediainfo0_0.7.74-1_amd64.Debian_7.0.deb  mediainfo_0.7.74-1_amd64.Debian_7.0.deb

In this sample I used Debian 8 (Jessie) x64 (amd64).

 # apt-get install libav-tools mediainfo
If you are using RedHat/CentOS/Fedora like distribution:

In this sample I used RedHat 7 x64 (amd64).

 # yum install ffmpeg mediainfo
 # wget http://mediaarea.net/download/binary/mediainfo/0.7.74/mediainfo-0.7.74-1.x86_64.RHEL_7.rpm
 # wget http://mediaarea.net/download/binary/libmediainfo0/0.7.74/libmediainfo0-0.7.74-1.x86_64.RHEL_7.rpm
 # wget http://mediaarea.net/download/binary/libzen0/0.4.31/libzen0-0.4.31-1.x86_64.RHEL_7.rpm
 # rpm -hiv libzen0-0.4.31-1.x86_64.RHEL_7.rpm libmediainfo0-0.7.74-1.x86_64.RHEL_7.rpm mediainfo-0.7.73-1.x86_64.RHEL_7.rpm
Windows

http://builds.libav.org/windows/release-gpl/

For MediaInfo only the CLI is needed.

If you are using Windows x64: # https://mediaarea.net/en/MediaInfo/Download/Windows

 # http://mediaarea.net/download/binary/mediainfo/0.7.74/MediaInfo_CLI_0.7.74_Windows_x64.zip

If you are using Windows i386/x32: # https://mediaarea.net/en/MediaInfo/Download/Windows

 # http://mediaarea.net/download/binary/mediainfo/0.7.74/MediaInfo_CLI_0.7.74_Windows_i386.zip

If MediaInfo and FFmpeg are not in the environment path. We try to gather metadata for a video we use ffprobe or Exiftool or MediaInfo. If "mediainfo" is not visible by the web user, you can define the full path of the directory where "mediainfo" executable is. Custom binary path now need to set manually into the local config file local/config/config.inc.php.

$conf['vjs_mediainfo_dir'] = '';
$conf['vjs_exiftool_dir'] = '';
$conf['vjs_ffprobe_dir'] = '';
$conf['ffmpeg_dir'] = '';

Depending on the input/output format used FFmpeg might required additional library please refer to the wiki documentation.

To support all video format conversion, you can run this command, on Debian 7 (Wheezy):

 # apt-get install libfaad2 libx264-123 libvorbis0a libvorbisenc2 libvorbisfile3 libvpx1 libxvidcore4

To support all video format conversion, you can run this command, on Debian 8 (Jessie):

 # apt-get install libav-tools mediainfo libfaad2 libx264-142 libvorbis0a libvorbisenc2 libvorbisfile3 libvpx1 libxvidcore4
Automatic add video and poster

Follow the usage and your done.

No I'm NOT root

If you are hosting your PIWIGO install without root access then read how to Using MediaInfo, ffmpeg without installing it inside the hosting system.

Some Hosting company might prevent the use of external program call from PHP. This plugin use the PHP system() and shell_exec() call.

In this case you have to do the process manually. It is not complex and can be automatize easily. The command use can be found in the wiki.

Manually add video and poster

If you don't have MediaInfo or FFmpeg install, you can use virtual album or normal album. You need to create the folder pwg_representative in the video folder.

  • Create a new album (MyVideoClip) via the admin panel or directly in your galleries directory.
  • Upload your video into the new album (eg: galleries/MyVideoClip/video1.mp4).
    • You can use the PWG upload feature or use FTP/SSH.
  • Create a directory in your new album call pwg_representative
  • Upload the poster image into the pwg_representative directory (eg: galleries/MyVideoClip/pwg_representative/video1.jpg).
  • Synchronize as usual using only the Piwigo sync, 'Administration' -> 'Tools' -> 'Synchronization'

Step 3 troubleshoot

Requirement

  • The video clip must be a support format (mp4, ogg, webm or MP4, OGG, WEBM)
  • The video clip must contain no space neither special character (unless you have configure it).
  • Multiple video source must be in the subdirectory of the album in 'pwg_representative'.
  • Multiple video source must have the same name (filename wo extension) of the video.
  • The poster must have the same size (width and height) of the video.
  • The poster must have the same name (filename wo extension) of the video.
  • The poster must be in the subdirectory of the album in 'pwg_representative'.
  • The poster must be a valid .jpg or .png file.
  • The Subtitles (WEBVTT) must be a valid .vtt file.

Sample layout in Piwigo:

galleries
└── Videos
    ├── video1.mp4
    ├── video2.ogv
    ├── video3.webm
    └── pwg_representative
        ├── video1.jpg         -- Poster of Video1
        ├── video1.webm        -- Multiple source of Video1
        ├── video2.png         -- Poster of Video2
        ├── video2.mp4         -- Multiple source of Video2
        ├── video3.png         -- Poster of Video3
        └── video3.vtt         -- WEBVTT of Video3

Issue content you know

If you have trouble playing back content you know, ensure it is in the correct format.

Check if your browser supports HTML5 video.

The main differences between devices is the supported resolution and H.264 profile. The higher profiles (Main and High) will result in better quality at a certain file size, but they’re harder to decode, meaning older devices can’t support them. Baseline is the most basic, but it’s supported by the most devices.

At the very least, you will need a .mp4 file with H.264 + AAC (or MP3). H.264 is supported natively by the most browsers, and can be played using a flash fallback in browsers where it isn’t. The H.264 High Profile produces the highest quality, but Baseline has the most support, particularly among mobile devices (more on this later). AAC passthrough is not supported yet.

This video format details is play by all browser natively in HTML5:

Format                                   : MPEG-4
Format profile                           : Base Media
Video Format/Info                        : Advanced Video Codec
Video Format profile                     : High@L3.1

You might consider converting your video, if not in the correct video format profile.

I personally use HandBrake as it allow converting video from nearly any format to a selection of modern, widely supported codecs.

A sample HandBrakeCLI command to transcode in a supported video format profile.

# HandBrakeCLI --optimize --encoder x264 --x264-profile high -i <input_video_file> -o <output_video_file>

Another sample command to transcode from iPhone in a supported video format profile.

# ffmpeg -i iphone.mov -threads 4 -c:v libx264 -preset slow -profile:v high -c:a libfdk_aac -vf scale=-1:720 newmovie.mp4
# exiftool −overwrite_original_in_place -r -tagsFromFile iphone.mov "-gps:*" newmovie.mp4
# mp4file --optimize newmovie.mp4

Issue playing MP4

If your MP4 video isn't played by the plugin and the player remained black. In fact, Firefox + VideoJS was prefetching all my video file to get the index which was at the end. To make the player starts the video immediately, you need to generate an optimize MP4 file with the index start at the beginning of the video file.

On Linux Debian/Ubuntu, mp4file is provided by mp4v2-utils package (I don't know if there is the same tool for Windows). And the command is:

mp4file --optimize <video.mp4>

Issue WebServer

Your HTTP server might not be delivering the content with the correct MIME type. Please double check your content's headers

MIME type

Ensure your webserver is returning the correct MIME type, you can test using the following command or using the Web Console in Firefox.

$ wget -Sv -O /dev/null http://localhost/piwigo/galleries/videos/video1.ogv
--2013-07-01 11:13:17--  http://localhost/piwigo/galleries/videos/video1.ogv
Resolving localhost (localhost)... 127.0.0.1
Connecting to localhost (localhost)|127.0.0.1|:80... connected.
HTTP request sent, awaiting response...
HTTP/1.1 200 OK
...
Content-Type: video/ogg
Length: 438268 (428K) [video/ogg]
Saving to: ‘/dev/null’

Firefox will NOT play some video (Ogg and Webm) if the mime-type is wrong.

Place these lines in your .htaccess file (in Piwigo root directory) to send the correct mime-types to the browsers

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Gzip

Some web hosts, in trying to save bandwidth, gzip everything by default—including video files!

In Firefox and Opera, seeking will not be possible or the video may not play at all if a video file is gzipped.

If this is occurring to you please check your server / hosts and disable the gzipping of your media files.

You can switch off gzipping for video files in your .htaccess file by adding this line:

SetEnvIfNoCase Request_URI \.(og[gv]|mp4|m4v|webm)$ no-gzip dont-vary
Add a custom footer
Clone this wiki locally