Below, you’ll find a detailed guide on how to add the Audio And Video Player Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Audio And Video Player Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Audio And Video Player Plugin and the shortcodes it provides:
"CP Media Player – Audio Player and Video Player is a versatile plugin that enables seamless audio and video playback on your WordPress site. Enhance your user experience with smooth multimedia integration."
- [codepeople-html5-media-player]
- [codepeople-html5-playlist-item]
Audio And Video Player [codepeople-html5-media-player] Shortcode
The CodePeople Media Player shortcode is used to embed audio and video players into WordPress posts or pages. It provides customizable features like autoplay, loop, and shuffle. The shortcode supports iframe embedding and allows playlist creation from a directory. It also facilitates the use of subtitles and various skins for the media player. The player can be customized via PHP code, which sets player attributes like width, height, and preload options.
Shortcode: [codepeople-html5-media-player]
Parameters
Here is a list of all possible codepeople-html5-media-player shortcode parameters and attributes:
id– Unique identifier of the media playerdir– Directory path for the media filestype– Media type, can be ‘audio’ or ‘video’width– Width of the media playerheight– Height of the media playerskin– Skin to be applied to the media playerloop– Enables the loop feature for media playbackautoplay– Enables the autoplay feature for media playbackpreload– Preloads the media files before playingplaylist– Playlist for the media playerplaylist_download_links– Enables download links for media files in the playlistiframe– Displays the media player in an iframeclass– CSS class applied to the media player
Examples and Usage
Basic example – Display a media player with specific media content by referencing the ID attribute.
[codepeople-html5-media-player id=1 /]Advanced examples
Display a media player with specific media content, set the type to video, and enable autoplay.
[codepeople-html5-media-player id=2 type="video" autoplay="true" /]Display a media player, set the type to audio, preload the media, and set a custom width and height.
[codepeople-html5-media-player id=3 type="audio" preload="auto" width="300px" height="200px" /]Display a media player with specific media content, set the type to audio, enable loop, and set a custom skin.
[codepeople-html5-media-player id=4 type="audio" loop="true" skin="custom-skin" /]Display a media player with specific media content, set the type to video, enable shuffle, and disable the playlist.
[codepeople-html5-media-player id=5 type="video" shuffle="true" playlist="false" /]PHP Function Code
In case you have difficulties debugging what causing issues with [codepeople-html5-media-player] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'codepeople-html5-media-player', array( $this, 'replace_shortcode' ) );Shortcode PHP function:
function replace_shortcode( $atts = array(), $content = '', $shortcode_tag = '' ) {
global $wpdb;
extract( $atts ); // phpcs:ignore WordPress.PHP.DontExtract
if ( ! empty( $iframe ) && ! $this->in_preview ) {
$shortcode = '[' . $shortcode_tag;
foreach ( $atts as $att_name => $att_value )
$shortcode .= ' ' . $att_name .'="' . esc_attr( $att_value ) . '"';
$shortcode .= ']' . $content . '[/' . $shortcode_tag . ']';
$shortcode_id = urlencode( md5( $shortcode ) );
set_transient( $shortcode_id, $shortcode, 30*24*60*60 );
$url = get_home_url( get_current_blog_id(), '', is_ssl() ? 'https' : 'http' );
$url .= ( ( strpos( $url, '?' ) === false ) ? '?' : '&' ) . 'cpmp-avp=' . $shortcode_id;
$output = '<iframe src="' . esc_attr( $url ) . '" style="border:none;width:100%;" onload="this.width=this.contentWindow.document.body.scrollWidth;this.height=this.contentWindow.document.body.scrollHeight+20;" allowtransparency="true" scrolling="no"></iframe>';
if ( ! $this->observer_embeded ) {
$output .= '<script>document.addEventListener("DOMContentLoaded", function(){window.addEventListener("message", function(evt){
var matches = document.querySelectorAll("iframe");
for (i=0; i<matches.length; i++){
if( matches[i].contentWindow == evt.source ){
matches[i].height = Number( evt.data.height )
return 1;
}
}
},false);});</script>';
$this->observer_embeded = 1;
}
return $output;
}
$this->current_player_playlist = array();
if ( ! empty( $dir ) ) {
$this->playlist_from_dir( $dir );
}
$content = do_shortcode( $content );
// Variables
$player_id = 'codepeople_media_player' . time() . mt_rand( 1, 999999 );
$mp_atts = array(); // Media Player attributes
$pl_items = array(); // Playlist items
$srcs = array(); // Sources of first item
$mp_subtitles = array(); // Subtitles list of first item
$styles = '';
$paypal_button = '';
if ( isset( $id ) ) {
$sql = $wpdb->prepare( 'SELECT * FROM ' . $wpdb->prefix . CPMP_PLAYER . ' WHERE id=%d', $id ); // phpcs:ignore WordPress.DB.PreparedSQL.NotPrepared
$player = $wpdb->get_row( $sql ); // phpcs:ignore WordPress.DB.PreparedSQL.NotPrepared
if ( null != $player ) {
$config_obj = ( isset( $player->config ) ) ? unserialize( $player->config ) : new stdClass();
// Set attributes
if ( empty( $config_obj->type ) ) {
$config_obj->type = 'audio';
}
if ( ! isset( $type ) ) {
$type = trim( $config_obj->type );
}
if ( ! isset( $width ) && isset( $config_obj->width ) ) {
$width = trim( $config_obj->width );
}
if ( ! isset( $height ) && isset( $config_obj->height ) ) {
$height = trim( $config_obj->height );
}
if ( ! isset( $skin ) && isset( $config_obj->skin ) ) {
$skin = trim( $config_obj->skin );
}
if ( ! isset( $loop ) && isset( $config_obj->loop ) ) {
$loop = trim( $config_obj->loop );
}
if ( ! isset( $autoplay ) && isset( $config_obj->autoplay ) ) {
$autoplay = trim( $config_obj->autoplay );
}
if ( ! isset( $preload ) && isset( $config_obj->preload ) ) {
$preload = trim( $config_obj->preload );
}
if ( ! isset( $playlist ) && isset( $config_obj->playlist ) ) {
$playlist = trim( $config_obj->playlist );
}
if ( ! isset( $playlist_download_links ) && isset( $config_obj->playlist_download_links ) ) {
$playlist_download_links = trim( $config_obj->playlist_download_links );
}
if ( empty( $this->current_player_playlist ) ) {
$this->current_player_playlist = ( isset( $player->playlist ) ) ? unserialize( $player->playlist ) : array();
}
}
}
if ( empty( $type ) ) {
$type = 'audio';
}
if ( ! empty( $this->current_player_playlist ) ) {
$first_item = true;
foreach ( $this->current_player_playlist as $item ) {
$item_srcs = array();
$item_subtitles = array();
foreach ( $item->files as $file ) {
$file = $this->transform_url( $file );
$ext = $this->get_extension( $file, $type );
// Removing the protocol from the file's URL
$file = preg_replace( '/^http(s)?\:/i', '', $file );
$item_src_obj = new stdClass();
$item_src_obj->src = $file;
$item_src_obj->type = $type . '/' . $ext;
$item_srcs[] = $item_src_obj;
if ( $first_item ) {
if ( ! empty( $item->poster ) ) {
$mp_atts[] = 'poster="' . esc_url( $item->poster ) . '"';
}
$srcs[] = '<source src="' . esc_attr( $file ) . '" type="' . esc_attr( $item_src_obj->type ) . '" />';
}
}
foreach ( $item->subtitles as $subtitle ) {
$location = $this->transform_url( $subtitle->link );
$language = $subtitle->language;
if ( $first_item ) {
$mp_subtitles[] = '<track src="' . esc_url( $location ) . '" kind="subtitles" srclang="' . esc_attr( $language ) . '"></track>';
}
$item_subtitle_obj = new stdClass();
$item_subtitle_obj->kind = 'subtitles';
$item_subtitle_obj->src = $location;
$item_subtitle_obj->srclang = $language;
$item_subtitles[] = $item_subtitle_obj;
}
$pl_item_obj = new stdClass();
if ( ! empty( $item->poster ) ) {
$pl_item_obj->poster = $this->transform_url( $item->poster );
}
$pl_item_obj->source = $item_srcs;
$pl_item_obj->track = $item_subtitles;
$pl_items[] = '<li value="' . esc_attr( json_encode( $pl_item_obj ) ) . '">' .
( ! empty( $playlist_download_links ) && ( 'true' == $playlist_download_links || '1' == $playlist_download_links || 1 == $playlist_download_links ) && ! empty( $item_srcs ) ? '<a class="cpmp-playlist-download-link" target="_blank" href="' . esc_url( $item_srcs[0]->src ) . '" title="' . __( 'Download', 'codepeople-media-player' ) . '" download></a>' : '' ) .
( ! empty( $item->link ) ? '<a class="cpmp-info" href="' . esc_url( $item->link ) . '">+</a>' : '' ) .
( ! empty( $item->annotation ) ? '<span class="cpmp-annotation">' . $item->annotation . '</span>' : '' ) .
'</li>';
$first_item = false;
}
} else {
return '';
}
if ( empty( $skin ) ) {
$skin = 'device-player-skin';
}
$skin = trim( $skin );
$base_path = dirname( __FILE__ ) . '/';
$base_url = plugin_dir_url( __FILE__ );
wp_enqueue_style( 'wp-mediaelement' );
wp_enqueue_style( 'codepeople_media_player', $base_url . 'css/cpmp.css', array(), CPMP_VERSION );
$css_path = $base_path . 'skins/' . $skin . '/' . $skin . '.css';
$css_url = $base_url . 'skins/' . $skin . '/' . $skin . '.css';
$js_path = $base_path . 'skins/' . $skin . '/' . $skin . '.js';
$js_url = $base_url . 'skins/' . $skin . '/' . $skin . '.js';
if ( file_exists( $css_path ) ) {
wp_enqueue_style( 'codepeople_media_player_style_' . $skin, $css_url, array(), CPMP_VERSION );
}
if ( file_exists( $js_path ) ) {
wp_enqueue_script( 'codepeople_media_player_script_' . $skin, $js_url, array( 'jquery' ), CPMP_VERSION, true );
}
wp_enqueue_script( 'wp-mediaelement' );
wp_enqueue_script( 'codepeople_media_player_vimeo', '//cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.16/renderers/vimeo.min.js', array( 'wp-mediaelement' ), CPMP_VERSION );
wp_enqueue_script( 'codepeople_media_player_script', $base_url . 'js/codepeople-plugins.js', array( 'jquery', 'wp-mediaelement' ), CPMP_VERSION, true );
// Inside iframe tag
if ( $this->in_preview ) {
wp_enqueue_script( 'codepeople_media_player_iframe_script', $base_url . 'js/codepeople-plugins-iframe.js', array(), CPMP_VERSION, true );
}
wp_localize_script( 'codepeople_media_player_script', 'cpmp_general_settings', array( 'play_all' => get_option( 'cpmp_play_all', 1 ) ) );
$styles .= 'style="max-width:99%;box-sizing:border-box;margin-left:auto;margin-right:auto;margin-top:2px;';
if ( ! empty( $width ) ) {
if ( is_numeric( $width ) ) {
$width .= 'px';
}
$width = esc_attr( $width );
$styles .= 'width:' . $width . ';';
$mp_atts[] = 'width="' . $width . '"';
}
$styles .= '"';
if ( ! empty( $height ) ) {
$mp_atts[] = 'height="' . esc_attr( $height ) . '"';
}
$mp_atts[] = 'class="codepeople-media ' . ( ! empty( $skin ) ? esc_attr( $skin ) : '' ) . '"';
if ( ! empty( $shuffle ) && 'false' != $shuffle ) {
$mp_atts[] = 'shuffle="shuffle"';
}
if ( ! empty( $loop ) && 'false' != $loop ) {
$mp_atts[] = 'loop="loop"';
}
if ( ! empty( $autoplay ) && 'false' != $autoplay ) {
$mp_atts[] = 'autoplay="autoplay"';
}
if ( isset( $preload ) ) {
$mp_atts[] = 'preload="' . esc_attr( $preload ) . '"';
} else {
$mp_atts[] = 'preload="none"';
}
if ( wp_is_mobile() && 'device-player-skin' == $skin ) {
$mp_atts[] = 'controls';
}
return '<div id="ms_avp" ' . $styles . ( ! empty( $class ) ? ' class="' . esc_attr( $class ) . '"' : '' ) . '><' . $type . ' id="' . esc_attr( $player_id ) . '" ' . implode( ' ', $mp_atts ) . ' ' . $styles . '>' . implode( '', $srcs ) . implode( '', $mp_subtitles ) . '</' . $type . '>' . ( ( count( $pl_items ) > 0 ) ? '<ul id="' . esc_attr( $player_id ) . '-list" class="' . ( ( ! empty( $playlist ) && 'false' != $playlist ) ? '' : 'no-playlist' ) . '" style="display:none;">' . implode( ' ', $pl_items ) . '</ul>' : '' ) . '<noscript>audio-and-video-player require JavaScript</noscript><div style="clear:both;"></div></div>';
}
Code file location:
audio-and-video-player/audio-and-video-player/codepeople-media-player.clss.phpAudio And Video Player [codepeople-html5-playlist-item] Shortcode
The CodePeople HTML5 Playlist Item shortcode is designed to replace specific components in a playlist. It uses attributes such as ‘file’, ‘name’, ‘poster’, ‘link’, ‘subtitle’, and ‘lang’ to customize the playlist items.
Shortcode: [codepeople-html5-playlist-item]
Parameters
Here is a list of all possible codepeople-html5-playlist-item shortcode parameters and attributes:
file– The URL or path to the media file.name– The title or name of the media file.poster– The URL or path to an image to display before playback.link– A URL to be associated with the media file.subtitle– The URL or path to the subtitle file.lang– The language of the subtitle file.
Examples and Usage
Basic example – A simple usage of the shortcode to play an audio file with a specified name and link.
[codepeople-html5-playlist-item file="audio.mp3" name="My Audio" link="http://example.com"]Advanced examples
Using the shortcode to play a video file with a specified name, poster image, and link.
[codepeople-html5-playlist-item file="video.mp4" name="My Video" poster="poster.jpg" link="http://example.com"]Using the shortcode to play an audio file with a specified name, link, subtitle file, and subtitle language.
[codepeople-html5-playlist-item file="audio.mp3" name="My Audio" link="http://example.com" subtitle="subtitle.srt" lang="en"]Using the shortcode to play a video file with all possible parameters specified.
[codepeople-html5-playlist-item file="video.mp4" name="My Video" poster="poster.jpg" link="http://example.com" subtitle="subtitle.srt" lang="en"]PHP Function Code
In case you have difficulties debugging what causing issues with [codepeople-html5-playlist-item] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'codepeople-html5-playlist-item', array( $this, 'replace_shortcode_playlist_item' ) );Shortcode PHP function:
function replace_shortcode_playlist_item( $atts, $content = '' ) {
$atts = shortcode_atts(
array(
'file' => '',
'name' => '',
'poster' => '',
'link' => '',
'subtitle' => '',
'lang' => '',
),
$atts
);
extract( $atts ); // phpcs:ignore WordPress.PHP.DontExtract
if ( ! empty( $file ) ) {
if ( ! empty( $content ) ) {
$name = $content;
}
$obj = new stdClass();
$obj->files = array( $file );
$obj->poster = $poster;
$obj->annotation = $name;
$obj->link = $link;
$obj->subtitles = array();
if ( ! empty( $subtitle ) ) {
$subtitle_obj = new stdClass();
$subtitle_obj->link = $subtitle;
$subtitle_obj->language = $lang;
$obj->subtitles[] = $subtitle_obj;
}
$this->current_player_playlist[] = $obj;
}
return '';
}
Code file location:
audio-and-video-player/audio-and-video-player/codepeople-media-player.clss.phpConclusion
Now that you’ve learned how to embed the Audio And Video Player Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply