[Jason HParticipant]

I don’t know what happened, but when I migrated my site over to the new domain, the audio player stopped working ON PHONE ONLY. I have the audio player hidden for everything except phone. I know the links are correct and have tried to rebuild the box in VC, but no joy.

The site is HERE

[ChristianModerator]

Hey Jason,

You’re website is not available upon checking (see http://prntscr.com/4830tp). Please check.

Thanks.

[Jason HParticipant]

My link was bad…updated. Sorry 🙂

[RadModerator]

Hi Jason,

Getting this error and I think from coupontool.

Failed to load resource: the server responded with a status of 503 (Service Unavailable: Back-end server is at capacity)

You’re currently using X 2.1.0, please add this code at your child theme’s functions.php

if ( ! function_exists( 'x_featured_audio' ) ) :
  function x_featured_audio() {

    $entry_id = get_the_ID();
    $mp3      = get_post_meta( $entry_id, '_x_audio_mp3', true );
    $ogg      = get_post_meta( $entry_id, '_x_audio_ogg', true );
    $embed    = get_post_meta( $entry_id, '_x_audio_embed', true );

    ?>

    <?php if ( $embed != '' ) { ?>

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

    <?php } else { ?>

      <script>
        jQuery(document).ready(function($){
          if($().jPlayer) {
            $('#x_jplayer_<?php echo $entry_id; ?>').jPlayer({
              ready: function () {
                $(this).jPlayer('setMedia', {
                  <?php if ( $mp3 != '' ) : ?>
                  mp3: '<?php echo $mp3; ?>',
                  <?php endif; ?>
                  <?php if ( $ogg != '' ) : ?>
                  oga: '<?php echo $ogg; ?>',
                  <?php endif; ?>
                  end: ''
                });
              },
              size: {
                width: '100%',
                height: '0'
              },
              swfPath: '<?php echo get_template_directory_uri(); ?>/framework/js/src/site/vendor/jplayer',
              cssSelectorAncestor: '#jp_interface_<?php echo $entry_id; ?>',
              supplied: '<?php if( $mp3 != "" ) : ?>mp3, <?php endif; ?><?php if ( $ogg != "" ) : ?>oga,<?php endif; ?> all'
            });
          }
        });
      </script>

      <div id="x_jplayer_<?php echo $entry_id; ?>" class="jp-jplayer jp-jplayer-audio"></div>
      <div class="jp-controls-container jp-controls-container-audio">
        <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>

    <?php } ?>

  <?php

  }
endif;

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

function x_shortcode_audio_player_v2( $atts ) { // 1
  extract( shortcode_atts( array(
    'id'     => '',
    'class'  => '',
    'style'  => '',
    'mp3'    => '',
    'oga'    => ''
  ), $atts ) );

  $id     = ( $id    != '' ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class  = ( $class != '' ) ? 'x-audio player ' . esc_attr( $class ) : 'x-audio player';
  $style  = ( $style != '' ) ? 'style="' . $style . '"' : '';
  $mp3    = ( $mp3   != '' ) ? $mp3 : '';
  $oga    = ( $oga   != '' ) ? $oga : '';

  static $count = 0; $count++;

  $output = '<script>'
            . 'jQuery(document).ready(function($){'
              . 'if($().jPlayer) {'
                . "$('#x_jplayer_audio_embed_shortcode_{$count}').jPlayer({"
                  . 'ready: function () {'
                    . "$(this).jPlayer('setMedia', {"
                      . ( ( $mp3 != '' ) ? "mp3: '{$mp3}'," : '' )
                      . ( ( $oga != '' ) ? "oga: '{$oga}'," : '' )
                    . '});'
                  . '},'
                  . 'size: {'
                    . "width: '100%',"
                    . "height: '100%'"
                  . '},'
                  . "swfPath: '" . get_template_directory_uri() . "/framework/js/src/site/vendor/jplayer',"
                  . "cssSelectorAncestor: '#jp_interface_audio_embed_shortcode_{$count}',"
                  . "supplied: '" . ( ( $mp3 != '' ) ? 'mp3' : '' ) . ( ( $oga != '' ) ? ' oga' : '' ) . "'"
                . '});'
              . '}'
            . '});'
          . '</script>'

          . "<div {$id} class=\"{$class}\" {$style}>"
            . "<div id=\"x_jplayer_audio_embed_shortcode_{$count}\" class=\"jp-jplayer jp-jplayer-audio\"></div>"
            . "<div class=\"jp-controls-container jp-controls-container-audio\">"
              . "<div id=\"jp_interface_audio_embed_shortcode_{$count}\" 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>';
  
  return $output;
}

function x_shortcode_responsive_video_player_v2( $atts ) { // 1
  extract( shortcode_atts( array(
    'id'            => '',
    'class'         => '',
    'style'         => '',
    'type'          => '',
    'm4v'           => '',
    'ogv'           => '',
    'poster'        => '',
    'hide_controls' => '',
    'autoplay'      => '',
    'no_container'  => ''
  ), $atts ) );

  $id    = ( $id    != '' ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class = ( $class != '' ) ? 'x-responsive-video x-responsive-video-shortcode player ' . esc_attr( $class ) : 'x-responsive-video x-responsive-video-shortcode player';
  $style = ( $style != '' ) ? 'style="' . $style . '"' : '';
  switch ( $type ) {
    case '5:3' :
      $type = ' five-by-three';
      break;
    case '5:4' :
      $type = ' five-by-four';
      break;
    case '4:3' :
      $type = ' four-by-three';
      break;
    case '3:2' :
      $type = ' three-by-two';
      break;
    default :
      $type = '';
  }
  $m4v           = ( $m4v           != ''     ) ? $m4v : '';
  $ogv           = ( $ogv           != ''     ) ? $ogv : '';
  $poster        = ( $poster        != ''     ) ? $poster : '';
  $hide_controls = ( $hide_controls == 'true' ) ? $hide_controls : '';
  $autoplay      = ( $autoplay      == 'true' ) ? '.jPlayer("play")' : '';
  $no_container  = ( $no_container  == 'true' ) ? '' : ' with-container';

  static $count = 0; $count++;

  if ( is_numeric( $poster ) ) {
    $poster_info = wp_get_attachment_image_src( $poster, 'full' );
    $poster      = $poster_info[0];
  }

  if ( $hide_controls == 'true' ) {
    $controls = '';
  } else {
    $controls = '<div class="jp-controls-container jp-controls-container-video">'
                . "<div id=\"jp_interface_video_embed_shortcode_{$count}\" class=\"jp-interface\">"
                  . '<ul class="jp-controls">'
                    . '<li><a href="#" class="jp-play" tabindex="1" title="Play"><span>Play</span></a></li>'
                    . '<li><a href="#" class="jp-pause" tabindex="1" title="Pause"><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>';
  }

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

          . "<div {$id} class=\"{$class}{$type}{$no_container}\" {$style}>"
            . '<div class="x-responsive-video-inner">'
              . "<div id=\"x_jplayer_video_embed_shortcode_{$count}\" class=\"jp-jplayer jp-jplayer-video\"></div>"
              . $controls
            . '</div>'
          . '</div>';
  
  return $output;
}

add_action('wp_head', function() {

remove_shortcode( 'x_audio_player' );
remove_shortcode( 'x_video_player' );

add_shortcode( 'x_audio_player', 'x_shortcode_audio_player_v2' );
add_shortcode( 'x_video_player', 'x_shortcode_responsive_video_player_v2' );

});

After applying this, please clear your plugins cache or disable it temporarily.

Hope this helps.

[Jason HParticipant]

Unfortunately that didn’t do anything. I updated to the current version as well, still no change.

Thoughts?

[ZeshanMember]

Hi Jason,

Thank you for writing in!

There seems to be a JavaScript conflict. You could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Let us know how it goes.

Thank you.

[Jason HParticipant]

Still a no go. I disabled all plugins, cleared all caches and it didn’t work. Plays fine on desktop. Works fine on iPad and iPhone (but only the instances of the player that are not in a visibility box). Just won’t play on my android phone (chrome or stock browser) or Nexus 7 (chrome is the stock browser).

[ZeshanMember]

Hi Jason,

Upon checking thoroughly, the audio players are working on mobile which are visible on desktop. I have created a screencast for you while testing the players on desktop (smaller screen): http://screencast.com/t/gw2JnPZf and on mobiles I have taken a screenshot of the audio player working: http://prntscr.com/4a3xy2

The audio file you are inserting in mobile only visible shortcode is probably not working. You could try re-uploading the audio files for mobiles or testing on a different page.

Cheers!

[Jason HParticipant]

Yes, as I mentioned in the other post, it ONLY doesn’t load in Android (both my tablet and phone). Works in iOS just fine. It looked like you were on an iPhone, so that would work. Just doesn’t load the player in Android.

[RadModerator]

Hi Jason,

May I know more about your android phone? What unit or screen specs.

Nexus 7 has 1920×1200 resolution in which considered as desktop resolution too.

Visibility is based on screen resolution. 1024px and above are desktop’s screen resolution and X does not have device detection feature.

Thank you.

[Jason HParticipant]

I’m using the LG G2. It has a res of 1920×1080, but it does display the items that are designated phone only. It also doesn’t play the audio that is visible to all devices.

As a side note, do you know why the two players and text boxes are overlapping on smaller screens? They are built as a container within a container (to get the two columns with the background behind everything). The way I built it before stacked them and they didn’t overlap.

[RadModerator]

Hi Jason,

The audio plays on my test, though takes time to start.

Would you mind providing screenshot of what should we see and what you’re currently seeing?

Right now, I can only see one visibility shortcode for audio, and that is the last audio which only shows on mobile. While the first two has no visibility.

Thank you.

[Jason HParticipant]

I figured out what I messed up with the margins that made the overlap happen, so no worries on that part.

I redid my visibility to clean things up a bit…didn’t change the player playing though.

[RadModerator]

Hi Jason,

Cool, looking good now. Hmm, it plays well on my end. But tested with simulator with 4.4 and it won’t play and crashed. It could be pulling the flash player that aren’t present at your android and simulator. I added this on my bug list but not sure with ETA.

Thank you.

[Jason HParticipant]

Alrighty. Well I will need to use the core audio player, but the CSS is all wacky when I put it in a REV slider. Is there a way to remove or disable the theme audio player CSS to eliminate the conflict?

[Author]

Posts