[Rich AParticipant]

To follow up…I just added the problematic Intro Video on a portfolio page.

It plays perfectly in all browsers including OS X Firefox where the playback control disappears properly.

The two other pages it’s on (where the playback control does not disappear in OS X Firefox) are the Home page, which is using a “blank, no container” template, as well as the Video Samples page which is using the “default” template.

So that tells me that it’s something to do with the templates. There must be a difference with how the portfolio page template handles things versus the other templates. Might there be some code I could add to the other two templates that would cause them to handle embedded videos the same way as the portfolio page template?

I hope that helps, and apologies for not thinking of trying that earlier.

Thank you again for your continued support!

[Rich AParticipant]

This reply has been marked as private.

[Rich AParticipant]

This reply has been marked as private.

[RadModerator]

This reply has been marked as private.

[Rich AParticipant]

This reply has been marked as private.

[MrinalMember]

This reply has been marked as private.

[Rich AParticipant]

This reply has been marked as private.

[Rich AParticipant]

This reply has been marked as private.

[RadModerator]

Hi Rich,

Thanks for the files. Tested it in my installation and working fine. In fact, faster at new install with no any error.

That’s weird, not sure what to do with your setup.

(BTW, I’m using both multi-site and single site as my setup)

Thanks!

[Rich AParticipant]

This reply has been marked as private.

[RadModerator]

Hi Rich,

Yes the controls normally disappear. The one responsible for this was from the same code :

// Featured Video
// =============================================================================

if ( ! function_exists( 'x_featured_video' ) ) :
  function x_featured_video( $post_type = 'video' ) {

    $entry_id     = get_the_ID();
    $stack        = x_get_stack();
    $aspect_ratio = get_post_meta( $entry_id, '_x_' . $post_type . '_aspect_ratio', true );
    $m4v          = get_post_meta( $entry_id, '_x_' . $post_type . '_m4v', true );
    $ogv          = get_post_meta( $entry_id, '_x_' . $post_type . '_ogv', true );
    $embed        = get_post_meta( $entry_id, '_x_' . $post_type . '_embed', true );
    $fullwidth    = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;

    if ( $fullwidth ) {
      $poster = wp_get_attachment_image_src( get_post_thumbnail_id( $entry_id ), 'entry-' . $stack . '-fullwidth', false );
    } else {
      $poster = wp_get_attachment_image_src( get_post_thumbnail_id( $entry_id ), 'entry-' . $stack, false );
    }

    switch ( $aspect_ratio ) {
      case '16:9' :
        $aspect_ratio_class = '';
        break;
      case '5:3' :
        $aspect_ratio_class = 'five-by-three';
        break;
      case '5:4' :
        $aspect_ratio_class = 'five-by-four';
        break;
      case '4:3' :
        $aspect_ratio_class = 'four-by-three';
        break;
      case '3:2' :
        $aspect_ratio_class = 'three-by-two';
        break;
    }

    if ( $embed != '' ) {

    ?>

      <div class="x-responsive-video man">
        <div class="x-responsive-video-inner <?php echo $aspect_ratio_class; ?>">
          <?php echo stripslashes( htmlspecialchars_decode( $embed ) ); ?>
        </div>
      </div>

    <?php } else { ?>

      <script>
        jQuery(document).ready(function($){
          if($().jPlayer) {
            $('#x_jplayer_<?php echo $entry_id; ?>').jPlayer({
              ready: function () {
                $(this).jPlayer('setMedia', {
                  <?php if ( $m4v != '' ) : ?>
                  m4v: '<?php echo $m4v; ?>',
                  <?php endif; ?>
                  <?php if ( $ogv != '' ) : ?>
                  ogv: '<?php echo $ogv; ?>',
                  <?php endif; ?>
                  <?php if ( $poster != '' ) : ?>
                  poster: '<?php echo $poster[0]; ?>'
                  <?php endif; ?>
                });
              },
              size: {
                width: '100%',
                height: '100%'
              },
              swfPath: '<?php echo get_template_directory_uri(); ?>/framework/js/src/site/vendor/jplayer',
              cssSelectorAncestor: '#jp_interface_<?php echo $entry_id; ?>',
              supplied: '<?php if( $m4v != "" ) : ?>m4v, <?php endif; ?><?php if( $ogv != "" ) : ?>ogv<?php endif; ?>'
            });
            
            $('#x_jplayer_<?php echo $entry_id; ?>').bind($.jPlayer.event.playing, function(event) {
              $(this).add('#jp_interface_<?php echo $entry_id; ?>').hover( function() {
                $('#jp_interface_<?php echo $entry_id; ?>').stop().animate({ opacity: 1 }, 400);
              }, function() {
                $('#jp_interface_<?php echo $entry_id; ?>').stop().animate({ opacity: 0 }, 400);
              });
            });
            
            $('#x_jplayer_<?php echo $entry_id; ?>').bind($.jPlayer.event.pause, function(event) {
              $('#x_jplayer_<?php echo $entry_id; ?>').add('#jp_interface_<?php echo $entry_id; ?>').unbind('hover');
              $('#jp_interface_<?php echo $entry_id; ?>').stop().animate({ opacity: 1 }, 400);
            });
          }
        });
      </script>

      <div class="x-responsive-video man">
        <div class="x-responsive-video-inner <?php echo $aspect_ratio_class; ?>">
          <div id="x_jplayer_<?php echo $entry_id; ?>" class="jp-jplayer jp-jplayer-video"></div>
          <div class="jp-controls-container jp-controls-container-video">
            <div id="jp_interface_<?php echo $entry_id; ?>" class="jp-interface">
              <ul class="jp-controls">
                <li><a href="#" class="jp-play" tabindex="1"><span>Play</span></a></li>
                <li><a href="#" class="jp-pause" tabindex="1"><span>Pause</span></a></li>
              </ul>
              <div class="jp-progress-container">
                <div class="jp-progress">
                  <div class="jp-seek-bar">
                    <div class="jp-play-bar"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    <?php

    }
  }
endif;

And same CSS. If there is a problem with the script, then it shouldn’t even play. Forgot to mention, still black with OSX Safari. So still investigating.

Have you tried at other machine?

Thank you.

[Rich AParticipant]

Hi and apologies for the late reply…for some reason my subscriptions drop off of threads now and then.

Yes, I can replicate the issue (video playback controls won’t disappear with OS X Firefox on pages created with normal/default page templates, but do disappear on pages created with the portfolio template) on numerous machines in several different geographic locations.

Since it’s the same video being called from the same AWS bucket/CloudFront I’m not sure what the difference between the two templates and how they handle videos might be, but there’s a difference of some nature.

Thanks for having a look!

Best wishes.

[RadModerator]

Hi Rich,

Have you tried the latest X theme 2.3.0 ? There some bug fixes added, and can be worth a try.

Though, it could be best to start fresh with this new version just for testing.

Thanks!

[Rich AParticipant]

Thanks for that. I haven’t upgraded yet, so I’ll go ahead and create a staging environment for the site, update to v2.3.0 and report back.

Thanks again!

[ChristianModerator]

You’re welcome Rich.

[Author]

Posts