Support for iOS devices [#977146]

When supporting iPhone3/4 and iPad you typically need to use a QuickTime reference movie. This means you need support for the .mov file.

Currently, the template file videojs.tpl.php does not account for this. I just got this working and I'm posting my modified tpl file as well as a screen shot of the order in which you need your filefield uploads.

The order is important because mp4 needs to come first for iPad and iPhone 4 higher resolution support. In order to get an iPhone 3 to play a movie you must be within the specs and use a reference movie to make things work.

Comment	File	Size	Author
#1	videojs-filefields-ios.png	56.91 KB	mattman

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

mattman CreditAttribution: mattman commented 20 November 2010 at 00:38

File	Size
videojs-filefields-ios.png	56.91 KB

<?php
// $Id: videojs.tpl.php,v 1.1.2.2 2010/10/31 09:09:40 heshanmw Exp $

/**
 * Provide the HTML output of the videojs audio player.
 */
?>
 <!-- Begin VideoJS -->
  <div class="video-js-box" id="<?php print $player_id; ?>">
    <!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
    <video id="<?php print $player_id; ?>" class="video-js" width="<?php print(variable_get('videojs_width', 640))?>" height="<?php print(variable_get('videojs_height', 264))?>" controls="controls" preload="auto" poster="">
      <?php //dd($items); ?>
      <?php static $videojs_sources; ?>
      <?php $codecs = array('video/mp4' => 'avc1.42E01E, mp4a.40.2', 'video/webm' =>  'vp8, vorbis', 'video/ogg' => 'theora, vorbis', 'video/quicktime' => 'avc1.42E01E, mp4a.40.2' ); ?>
      <?php foreach ($items as $item):?>
        <?php $filepath = file_create_url($item['filepath']); ?>
        <?php $mimetype = $item['filemime']; ?>
        <?php if (array_key_exists($mimetype, $codecs)):?>
          <?php $mimetype = ($mimetype == 'video/quicktime') ? 'video/mp4' : $mimetype; ?>
          <?php $videojs_sources .= "<source src=\"$filepath\" type='$mimetype; codecs=\"" . $codecs[$mimetype] . "\"' />"; ?>
        <?php endif; ?>
      <?php endforeach; ?>
      <?php print $videojs_sources; ?>
      <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
      <!-- @TODO: Add Flowplayer on SWFTools or Flowplayer API modules -->
    </video>
  </div>
  <!-- End VideoJS -->

That's the template code you'll need to use (it's a bit of a hack right now - hopefully the maintainer will update the module to support these features) Note: it accounts for the mimetype of video/quicktime but it sets the source type attribute to mp4.

The image of my filefields is attached.

Comment #2

batourine_m CreditAttribution: batourine_m commented 30 November 2010 at 17:48

I checked my ipad with mp4 files - plays perfectly... I would suspect video/quicktime is not required to be compatible with iOS, mp4 should be enough...