Skip to content
xbgmsharp edited this page Oct 9, 2014 · 76 revisions

piwigo-videojs

This place is mean to store the documentation of the plugin piwigo-videojs.

Feel free to edit it, any contributions are appreciated.

piwigo-videojs main goal is to provide an easy way to play video recorded on smart-phone.

To do so piwigo-videojs has 2 main function:

  • Add the open source HTML5 video player VideoJS for the web gallery Piwigo.
  • Synchronization of metadata information and poster creation for videos.

Requirement

  • The video clip must be a support format (mp4, ogg, webm or MP4, OGG, WEBM) and must contain no space neither special character.
  • The poster must have the same size (width and height) of the video.
  • The poster must be in the subdirectory of the album in 'pwg_representative'.
  • Multiple source must be in the subdirectory of the album in 'pwg_representative'.
  • The poster can be a '.jpg' or '.png' 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

External tools

MediaInfo and FFmpeg are require external program of PWG or the plugin. You don't need those external tools to play the video as those software are use to generate the thumbnail and poster as well as metadata parsing.

If you are using Debian/Ubuntu:

 # apt-get install ffmpeg mediainfo
 # wget http://mediaarea.net/download/binary/libmediainfo0/0.7.70/libmediainfo0_0.7.70-1_amd64.Debian_7.0.deb
 # wget http://mediaarea.net/download/binary/mediainfo/0.7.70/mediainfo_0.7.70-1_amd64.Debian_7.0.deb
 # dpkg -i libmediainfo0_0.7.70-1_amd64.Debian_7.0.deb  mediainfo_0.7.70-1_amd64.Debian_7.0.deb

If you are using RedHat/CentOS/Fedora:

 # yum install ffmpeg mediainfo
 # wget http://mediaarea.net/download/binary/mediainfo/0.7.70/mediainfo-0.7.70-1.x86_64.RHEL_7.rpm
 # wget http://mediaarea.net/download/binary/libmediainfo0/0.7.70/libmediainfo0-0.7.70-1.x86_64.RHEL_7.rpm
 # rpm -hiv libmediainfo0-0.7.70-1.x86_64.RHEL_7.rpm mediainfo-0.7.70-1.x86_64.RHEL_7.rpm 

Admin Menu

Synchronize Details the admin Synchronize menu

Configuration Details the admin Configuration menu

Batch Manager

The plugin support the 'Batch Manager' feature from piwigo.

It works in 'global mode' as well as 'single mode'.

Photo Edit

The plugin support the 'Photo Edit' feature from Piwigo. It show all (useful) metadata of the video as well as poster video source and thumbnail related to Piwigo integration. Sample VideoJS photo edit

Add video

Manualy add video and poster

  • 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, 'Administration' -> 'Tools' -> 'Synchronization'

Automatic mode use the Synchronize tab

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

Mobile device video

Mobile video are encode in h.264, at least for iOS and Android.

iOS video

iOS generate video with file extension '.mov' but if you rename to '.mp4', it just works. No transcoding is need.

By default video include GPS metadata and rotation metadata.

Android video

The file are in '.mp4' by default. No transcoding is need.

Video never include the GPS metadata but does include rotation metadata.

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>

Independent note from the plugin or Piwigo

Ensure your webserver is returning the correct mime-types. 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 browsers

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

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 Ogg and other 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

VideoJS Documentation

Please check VideoJS Documentation for additional customizing information.

Translation

You can help by translating the plugin in your language. It is available via the translate tool from Piwigo

Support

To get support, please create new issue

Help me improve the plugin, rate my plugin, and if possible please send a greeting message to me ;)