Difference between revisions of "Video documents"

From EPrints Documentation
Jump to: navigation, search
(→‎Video Document Integration)
(→‎Audio player Integration)
 
(23 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
[[Category:Howto]]
 
[[Category:Howto]]
  
−
This page is in development and will eventually contain information about supporting Video documents in EPrints.  
+
This page is in development and will eventually contain information about supporting Video and Audio documents in EPrints.  
  
 
==Related Pages==
 
==Related Pages==
Line 8: Line 8:
 
*https://wiki.eprints.org/w/API:bin/epadmin#redo_mime_type
 
*https://wiki.eprints.org/w/API:bin/epadmin#redo_mime_type
 
*https://wiki.eprints.org/w/API:bin/epadmin#redo_thumbnails
 
*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==
 
==Video Players==
−
Depositors can upload video documents.  Since EPrints 3.3, there is a lightbox/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.
+
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==
 
==Server Settings==
Line 18: Line 121:
  
 
ffmpeg should be installed on the server.
 
ffmpeg should be installed on the server.
−
 
+
On some servers (Ubuntu), 'libx264' needs to be installed for the H264 codec.
−
==Video Codecs==
 
−
Are there particular codecs/containers required for the streaming/seeking to work (H264 in MP4 container)?
 
−
EPrints performs the following tasks when generating "thumbnails" for videos:
 
−
*generate an image thumbnail
 
−
*transcode video to ogg container
 
−
 
 
−
==Video Document Integration==
 
−
Should the video player be integrated as an iframe embed code, document "preview" or as a part of the eprint_render?  Most recent version of EdShare generates a video player directly on the abstract page, rather than a document "preview".  It is also possible to embed a video player to stream content from another site, like YouTube and Vimeo.
 

Latest revision as of 15:19, 1 December 2016


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

Related Pages

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) 

<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>

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

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

Video player

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

#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)

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: 

#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)

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.

Retrieved from ‘https://wiki.eprints.org/w/index.php?title=Video_documents&oldid=12243’