View source for Video documents

[[Category:Howto]]

This page is in development and will eventually contain information about supporting Video and Audio documents in EPrints. 

==Related Pages==
*https://wiki.eprints.org/w/How_to_customise_thumbnails
*https://wiki.eprints.org/w/API:EPrints/Plugin/Convert/Thumbnails
*https://wiki.eprints.org/w/API:bin/epadmin#redo_mime_type
*https://wiki.eprints.org/w/API:bin/epadmin#redo_thumbnails
*http://bazaar.eprints.org/454/ (YouTube Importer)
*http://files.eprints.org/773/ (Kultur)

==Video Transcoding by EPrints/FFMPEG==
Summary of video codec support on browsers: http://videojs.com/html5-video-support/
By default, EPrints performs the following tasks when generating "thumbnails" for videos, using FFMPEG:
*generate an image thumbnail 
*transcode video to ogg container 
*transcode video to mp4 container

==Video Document Integration==
Should the video player be integrated as an iframe embed code, document "preview" link, or embedded directly on the abstract page?  Most recent version of EdShare generates a video player directly on the abstract page, rather than a popup "preview" window as in Kultur plugin.  It is also possible to embed a video player (typically with an iframe) to stream content from another site, like YouTube and Vimeo.

==Video Players==
Depositors can upload video documents.  Since EPrints 3.3, there is a flowplayer in EPrints, under /lib/static/.  However, EPrints does not embed any video player as a "preview" thumbnail or on the abstract page.  To generate a video player for a document in EPrints, the Kultur plugin (http://files.eprints.org/773/) can be used to extend the preview with a video player.

===Video.js Integration===
One solution is to integrate video.js with EPrints.
Following these instructions: http://videojs.com/getting-started/
Integration involves adding the following to the <head> of the template (globally, in /archives/ARCHIVEID/cfg/lang/LANGID/templates/default.xml)

<source lang="html5">
<link href="http://vjs.zencdn.net/5.11.7/video-js.css" rel="stylesheet"/>
<!-- If you'd like to support IE8 -->
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</source>

and the following right before the last closing </body> tag:

<source lang="html5">
<script src="http://vjs.zencdn.net/5.11.7/video.js"></script>
</source>

====Video player====

Generating the video player can be done in eprint_render.pl, as follows:

<source lang="perl">
#TN - render a video player for video documents
my $type = "";
my $videoDiv = $session->make_element( "div" );
$type = $doc->get_type;		
if ($type eq "video"){
	my $video_preview_image = $doc->thumbnail_url("preview");
	my $videomimetype_1="video/mp4";
	my $video_preview_1 = $doc->thumbnail_url("video_mp4");
	my $videomimetype_2="video/ogg";
	my $video_preview_2 = $doc->thumbnail_url("video_ogg");

	if ($video_preview_1 || $video_preview_2){
   		my $videoDivID = "my-video".$doc->get_id;
		my $videoplayer = $session->make_element( "video", id=>$videoDivID, class=>"video-js", controls=>"", preload=>"auto", poster=>$video_preview_image, 'data-setup'=>"{}" );
		if ($video_preview_1){
			my $source_1 = $session->make_element ("source", src=>$video_preview_1, type=>$videomimetype_1);
			$videoplayer->appendChild( $source_1 );
			}
		if ($video_preview_2){
			my $source_2 = $session->make_element ("source", src=>$video_preview_2, type=>$videomimetype_2);
			$videoplayer->appendChild( $source_2 );
			}
		my $nojsP = $session->make_element ("p", class=>"vjs-no-js");
		my $nojstext = "To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video";
		$nojsP->appendChild( $session->make_text( $nojstext) );
		$videoplayer->appendChild( $nojsP );
		$videoDiv->appendChild($videoplayer);
	}		
}
#$videoDiv now holds the video player, and can be added to the page with appendChild($videoDiv)
</source>

====Audio player====

Similarly, video-js can be used to render audio player using video-js.  Note that audio does not have an image preview, so you can use a default blank image, for example:

<source lang="perl">
#TN - render an audio player for audio documents
my $type = "";
my $audioDiv = $session->make_element( "div" );
$type = $doc->get_type;		
if ($type eq "audio"){
	my $audiomimetype_1="audio/mp4";
	my $audio_preview_1 = $doc->thumbnail_url("audio_mp4");
	my $audiomimetype_2="audio/ogg";
	my $audio_preview_2 = $doc->thumbnail_url("audio_ogg");
        my $audio_preview_image = "/images/default-audio-poster.png";
 
	if ($audio_preview_1 || $audio_preview_2){
   		my $audioDivID = "my-audio".$doc->get_id;
		my $audioplayer = $session->make_element( "audio", id=>$audioDivID, class=>"video-js", controls=>"", preload=>"auto", poster=>$audio_preview_image, 'data-setup'=>"{}" );
		if ($audio_preview_1){
			my $source_1 = $session->make_element ("source", src=>$audio_preview_1, type=>$audiomimetype_1);
			$audioplayer->appendChild( $source_1 );
			}
		if ($audio_preview_2){
			my $source_2 = $session->make_element ("source", src=>$audio_preview_2, type=>$audiomimetype_2);
			$audioplayer->appendChild( $source_2 );
			}
		my $nojsP = $session->make_element ("p", class=>"vjs-no-js");
		my $nojstext = "To view this audio please enable JavaScript, and consider upgrading to a web browser that supports HTML5 audio";
		$nojsP->appendChild( $session->make_text( $nojstext) );
		$audioplayer->appendChild( $nojsP );
		$audioDiv->appendChild($audioplayer);
	}		
}
#$audioDiv now holds the audio player, and can be added to the page with appendChild($audioDiv)
</source>

==Server Settings==
The following file should contain a path to ffmpeg and ffprobe:

    /opt/eprints3/lib/syscfg.d/executables.pl

ffmpeg should be installed on the server.
On some servers (Ubuntu), 'libx264' needs to be installed for the H264 codec.