Below, you’ll find a detailed guide on how to add the Super Video Player Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Super Video Player Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the Super Video Player Plugin and the shortcodes it provides:
"Super Video Player is a dynamic WordPress plugin designed to enhance your website's multimedia capabilities. It allows seamless video playback, ensuring a smooth user experience."
- [vplayer]
Super Video Player [vplayer] Shortcode
The Super Video Player shortcode is a comprehensive tool for embedding video players in your WordPress site. It allows customization of video attributes including width, autoplay, mute, and loop. It also supports different video formats and provides an option to add subtitles. The shortcode ensures browser compatibility and delivers a user-friendly video experience.
Shortcode: [vplayer]
Parameters
Here is a list of all possible vplayer shortcode parameters and attributes:
id– Unique identifier for the video player instance
Examples and Usage
Basic example – Display a video player by referencing the ID of the svplayer post type
[vplayer id=1 /]Advanced examples
Using the shortcode to display a video player by referencing the ID of the svplayer post type. The player will have a width of 500px if the width is not defined in the post meta data. If the video file is not selected, it will display a message to remind you to select a video source.
[vplayer id=2 /]Another advanced usage of the shortcode is to display a video player with custom styles. This includes setting the width of the player, whether the video should loop, whether the video should be muted, and whether the video should autoplay. If the video file is not selected, it will display a message to remind you to select a video source. If the video file type is m3u8 or mpd, it will load the corresponding script to play the video.
[vplayer id=3 /]It’s worth mentioning that the shortcode can also handle subtitles. If subtitles are provided in the post meta data, they will be displayed in the video player.
[vplayer id=4 /]PHP Function Code
In case you have difficulties debugging what causing issues with [vplayer] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('vplayer','svp_shortcode_func_free');Shortcode PHP function:
function svp_shortcode_func_free($atts){
extract( shortcode_atts( array(
'id' => null,
), $atts ) );
$post_type = get_post_type($id);
if($post_type != 'svplayer'){
return false;
}
wp_enqueue_script('bplugins-frontend');
$props = [
'options' => [
],
'styles' => [
'width' => get_post_meta($id,'video_width', true)
]
];
ob_start();?>
<div class="svpPlayer"></div>
<div style="<?php $pwidth=get_post_meta($id,'video_width', true); if ($pwidth==0){echo 'width:100%';}else{echo 'width:' . esc_attr($pwidth) . 'px; max-width:' . esc_attr($pwidth) . 'px; display: inline-block;';} ?>">
<?php if( empty(get_post_meta($id,'_svp_video_file', true))){echo 'You have not selected any video for that player. Please check the player and set a video source.';} ?>
<video controls playsinline class="player<?php echo esc_attr($id); ?>" <?php $status1= get_post_meta($id,'video_repeat', true); if ($status1=="loop"){echo "loop";}?> <?php $stutas= get_post_meta($id,'video_muted', true); if('1'==$stutas){echo 'muted';} ?> <?php $stutas= get_post_meta($id,'video_autoplay', true); if ($stutas=="1"){echo" autoplay ";}?><?php $poster=get_post_meta($id,'_svp_video_poster', true); if(!empty($poster)) { echo'poster="'. esc_attr($poster).'"';} ?>>
<source src="<?php $video=get_post_meta($id,'_svp_video_file', true); echo esc_attr($video);?>" type="video/mp4">
Your browser does not support the video tag.
<?php $subtitle=get_post_meta($id,'video_caption', true); if(!empty($subtitle)){
//var_dump($subtitle);
foreach($subtitle as $subtitledata){ ?>
<track kind="captions" label="<?php echo esc_attr($subtitledata['label']);?>" src="<?php echo esc_url($subtitledata['vtt']);?>" srclang="en" default>
<?php } } ?>
</video>
<script type="text/javascript">
<?php
$path=get_post_meta($id,'_svp_video_file', true);
$ext = pathinfo($path, PATHINFO_EXTENSION);
if($ext=='m3u8'){
wp_enqueue_script('svp-hls-js');
?>
document.addEventListener('DOMContentLoaded', () => {
const source = '<?php echo esc_url(get_post_meta($id,'_svp_video_file', true)); ?>';
const video = document.querySelector('.player<?php echo esc_attr($id); ?>');
const player = new Plyr(video, {captions: {active: true, update: true, language: 'en'}});
if (!Hls.isSupported()) {
video.src = source;
} else {
const hls = new Hls();
hls.loadSource(source);
hls.attachMedia(video);
window.hls = hls;
player.on('languagechange', () => {
setTimeout(() => hls.subtitleTrack = player.currentTrack, 50);
});
}
window.player = player;
});
<?php }
if($ext=='mpd'){
wp_enqueue_script('svp-shaka-js');
?>
document.addEventListener('DOMContentLoaded', () => {
const source = '<?php echo esc_url(get_post_meta($id,'_svp_video_file', true)); ?>';
const video = document.querySelector('video');
const player = new Plyr(video);
window.player = player;
if (shaka.Player.isBrowserSupported()) {
shaka.polyfill.installAll();
const shakaInstance = new shaka.Player(video);
shakaInstance.load(source);
} else {
console.warn('Browser is not supported!');
}
});
<?php } ?>
const players<?php echo esc_html($id);?> = Plyr.setup('.player<?php echo esc_html($id);?>', {
fullscreen:{ enabled: true, fallback: true, iosNative: true },
displayDuration: true,
invertTime:false,
});
</script>
</div>
<?php $output = ob_get_clean();return $output;//print $output; // debug ?>
<?php
}
Code file location:
super-video-player/super-video-player/inc/shortcode-free copy.phpConclusion
Now that you’ve learned how to embed the Super Video Player Plugin shortcode, 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