Integrate MediaElement player, refs #12902

This commit replaces the flowplayer library with mediaelement for
playing video and audio digital objects.

It also updates the digital object code to create MPEG4 / H.264
reference derivatives instead of flash video (flv) derivatives.

COPYRIGHT

@@ -59,11 +59,11 @@ Url:       http://drupal.org/
 Copyright: Original authors - see http://association.drupal.org/about/copyright
 License:   GPL version 2 - see LICENSE.txt file
 
-Flowplayer
-----------
-Url:       http://flowplayer.org/
-Copyright: Copyright (c) 2012 Flowplayer Ltd
-License:   GPL version 3
+MediaElement.js
+---------------
+Url:       http://mediaelementjs.com/
+Copyright: Copyright (c) 2018 MediaElement
+License:   MIT
 
 FluentDOM
 ---------

apps/qubit/modules/digitalobject/actions/showAudioComponent.class.php

@@ -43,13 +43,14 @@ public function execute($request)
       $this->representation = $parent->getRepresentationByUsage($this->usageType);
     }
 
-    // Set up display of video in flowplayer
+    // Set up display of video in mediaelement
     if ($this->representation)
     {
       $this->showFlashPlayer = true;
 
-      $this->response->addJavaScript('/vendor/flowplayer/example/flowplayer-3.1.4.min.js');
-      $this->response->addJavaScript('flowplayer');
+      $this->response->addJavaScript('/vendor/mediaelement/mediaelement-and-player.min.js');
+      $this->response->addJavaScript('mediaelement');
+      $this->response->addStyleSheet('/vendor/mediaelement/mediaelementplayer.min.css');
     }
     else
     {

apps/qubit/modules/digitalobject/actions/showVideoComponent.class.php

@@ -43,11 +43,12 @@ public function execute($request)
       $this->representation = $parent->getRepresentationByUsage($this->usageType);
     }
 
-    // Set up display of video in flowplayer
+    // Set up display of video in mediaelement
     if ($this->representation)
     {
-      $this->response->addJavaScript('/vendor/flowplayer/example/flowplayer-3.1.4.min.js');
-      $this->response->addJavaScript('flowplayer');
+      $this->response->addJavaScript('/vendor/mediaelement/mediaelement-and-player.min.js');
+      $this->response->addJavaScript('mediaelement');
+      $this->response->addStyleSheet('/vendor/mediaelement/mediaelementplayer.min.css');
 
       // If this is a reference movie, get the thumbnail representation for the
       // place holder image

apps/qubit/modules/digitalobject/templates/_showAudio.php

@@ -3,7 +3,7 @@
 <?php if (QubitTerm::REFERENCE_ID == $usageType): ?>
 
   <?php if ($showFlashPlayer): ?>
-    <a class="flowplayer audio" href="<?php echo public_path($representation->getFullPath()) ?>"></a>
+    <audio class="mediaelement-player" src="<?php echo public_path($representation->getFullPath()) ?>"></audio>
   <?php else: ?>
     <div style="text-align: center">
       <?php echo image_tag($representation->getFullPath(), array('style' => 'border: #999 1px solid', 'alt' => '')) ?>

apps/qubit/modules/digitalobject/templates/_showVideo.php

@@ -11,7 +11,7 @@
 <?php elseif ($usageType == QubitTerm::REFERENCE_ID): ?>
 
   <?php if ($showFlashPlayer): ?>
-    <a class="flowplayer" href="<?php echo public_path($representation->getFullPath()) ?>"></a>
+    <video class="mediaelement-player" src="<?php echo public_path($representation->getFullPath()) ?>"></video>
   <?php else: ?>
     <div style="text-align: center">
       <?php echo image_tag($representation->getFullPath(), array('style' => 'border: #999 1px solid', 'alt' => __($resource->getDigitalObjectAltText() ?: 'Original %1% not accessible', array('%1%' => sfConfig::get('app_ui_label_digitalobject'))))) ?>

css/main.css

@@ -184,20 +184,6 @@ body,
   position: static;
 }
 
-/* Flowplayer width and height */
-
-.flowplayer
-{
-  display: block;
-  height: 300px;
-  width: 435px;
-}
-
-.audio
-{
-  height: 24px;
-}
-
 /* odd&even divs */
 .odd {
   background-color: #edf5fa;

js/mediaelement.js

@@ -0,0 +1,12 @@
+(function ($)
+  {
+    $(document).ready(function() {
+      $('.mediaelement-player').mediaelementplayer({
+        pluginPath: Qubit.relativeUrlRoot + '/vendor/mediaelement/',
+        renderers: ['html5', 'flash_video'],
+        alwaysShowControls: true,
+        stretching: 'responsive'
+      });
+    });
+  }
+)(jQuery);

lib/model/QubitDigitalObject.php

@@ -2880,9 +2880,9 @@ public function createVideoDerivative($usageId, $connection = null)
     switch ($usageId)
     {
       case QubitTerm::REFERENCE_ID:
-        $derivativeName = $originalNameNoExtension.'_'.$usageId.'.flv';
+        $derivativeName = $originalNameNoExtension.'_'.$usageId.'.mp4';
         $derivativeFullPath = sfConfig::get('sf_web_dir').$this->getPath().$derivativeName;
-        self::convertVideoToFlash($originalFullPath, $derivativeFullPath);
+        self::convertVideoToMp4($originalFullPath, $derivativeFullPath);
         break;
       case QubitTerm::THUMBNAIL_ID:
       default:
@@ -2914,9 +2914,9 @@ public function createVideoDerivative($usageId, $connection = null)
     switch ($usageId)
     {
       case QubitTerm::REFERENCE_ID:
-        $derivativeName = $originalNameNoExtension.'_'.$usageId.'.flv';
+        $derivativeName = $originalNameNoExtension.'_'.$usageId.'.mp4';
         $derivativeFullPath = sfConfig::get('sf_web_dir').$this->getPath().$derivativeName;
-        self::convertVideoToFlash($originalFullPath, $derivativeFullPath);
+        self::convertVideoToMp4($originalFullPath, $derivativeFullPath);
         break;
       case QubitTerm::THUMBNAIL_ID:
       default:
@@ -2958,7 +2958,7 @@ public static function hasFfmpeg()
   }
 
   /**
-   * Create a flash video derivative using the FFmpeg library.
+   * Create a mp4 video derivative using the FFmpeg library.
    *
    * @param string  $originalPath path to original video
    * @param string  $newPath      path to derivative video
@@ -2969,15 +2969,15 @@ public static function hasFfmpeg()
    *
    * @todo implement $maxwidth and $maxheight constraints on video
    */
-  public static function convertVideoToFlash($originalPath, $newPath, $width=null, $height=null)
+  public static function convertVideoToMp4($originalPath, $newPath, $width=null, $height=null)
   {
     // Test for FFmpeg library
     if (!self::hasFfmpeg())
     {
       return false;
     }
 
-    $command = 'ffmpeg -y -i '.$originalPath.' -ar 44100 '.$newPath.' 2>&1';
+    $command = 'ffmpeg -y -i '.$originalPath.' -ar 44100 -c:v libx264 -pix_fmt yuv420p -c:a aac -movflags +faststart '.$newPath.' 2>&1';
     exec($command, $output, $status);
 
     chmod($newPath, 0644);
@@ -2986,7 +2986,7 @@ public static function convertVideoToFlash($originalPath, $newPath, $width=null,
   }
 
   /**
-   * Create a flash video derivative using the FFmpeg library.
+   * Create a video thumbnail using the FFmpeg library.
    *
    * @param string  $originalPath path to original video
    * @param string  $newPath      path to derivative video