Hi team,
Audio player on my site does not show the total audio time, played time and mute button.
I am using renew 4. I think, it could be done with metadata display function/ advance controls.
How can i enable it for all my posts
Regards,
Shah
Hello Shah,
Thanks for posting in! Are you referring to the featured video when a post has a video post format?
This was done on purpose so that only a play button will appear in the video. If you want to have full control, you need to override the featured video function. Because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.
After the child theme is set up, please add the following code in your child theme’s functions.php file
// Custom 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-fullwidth', false );
} else {
$poster = wp_get_attachment_image_src( get_post_thumbnail_id( $entry_id ), 'entry', false );
}
if ( $embed != '' ) {
echo do_shortcode( '[x_video_embed type="' . $aspect_ratio . '" no_container="true" class="mvn"]' . stripslashes( htmlspecialchars_decode( $embed ) ) . '[/x_video_embed]' );
} else {
echo do_shortcode( '[x_video_player m4v="' . $m4v . '" ogv="' . $ogv . '" poster="' . $poster[0] . '" type="' . $aspect_ratio . '" advanced_controls="true" preload="metadata" hide_controls="false" autoplay="false" loop="false" muted="false" no_container="true" class="custom by x staff mvn"]' );
}
}
endif;
// =============================================================================
Hope this helps. Please let us know how it goes.
Hi, I am looking for advance controls on Audio Player for Renew-4 like following image shows
Currently, the Audio player on my site is not showing the time and speeker (mute) button on right side of player.
Best Regards,
Hi there,
The player CSS and javascript are configured for that player (with no timing and audio control). I tried displaying the timer through CSS and it works but a bit off, plus, the audio control is configured through javascript, hence, can’t be controlled by CSS.
I’ll add this to our issue tracker as a feature request.
Thanks!
Thanks for quick response.
Yes, it will be great if added as a feature.
At this point in time, timer is more important for me. If you can work on it and share CSS update which can only show the timer with Audio player, it will be great.
Hi there,
Please try this CSS,
.mejs-offscreen, .mejs-time-buffering, .mejs-time-hovered, .mejs-time-handle, .mejs-time-float, .mejs-volume-slider, .mejs-clear {
display: block !important;
}
.mejs-time-total {
text-align: right !important;
}
.mejs-time-total {
width: calc( 100% - 100px ) !important;
overflow: visible;
}
.mejs-time-float {
left: auto !important;
right: -100px !important;
position: relative;
overflow: visible;
}
Thanks!
Hi, I checked the code. Time displayed but it broke the layout.
Hello There,
The CSS may not resolve your issue because again, by default we have modified the audio player. Please use the method I have suggested in my reply as I have tested it and it unlocks the controls of the video. For the audio, you will have to use this:
// Custom Featured Audio
// =============================================================================
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 );
if ( $embed != '' ) {
echo do_shortcode( '[x_audio_embed class="mvn"]' . stripslashes( htmlspecialchars_decode( $embed ) ) . '[/x_audio_embed]' );
} else {
echo do_shortcode( '[x_audio_player advanced_controls="true" mp3="' . $mp3 . '" oga="' . $ogg . '" preload="metadata" autoplay="false" loop="false" class="mvn"]' );
}
}
endif;
Before you can implement this, you will have to install the child theme first and insert the code above in the child theme’s functions.php file.
Please let us know how it goes.
Thanks a lot. It worked perfectly well as required.
But i tested it with the main theme’s function.php file.
Can you guide me to a link/url on installing the child theme.
I think i am already using a child theme Renew-4. Can you confirm?
Hi There,
You should not edit any files from the parent Theme, you’ll lose that when the parent Theme updates.
I checked your site and it is not on the child theme. Please setup a child theme.
Let us know how it goes,
Cheers!
Hi team,
I checked that on mobile, it is not working. Can you please review and advise accordingly so that player on mobile can also have same audio player.
Hi there,
Please add this code to your global custom CSS as well,
@media (max-width: 767px){
.mejs-time {
display: flex !important;
}
}
That should fix it for mobile.
Thanks!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
Hi @ShahzadArif
You can add this CSS code to (Theme Options > CSS) section to fix this issue:
.mejs-time {
width: 65px !important;
}
In future requests, please open a new support thread for every question you have, don’t reply on old closed threads.
Thanks.