Video documents: Difference between revisions
| (18 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 10: | Line 10: | ||
*http://bazaar.eprints.org/454/ (YouTube Importer) | *http://bazaar.eprints.org/454/ (YouTube Importer) | ||
*http://files.eprints.org/773/ (Kultur) | *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 | 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 20: | 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. | |||
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[edit]
- 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[edit]
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[edit]
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[edit]
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[edit]
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[edit]
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[edit]
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[edit]
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.