1195 lines
34 KiB
PHP
1195 lines
34 KiB
PHP
<?php
|
|
|
|
/**
|
|
* Vidstack Player.
|
|
*
|
|
* @link https://plugins360.com
|
|
* @since 3.3.1
|
|
*
|
|
* @package All_In_One_Video_Gallery
|
|
*/
|
|
|
|
$settings = array(
|
|
'uid' => isset( $_GET['uid'] ) ? sanitize_text_field( $_GET['uid'] ) : 0,
|
|
'post_id' => $post_id,
|
|
'post_type' => $post_type,
|
|
'player' => array(
|
|
'volume' => 0.5
|
|
)
|
|
);
|
|
|
|
$autoadvance = isset( $_GET['autoadvance'] ) ? (int) $_GET['autoadvance'] : 0;
|
|
if ( $autoadvance ) {
|
|
$settings['autoadvance'] = 1;
|
|
}
|
|
|
|
// Video Sources
|
|
$sources = array();
|
|
$allowed_types = array( 'mp4', 'webm', 'ogv', 'hls', 'dash', 'youtube', 'vimeo' );
|
|
|
|
if ( ! empty( $post_meta ) ) {
|
|
$type = $post_meta['type'][0];
|
|
|
|
switch ( $type ) {
|
|
case 'default':
|
|
$types = array( 'mp4', 'webm', 'ogv' );
|
|
|
|
foreach ( $types as $type ) {
|
|
if ( ! empty( $post_meta[ $type ][0] ) ) {
|
|
$ext = $type;
|
|
$label = '';
|
|
|
|
if ( 'mp4' == $type ) {
|
|
$ext = aiovg_get_file_ext( $post_meta[ $type ][0] );
|
|
if ( ! in_array( $ext, array( 'webm', 'ogv' ) ) ) {
|
|
$ext = 'mp4';
|
|
}
|
|
|
|
if ( ! empty( $post_meta['quality_level'][0] ) ) {
|
|
$label = $post_meta['quality_level'][0];
|
|
}
|
|
}
|
|
|
|
$sources[ $type ] = array(
|
|
'type' => "video/{$ext}",
|
|
'src' => $post_meta[ $type ][0]
|
|
);
|
|
|
|
if ( ! empty( $label ) ) {
|
|
$sources[ $type ]['label'] = $label;
|
|
}
|
|
}
|
|
}
|
|
|
|
if ( ! empty( $post_meta['sources'][0] ) ) {
|
|
$_sources = unserialize( $post_meta['sources'][0] );
|
|
|
|
foreach ( $_sources as $source ) {
|
|
if ( ! empty( $source['quality'] ) && ! empty( $source['src'] ) ) {
|
|
$ext = aiovg_get_file_ext( $source['src'] );
|
|
if ( ! in_array( $ext, array( 'webm', 'ogv' ) ) ) {
|
|
$ext = 'mp4';
|
|
}
|
|
|
|
$label = $source['quality'];
|
|
|
|
$sources[ $label ] = array(
|
|
'type' => "video/{$ext}",
|
|
'src' => $source['src'],
|
|
'label' => $label
|
|
);
|
|
}
|
|
}
|
|
}
|
|
break;
|
|
case 'adaptive':
|
|
$hls = isset( $post_meta['hls'] ) ? $post_meta['hls'][0] : '';
|
|
if ( ! empty( $hls ) ) {
|
|
$sources['hls'] = array(
|
|
'type' => 'application/x-mpegurl',
|
|
'src' => $hls
|
|
);
|
|
}
|
|
|
|
$dash = isset( $post_meta['dash'] ) ? $post_meta['dash'][0] : '';
|
|
if ( ! empty( $dash ) ) {
|
|
$sources['dash'] = array(
|
|
'type' => 'application/dash+xml',
|
|
'src' => $dash
|
|
);
|
|
}
|
|
break;
|
|
default:
|
|
if ( in_array( $type, $allowed_types ) && ! empty( $post_meta[ $type ][0] ) ) {
|
|
$src = $post_meta[ $type ][0];
|
|
|
|
$sources[ $type ] = array(
|
|
'type' => "video/{$type}",
|
|
'src' => $src
|
|
);
|
|
}
|
|
}
|
|
} else {
|
|
foreach ( $allowed_types as $type ) {
|
|
if ( isset( $_GET[ $type ] ) && ! empty( $_GET[ $type ] ) ) {
|
|
switch ( $type ) {
|
|
case 'hls':
|
|
$mime_type = 'application/x-mpegurl';
|
|
break;
|
|
case 'dash':
|
|
$mime_type = 'application/dash+xml';
|
|
break;
|
|
default:
|
|
$mime_type = "video/{$type}";
|
|
}
|
|
|
|
$src = aiovg_sanitize_url( $_GET[ $type ] );
|
|
|
|
$sources[ $type ] = array(
|
|
'type' => $mime_type,
|
|
'src' => $src
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
$sources = apply_filters( 'aiovg_iframe_vidstack_player_sources', $sources );
|
|
|
|
// Video Captions
|
|
$tracks = array();
|
|
$cc_load_policy = isset( $_GET['cc_load_policy'] ) ? (int) $_GET['cc_load_policy'] : (int) $player_settings['cc_load_policy'];
|
|
|
|
if ( ! empty( $post_meta['track'] ) ) {
|
|
foreach ( $post_meta['track'] as $track ) {
|
|
$tracks[] = unserialize( $track );
|
|
}
|
|
|
|
if ( ! empty( $cc_load_policy ) ) {
|
|
$settings['player']['captions'] = array(
|
|
'active' => true,
|
|
'language' => 'auto',
|
|
'update' => false
|
|
);
|
|
}
|
|
}
|
|
|
|
$tracks = apply_filters( 'aiovg_iframe_vidstack_player_tracks', $tracks );
|
|
|
|
// Video Chapters
|
|
$has_chapters = isset( $_GET['chapters'] ) ? (int) $_GET['chapters'] : isset( $player_settings['controls']['chapters'] );
|
|
|
|
if ( $has_chapters && ! empty( $post_meta['chapter'] ) ) {
|
|
$chapters = array();
|
|
|
|
foreach ( $post_meta['chapter'] as $chapter ) {
|
|
$chapter = unserialize( $chapter );
|
|
|
|
$chapters[] = array(
|
|
'label' => sanitize_text_field( $chapter['label'] ),
|
|
'time' => (float) $chapter['time']
|
|
);
|
|
}
|
|
|
|
if ( ! empty( $chapters ) ) {
|
|
$settings['player']['markers'] = array(
|
|
'enabled' => true,
|
|
'points' => $chapters
|
|
);
|
|
}
|
|
}
|
|
|
|
// Video Attributes
|
|
$attributes = array(
|
|
'id' => 'player',
|
|
'style' => 'width: 100%; height: 100%;',
|
|
'controls' => '',
|
|
'preload' => esc_attr( $player_settings['preload'] )
|
|
);
|
|
|
|
$autoplay = isset( $_GET['autoplay'] ) ? (int) $_GET['autoplay'] : (int) $player_settings['autoplay'];
|
|
if ( $autoplay ) {
|
|
$attributes['autoplay'] = '';
|
|
$settings['player']['autoplay'] = true;
|
|
}
|
|
|
|
$loop = isset( $_GET['loop'] ) ? (int) $_GET['loop'] : (int) $player_settings['loop'];
|
|
if ( $loop ) {
|
|
$attributes['loop'] = '';
|
|
$settings['player']['loop'] = array( 'active' => true );
|
|
}
|
|
|
|
$muted = isset( $_GET['muted'] ) ? (int) $_GET['muted'] : (int) $player_settings['muted'];
|
|
if ( $muted ) {
|
|
$attributes['muted'] = '';
|
|
$settings['player']['muted'] = true;
|
|
}
|
|
|
|
$playsinline = ! empty( $player_settings['playsinline'] ) ? 1 : 0;
|
|
if ( $playsinline ) {
|
|
$attributes['playsinline'] = '';
|
|
$settings['player']['playsinline'] = true;
|
|
} else {
|
|
$settings['player']['playsinline'] = false;
|
|
}
|
|
|
|
$poster = '';
|
|
if ( isset( $_GET['poster'] ) ) {
|
|
$poster = $_GET['poster'];
|
|
} elseif ( ! empty( $post_meta ) ) {
|
|
$image_data = aiovg_get_image( $post_id, 'large' );
|
|
$poster = $image_data['src'];
|
|
}
|
|
|
|
if ( ! empty( $poster ) ) {
|
|
$attributes['data-poster'] = aiovg_sanitize_url( aiovg_resolve_url( $poster ) );
|
|
}
|
|
|
|
$attributes = apply_filters( 'aiovg_iframe_vidstack_player_attributes', $attributes );
|
|
|
|
// Player Controls
|
|
$has_play = isset( $_GET['playpause'] ) ? (int) $_GET['playpause'] : isset( $player_settings['controls']['playpause'] );
|
|
$has_current_time = isset( $_GET['current'] ) ? (int) $_GET['current'] : isset( $player_settings['controls']['current'] );
|
|
$has_progress = isset( $_GET['progress'] ) ? (int) $_GET['progress'] : isset( $player_settings['controls']['progress'] );
|
|
$has_duration = isset( $_GET['duration'] ) ? (int) $_GET['duration'] : isset( $player_settings['controls']['duration'] );
|
|
$has_volume = isset( $_GET['volume'] ) ? (int) $_GET['volume'] : isset( $player_settings['controls']['volume'] );
|
|
$has_quality_selector = isset( $_GET['quality'] ) ? (int) $_GET['quality'] : isset( $player_settings['controls']['quality'] );
|
|
$has_captions = isset( $_GET['tracks'] ) ? (int) $_GET['tracks'] : isset( $player_settings['controls']['tracks'] );
|
|
$has_speed_control = isset( $_GET['speed'] ) ? (int) $_GET['speed'] : isset( $player_settings['controls']['speed'] );
|
|
$has_fullscreen = isset( $_GET['fullscreen'] ) ? (int) $_GET['fullscreen'] : isset( $player_settings['controls']['fullscreen'] );
|
|
|
|
$controls = array();
|
|
$controls[] = 'play-large';
|
|
|
|
if ( $has_play ) {
|
|
$controls[] = 'play';
|
|
}
|
|
|
|
if ( $has_current_time ) {
|
|
$controls[] = 'current-time';
|
|
}
|
|
|
|
if ( $has_progress ) {
|
|
$controls[] = 'progress';
|
|
}
|
|
|
|
if ( $has_duration ) {
|
|
$controls[] = 'duration';
|
|
}
|
|
|
|
if ( $has_volume ) {
|
|
$controls[] = 'mute';
|
|
|
|
if ( ! wp_is_mobile() ) {
|
|
$controls[] = 'volume';
|
|
}
|
|
}
|
|
|
|
if ( $has_captions ) {
|
|
if ( ! wp_is_mobile() ) {
|
|
$controls[] = 'captions';
|
|
}
|
|
} else {
|
|
if ( empty( $cc_load_policy ) ) {
|
|
$tracks = array();
|
|
}
|
|
}
|
|
|
|
if ( $has_quality_selector || $has_captions || $has_speed_control ) {
|
|
$controls[] = 'settings';
|
|
|
|
$settings['player']['settings'] = array();
|
|
|
|
if ( $has_quality_selector ) {
|
|
$settings['player']['settings'][] = 'quality';
|
|
}
|
|
|
|
if ( $has_captions ) {
|
|
$settings['player']['settings'][] = 'captions';
|
|
}
|
|
|
|
if ( $has_speed_control ) {
|
|
$settings['player']['settings'][] = 'speed';
|
|
|
|
$settings['player']['speed'] = array(
|
|
'selected' => 1,
|
|
'options' => array( 0.5, 0.75, 1, 1.5, 2 )
|
|
);
|
|
}
|
|
}
|
|
|
|
if ( isset( $sources['mp4'] ) ) {
|
|
$has_download = isset( $player_settings['controls']['download'] );
|
|
$download_url = '';
|
|
|
|
if ( ! empty( $post_meta ) ) {
|
|
if ( isset( $post_meta['download'] ) && empty( $post_meta['download'][0] ) ) {
|
|
$has_download = 0;
|
|
}
|
|
|
|
$download_url = home_url( '?vdl=' . $post_id );
|
|
}
|
|
|
|
if ( isset( $_GET['download'] ) ) {
|
|
$has_download = (int) $_GET['download'];
|
|
}
|
|
|
|
if ( $has_download ) {
|
|
$controls[] = 'download';
|
|
|
|
if ( empty( $download_url ) ) {
|
|
$download_url = home_url( '?vdl=' . aiovg_get_temporary_file_download_id( $sources['mp4']['src'] ) );
|
|
}
|
|
|
|
$settings['player']['urls'] = array(
|
|
'download' => esc_url( $download_url )
|
|
);
|
|
}
|
|
}
|
|
|
|
if ( $has_fullscreen ) {
|
|
$controls[] = 'fullscreen';
|
|
}
|
|
|
|
$settings['player']['controls'] = $controls;
|
|
|
|
// Keyboard Hotkeys
|
|
if ( isset( $player_settings['hotkeys'] ) && ! empty( $player_settings['hotkeys'] ) ) {
|
|
$settings['player']['keyboard'] = array(
|
|
'focused' => true,
|
|
'global' => true
|
|
);
|
|
}
|
|
|
|
// YouTube
|
|
if ( isset( $sources['youtube'] ) ) {
|
|
$settings['player']['youtube'] = array(
|
|
'noCookie' => false,
|
|
'rel' => 0,
|
|
'showinfo' => 0,
|
|
'iv_load_policy' => 3,
|
|
'modestbranding' => 1
|
|
);
|
|
|
|
parse_str( $sources['youtube']['src'], $queries );
|
|
|
|
if ( isset( $queries['start'] ) ) {
|
|
$settings['player']['youtube']['start'] = (int) $queries['start'];
|
|
}
|
|
|
|
if ( isset( $queries['t'] ) ) {
|
|
$settings['player']['youtube']['start'] = (int) $queries['t'];
|
|
}
|
|
|
|
if ( isset( $queries['end'] ) ) {
|
|
$settings['player']['youtube']['end'] = (int) $queries['end'];
|
|
}
|
|
}
|
|
|
|
// Vimeo
|
|
if ( isset( $sources['vimeo'] ) ) {
|
|
$settings['player']['vimeo'] = array(
|
|
'byline' => false,
|
|
'portrait' => false,
|
|
'title' => false,
|
|
'speed' => true,
|
|
'transparent' => false
|
|
);
|
|
}
|
|
|
|
// HLS
|
|
if ( isset( $sources['hls'] ) ) {
|
|
$settings['hls'] = $sources['hls']['src'];
|
|
|
|
$settings['player']['captions'] = array(
|
|
'active' => ! empty( $cc_load_policy ) ? true : false,
|
|
'language' => 'auto',
|
|
'update' => true
|
|
);
|
|
}
|
|
|
|
// Dash
|
|
if ( isset( $sources['dash'] ) ) {
|
|
$settings['dash'] = $sources['dash']['src'];
|
|
|
|
$settings['player']['captions'] = array(
|
|
'active' => ! empty( $cc_load_policy ) ? true : false,
|
|
'language' => 'auto',
|
|
'update' => true
|
|
);
|
|
}
|
|
|
|
// Share
|
|
$has_share = isset( $_GET['share'] ) ? (int) $_GET['share'] : isset( $player_settings['controls']['share'] );
|
|
if ( $has_share ) {
|
|
$socialshare_settings = get_option( 'aiovg_socialshare_settings' );
|
|
|
|
$share_url = $post_url;
|
|
|
|
$share_title = $post_title;
|
|
$share_title = str_replace( ' ', '%20', $share_title );
|
|
$share_title = str_replace( '|', '%7C', $share_title );
|
|
$share_title = str_replace( '@', '%40', $share_title );
|
|
|
|
$share_image = isset( $attributes['data-poster'] ) ? $attributes['data-poster'] : '';
|
|
|
|
$share_buttons = array();
|
|
|
|
if ( isset( $socialshare_settings['services']['facebook'] ) ) {
|
|
$share_buttons[] = array(
|
|
'service' => 'facebook',
|
|
'url' => "https://www.facebook.com/sharer/sharer.php?u={$share_url}",
|
|
'icon' => 'aiovg-icon-facebook',
|
|
'text' => __( 'Facebook', 'all-in-one-video-gallery' )
|
|
);
|
|
}
|
|
|
|
if ( isset( $socialshare_settings['services']['twitter'] ) ) {
|
|
$share_buttons[] = array(
|
|
'service' => 'twitter',
|
|
'url' => "https://twitter.com/intent/tweet?text={$share_title}&url={$share_url}",
|
|
'icon' => 'aiovg-icon-twitter',
|
|
'text' => __( 'Twitter', 'all-in-one-video-gallery' )
|
|
);
|
|
}
|
|
|
|
if ( isset( $socialshare_settings['services']['linkedin'] ) ) {
|
|
$share_buttons[] = array(
|
|
'service' => 'linkedin',
|
|
'url' => "https://www.linkedin.com/shareArticle?url={$share_url}&title={$share_title}",
|
|
'icon' => 'aiovg-icon-linkedin',
|
|
'text' => __( 'Linkedin', 'all-in-one-video-gallery' )
|
|
);
|
|
}
|
|
|
|
if ( isset( $socialshare_settings['services']['pinterest'] ) ) {
|
|
$pinterest_url = "https://pinterest.com/pin/create/button/?url={$share_url}&description={$share_title}";
|
|
|
|
if ( ! empty( $share_image ) ) {
|
|
$pinterest_url .= "&media={$share_image}";
|
|
}
|
|
|
|
$share_buttons[] = array(
|
|
'service' => 'pinterest',
|
|
'url' => $pinterest_url,
|
|
'icon' => 'aiovg-icon-pinterest',
|
|
'text' => __( 'Pinterest', 'all-in-one-video-gallery' )
|
|
);
|
|
}
|
|
|
|
if ( isset( $socialshare_settings['services']['tumblr'] ) ) {
|
|
$tumblr_url = "https://www.tumblr.com/share/link?url={$share_url}&name={$share_title}";
|
|
|
|
$share_description = aiovg_get_excerpt( $post_id, 160, '', false );
|
|
if ( ! empty( $share_description ) ) {
|
|
$share_description = str_replace( ' ', '%20', $share_description );
|
|
$share_description = str_replace( '|', '%7C', $share_description );
|
|
$share_description = str_replace( '@', '%40', $share_description );
|
|
|
|
$tumblr_url .= "&description={$share_description}";
|
|
}
|
|
|
|
$share_buttons[] = array(
|
|
'service' => 'tumblr',
|
|
'url' => $tumblr_url,
|
|
'icon' => 'aiovg-icon-tumblr',
|
|
'text' => __( 'Tumblr', 'all-in-one-video-gallery' )
|
|
);
|
|
}
|
|
|
|
if ( isset( $socialshare_settings['services']['whatsapp'] ) ) {
|
|
if ( wp_is_mobile() ) {
|
|
$whatsapp_url = "whatsapp://send?text={$share_title} " . rawurlencode( $share_url );
|
|
} else {
|
|
$whatsapp_url = "https://api.whatsapp.com/send?text={$share_title} {$share_url}";
|
|
}
|
|
|
|
$share_buttons[] = array(
|
|
'service' => 'whatsapp',
|
|
'url' => $whatsapp_url,
|
|
'icon' => 'aiovg-icon-whatsapp',
|
|
'text' => __( 'WhatsApp', 'all-in-one-video-gallery' )
|
|
);
|
|
}
|
|
|
|
$share_buttons = apply_filters( 'aiovg_player_socialshare_buttons', $share_buttons );
|
|
if ( ! empty( $share_buttons ) ) {
|
|
$settings['share'] = 1;
|
|
}
|
|
}
|
|
|
|
// Embed
|
|
$has_embed = isset( $_GET['embed'] ) ? (int) $_GET['embed'] : isset( $player_settings['controls']['embed'] );
|
|
if ( $has_embed ) {
|
|
$protocol = ( ( ! empty( $_SERVER['HTTPS'] ) && $_SERVER['HTTPS'] != 'off' ) || $_SERVER['SERVER_PORT'] == 443 ) ? 'https://' : 'http://';
|
|
$current_url = $protocol . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
|
|
$current_url = aiovg_remove_query_arg( array( 'uid', 'autoadvance' ), $current_url );
|
|
|
|
$embed_code = sprintf(
|
|
'<div style="position:relative;padding-bottom:%s;height:0;overflow:hidden;"><iframe src="%s" title="%s" width="100%%" height="100%%" style="position:absolute;width:100%%;height:100%%;top:0px;left:0px;overflow:hidden" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>',
|
|
( isset( $_GET['ratio'] ) ? (float) $_GET['ratio'] : (float) $player_settings['ratio'] ) . '%',
|
|
esc_url( $current_url ),
|
|
esc_attr( $post_title )
|
|
);
|
|
|
|
$settings['embed'] = 1;
|
|
}
|
|
|
|
// Logo
|
|
if ( ! empty( $brand_settings ) ) {
|
|
$has_logo = ! empty( $brand_settings['logo_image'] ) ? (int) $brand_settings['show_logo'] : 0;
|
|
if ( $has_logo ) {
|
|
$settings['logo'] = array(
|
|
'image' => aiovg_sanitize_url( aiovg_resolve_url( $brand_settings['logo_image'] ) ),
|
|
'link' => ! empty( $brand_settings['logo_link'] ) ? esc_url_raw( $brand_settings['logo_link'] ) : 'javascript:void(0)',
|
|
'position' => sanitize_text_field( $brand_settings['logo_position'] ),
|
|
'margin' => ! empty( $brand_settings['logo_margin'] ) ? (int) $brand_settings['logo_margin'] : 15
|
|
);
|
|
}
|
|
|
|
$has_contextmenu = ! empty( $brand_settings['copyright_text'] ) ? 1 : 0;
|
|
if ( $has_contextmenu ) {
|
|
$settings['contextmenu'] = array(
|
|
'content' => apply_filters( 'aiovg_translate_strings', sanitize_text_field( $brand_settings['copyright_text'] ), 'copyright_text' )
|
|
);
|
|
}
|
|
}
|
|
|
|
$settings = apply_filters( 'aiovg_iframe_vidstack_player_settings', $settings );
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html translate="no">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="robots" content="noindex">
|
|
|
|
<?php if ( $post_id > 0 ) : ?>
|
|
<title><?php echo wp_kses_post( $post_title ); ?></title>
|
|
<link rel="canonical" href="<?php echo esc_url( $post_url ); ?>" />
|
|
<?php endif; ?>
|
|
|
|
<link rel="stylesheet" href="<?php echo AIOVG_PLUGIN_URL; ?>vendor/vidstack/plyr.css?v=3.7.8" />
|
|
|
|
<style type="text/css">
|
|
* {
|
|
font-family: Verdana, sans-serif;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'aiovg-icons';
|
|
src: url('<?php echo AIOVG_PLUGIN_URL; ?>public/assets/fonts/aiovg-icons.eot?2afx3z');
|
|
src: url('<?php echo AIOVG_PLUGIN_URL; ?>public/assets/fonts/aiovg-icons.eot?2afx3z#iefix') format('embedded-opentype'),
|
|
url('<?php echo AIOVG_PLUGIN_URL; ?>public/assets/fonts/aiovg-icons.ttf?2afx3z') format('truetype'),
|
|
url('<?php echo AIOVG_PLUGIN_URL; ?>public/assets/fonts/aiovg-icons.woff?2afx3z') format('woff'),
|
|
url('<?php echo AIOVG_PLUGIN_URL; ?>public/assets/fonts/aiovg-icons.svg?2afx3z#aiovg-icons') format('svg');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
[class^="aiovg-icon-"],
|
|
[class*=" aiovg-icon-"] {
|
|
text-transform: none;
|
|
line-height: 1;
|
|
color: #fff;
|
|
font-family: 'aiovg-icons' !important;
|
|
speak: none;
|
|
font-weight: normal;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
font-variant: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
.aiovg-icon-share:before {
|
|
content: "\ea82";
|
|
}
|
|
|
|
.aiovg-icon-facebook:before {
|
|
content: "\ea90";
|
|
}
|
|
|
|
.aiovg-icon-twitter:before {
|
|
content: "\e900";
|
|
}
|
|
|
|
.aiovg-icon-linkedin:before {
|
|
content: "\eaca";
|
|
}
|
|
|
|
.aiovg-icon-pinterest:before {
|
|
content: "\ead1";
|
|
}
|
|
|
|
.aiovg-icon-tumblr:before {
|
|
content: "\eab9";
|
|
}
|
|
|
|
.aiovg-icon-whatsapp:before {
|
|
content: "\ea93";
|
|
}
|
|
|
|
.aiovg-icon-close:before {
|
|
content: "\ea0f";
|
|
}
|
|
|
|
.aiovg-player .plyr {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.aiovg-player .plyr a,
|
|
.aiovg-player .plyr a:hover,
|
|
.aiovg-player .plyr a:focus {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.aiovg-player .plyr__ads .plyr__control--overlaid {
|
|
z-index: 999;
|
|
}
|
|
|
|
.aiovg-player .plyr__cues {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.aiovg-player .plyr__progress .plyr__tooltip {
|
|
max-width: fit-content;
|
|
}
|
|
|
|
.aiovg-player .plyr__share-embed-button {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 15px;
|
|
-webkit-transition: opacity .5s;
|
|
-moz-transition: opacity .5s;
|
|
-ms-transition: opacity .5s;
|
|
-o-transition: opacity .5s;
|
|
transition: opacity .5s;
|
|
opacity: 1;
|
|
z-index: 1;
|
|
border-radius: 2px;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
width: 35px;
|
|
height: 35px;
|
|
text-align: center;
|
|
line-height: 1;
|
|
}
|
|
|
|
.aiovg-player .plyr--hide-controls .plyr__share-embed-button {
|
|
opacity: 0;
|
|
}
|
|
|
|
.aiovg-player .plyr__share-embed-button:hover,
|
|
.aiovg-player .plyr__share-embed-button:focus {
|
|
background: #00B3FF;
|
|
}
|
|
|
|
.aiovg-player .plyr__share-embed-modal {
|
|
pointer-events: none;
|
|
display: flex;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
-webkit-transition: opacity .5s;
|
|
-moz-transition: opacity .5s;
|
|
-ms-transition: opacity .5s;
|
|
-o-transition: opacity .5s;
|
|
transition: opacity .5s;
|
|
opacity: 0;
|
|
z-index: 9;
|
|
background-color: #222;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.aiovg-player .plyr__share-embed-modal.fadein {
|
|
pointer-events: auto;
|
|
opacity: 1;
|
|
}
|
|
|
|
.aiovg-player .plyr__share-embed-modal-content {
|
|
width: 100%;
|
|
}
|
|
|
|
.aiovg-player .plyr__share-embed-modal-close-button {
|
|
display: block;
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 15px;
|
|
z-index: 9;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
width: 35px;
|
|
height: 35px;
|
|
text-align: center;
|
|
line-height: 1;
|
|
}
|
|
|
|
.aiovg-player .plyr__share-embed-modal-close-button:hover,
|
|
.aiovg-player .plyr__share-embed-modal-close-button:focus {
|
|
background: #00B3FF;
|
|
}
|
|
|
|
.aiovg-player .plyr__share {
|
|
text-align: center;
|
|
}
|
|
|
|
.aiovg-player .plyr__share-button {
|
|
display: inline-block;
|
|
margin: 2px;
|
|
border-radius: 2px;
|
|
width: 40px;
|
|
height: 40px;
|
|
vertical-align: middle;
|
|
line-height: 1;
|
|
}
|
|
|
|
.aiovg-player .plyr__share-button:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.aiovg-player .plyr__share-button-facebook {
|
|
background-color: #3B5996;
|
|
}
|
|
|
|
.aiovg-player .plyr__share-button-twitter {
|
|
background-color: #55ACEE;
|
|
}
|
|
|
|
.aiovg-player .plyr__share-button-linkedin {
|
|
background-color: #006699;
|
|
}
|
|
|
|
.aiovg-player .plyr__share-button-pinterest {
|
|
background-color: #C00117;
|
|
}
|
|
|
|
.aiovg-player .plyr__share-button-tumblr {
|
|
background-color: #28364B;
|
|
}
|
|
|
|
.aiovg-player .plyr__share-button-whatsapp {
|
|
background-color: #25d366;
|
|
}
|
|
|
|
.aiovg-player .plyr__share-button span {
|
|
line-height: 40px;
|
|
color: #fff;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.aiovg-player .plyr__embed {
|
|
margin: auto;
|
|
padding: 20px;
|
|
max-width: 720px;
|
|
}
|
|
|
|
.aiovg-player .plyr__embed label {
|
|
display: block;
|
|
margin: 0 0 7px 0;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
color: #fff;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.aiovg-player .plyr__embed input {
|
|
box-sizing: border-box;
|
|
border: 1px solid #fff;
|
|
border-radius: 1px;
|
|
background: #fff;
|
|
padding: 7px;
|
|
width: 100%;
|
|
line-height: 1;
|
|
color: #000;
|
|
}
|
|
|
|
.aiovg-player .plyr__embed input:focus {
|
|
border: 1px solid #fff;
|
|
}
|
|
|
|
.aiovg-player .plyr__logo {
|
|
-webkit-transition: opacity .5s;
|
|
-moz-transition: opacity .5s;
|
|
-ms-transition: opacity .5s;
|
|
-o-transition: opacity .5s;
|
|
transition: opacity .5s;
|
|
opacity: 1;
|
|
}
|
|
|
|
.aiovg-player .plyr--hide-controls .plyr__logo {
|
|
opacity: 0;
|
|
}
|
|
|
|
.aiovg-player .plyr__logo a {
|
|
position: absolute;
|
|
transition: opacity 0.1s;
|
|
opacity: 0.6;
|
|
z-index: 3;
|
|
line-height: 1;
|
|
}
|
|
|
|
.aiovg-player .plyr__logo a:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.aiovg-player .plyr__logo img {
|
|
max-width: 150px;
|
|
}
|
|
|
|
.aiovg-player .plyr__contextmenu {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 9999999999; /* make sure it shows on fullscreen */
|
|
margin: 0;
|
|
border-radius: 2px;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
padding: 0;
|
|
}
|
|
|
|
.aiovg-player .plyr__contextmenu-content {
|
|
margin: 0;
|
|
cursor: pointer;
|
|
padding: 8px 12px;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
color: #fff;
|
|
font-size: 11px;
|
|
}
|
|
</style>
|
|
|
|
<?php do_action( 'aiovg_iframe_vidstack_player_head', $settings, $attributes, $sources, $tracks ); ?>
|
|
</head>
|
|
<body class="aiovg-player">
|
|
<?php
|
|
// YouTube
|
|
if ( isset( $sources['youtube'] ) ) {
|
|
$video_id = aiovg_get_youtube_id_from_url( $sources['youtube']['src'] );
|
|
|
|
printf(
|
|
'<div id="%s" style="%s" data-plyr-provider="youtube" data-plyr-embed-id="%s" data-poster="%s"></div>',
|
|
esc_attr( $attributes['id'] ),
|
|
esc_attr( $attributes['style'] ),
|
|
esc_attr( $video_id ),
|
|
( isset( $attributes['data-poster'] ) ? esc_attr( $attributes['data-poster'] ) : '' )
|
|
);
|
|
}
|
|
|
|
// Vimeo
|
|
elseif ( isset( $sources['vimeo'] ) ) {
|
|
$video_id = aiovg_get_vimeo_id_from_url( $sources['vimeo']['src'] );
|
|
|
|
printf(
|
|
'<div id="%s" style="%s" data-plyr-provider="vimeo" data-plyr-embed-id="%s" data-poster="%s"></div>',
|
|
esc_attr( $attributes['id'] ),
|
|
esc_attr( $attributes['style'] ),
|
|
esc_attr( $video_id ),
|
|
( isset( $attributes['data-poster'] ) ? esc_attr( $attributes['data-poster'] ) : '' )
|
|
);
|
|
}
|
|
|
|
// HLS or Dash
|
|
elseif ( isset( $sources['hls'] ) || isset( $sources['dash'] ) ) {
|
|
printf( '<video %s></video>', aiovg_combine_video_attributes( $attributes ) );
|
|
}
|
|
|
|
// HTML5 Video
|
|
elseif ( ! empty( $sources ) ) {
|
|
printf( '<video %s>', aiovg_combine_video_attributes( $attributes ) );
|
|
|
|
// Video Sources
|
|
foreach ( $sources as $source ) {
|
|
printf(
|
|
'<source src="%s" type="%s" size="%d" />',
|
|
esc_attr( aiovg_resolve_url( $source['src'] ) ),
|
|
esc_attr( $source['type'] ),
|
|
( isset( $source['label'] ) ? (int) $source['label'] : '' )
|
|
);
|
|
}
|
|
|
|
// Video Tracks
|
|
foreach ( $tracks as $index => $track ) {
|
|
printf(
|
|
'<track kind="captions" src="%s" label="%s" srclang="%s" />',
|
|
esc_attr( aiovg_resolve_url( $track['src'] ) ),
|
|
esc_attr( $track['label'] ),
|
|
esc_attr( $track['srclang'] )
|
|
);
|
|
}
|
|
|
|
echo '</video>';
|
|
}
|
|
?>
|
|
|
|
<?php if ( isset( $settings['share'] ) || isset( $settings['embed'] ) ) : ?>
|
|
<div id="plyr__share-embed-modal" class="plyr__share-embed-modal" style="display: none;">
|
|
<div class="plyr__share-embed-modal-content">
|
|
<?php if ( isset( $settings['share'] ) ) : ?>
|
|
<!-- Share Buttons -->
|
|
<div class="plyr__share">
|
|
<?php
|
|
foreach ( $share_buttons as $button ) {
|
|
printf(
|
|
'<a href="%s" class="plyr__share-button plyr__share-button-%s" target="_blank"><span class="%s"></span><span class="plyr__sr-only">%s</span></a>',
|
|
esc_attr( $button['url'] ),
|
|
esc_attr( $button['service'] ),
|
|
esc_attr( $button['icon'] ),
|
|
esc_attr( $button['text'] )
|
|
);
|
|
}
|
|
?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php if ( isset( $settings['embed'] ) ) : ?>
|
|
<!-- Embed Code -->
|
|
<div class="plyr__embed">
|
|
<label for="plyr__embed-code-input"><?php esc_html_e( 'Paste this code in your HTML page', 'all-in-one-video-gallery' ); ?></label>
|
|
<input type="text" id="plyr__embed-code-input" value="<?php echo htmlspecialchars( $embed_code ); ?>" readonly />
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<!-- Close Button -->
|
|
<button type="button" id="plyr__share-embed-modal-close-button" class="plyr__controls__item plyr__control plyr__share-embed-modal-close-button aiovg-icon-close"><span class="plyr__sr-only">Close</span></button>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<script src="<?php echo AIOVG_PLUGIN_URL; ?>vendor/vidstack/plyr.polyfilled.js?v=3.7.8" type="text/javascript" defer></script>
|
|
|
|
<?php if ( isset( $sources['hls'] ) ) : ?>
|
|
<script src="<?php echo AIOVG_PLUGIN_URL; ?>vendor/vidstack/hls.min.js?v=1.4.3" type="text/javascript" defer></script>
|
|
<?php endif; ?>
|
|
|
|
<?php if ( isset( $sources['dash'] ) ) : ?>
|
|
<script src="<?php echo AIOVG_PLUGIN_URL; ?>vendor/vidstack/dash.all.min.js" type="text/javascript" defer></script>
|
|
<?php endif; ?>
|
|
|
|
<?php do_action( 'aiovg_iframe_vidstack_player_footer', $settings, $attributes, $sources, $tracks ); ?>
|
|
|
|
<script type="text/javascript">
|
|
'use strict';
|
|
|
|
/**
|
|
* Vars
|
|
*/
|
|
|
|
var settings = <?php echo json_encode( $settings ); ?>;
|
|
|
|
/**
|
|
* Helper Functions.
|
|
*/
|
|
|
|
function updateViewsCount() {
|
|
var xmlhttp;
|
|
|
|
if ( window.XMLHttpRequest ) {
|
|
xmlhttp = new XMLHttpRequest();
|
|
} else {
|
|
xmlhttp = new ActiveXObject( 'Microsoft.XMLHTTP' );
|
|
}
|
|
|
|
xmlhttp.onreadystatechange = function() {
|
|
if ( xmlhttp.readyState == 4 && xmlhttp.status == 200 && xmlhttp.responseText ) {
|
|
// console.log( xmlhttp.responseText );
|
|
}
|
|
}
|
|
|
|
xmlhttp.open( 'GET', '<?php echo admin_url( 'admin-ajax.php' ); ?>?action=aiovg_update_views_count&post_id=<?php echo $post_id; ?>&security=<?php echo wp_create_nonce( 'aiovg_ajax_nonce' ); ?>', true );
|
|
xmlhttp.send();
|
|
}
|
|
|
|
/**
|
|
* Init player.
|
|
*/
|
|
function initPlayer() {
|
|
var video = document.getElementById( 'player' );
|
|
var player = new Plyr( video, settings.player );
|
|
|
|
var plyr = document.querySelector( '.plyr' );
|
|
|
|
// Dispatch an event.
|
|
var customEvent = document.createEvent( 'CustomEvent' );
|
|
customEvent.initCustomEvent( 'player.init', false, false, { player: player, settings: settings } );
|
|
window.dispatchEvent( customEvent );
|
|
|
|
// On ready.
|
|
player.on( 'ready', function() {
|
|
// Share / Embed.
|
|
if ( settings.hasOwnProperty( 'share' ) || settings.hasOwnProperty( 'embed' ) ) {
|
|
var shareButton = document.createElement( 'button' );
|
|
shareButton.type = 'button';
|
|
shareButton.className = 'plyr__controls__item plyr__control plyr__share-embed-button aiovg-icon-share';
|
|
shareButton.innerHTML = '<span class="plyr__sr-only">Share</span>';
|
|
|
|
plyr.appendChild( shareButton );
|
|
|
|
var closeButton = document.getElementById( 'plyr__share-embed-modal-close-button' );
|
|
|
|
var modal = document.getElementById( 'plyr__share-embed-modal' );
|
|
plyr.appendChild( modal );
|
|
modal.style.display = '';
|
|
|
|
// Show Modal.
|
|
var wasPlaying = false;
|
|
|
|
shareButton.addEventListener( 'click', function() {
|
|
if ( player.playing ) {
|
|
wasPlaying = true;
|
|
player.pause();
|
|
} else {
|
|
wasPlaying = false;
|
|
}
|
|
|
|
shareButton.style.display = 'none';
|
|
modal.className += ' fadein';
|
|
});
|
|
|
|
// Hide Modal.
|
|
closeButton.addEventListener( 'click', function() {
|
|
if ( wasPlaying ) {
|
|
player.play();
|
|
}
|
|
|
|
modal.className = modal.className.replace( ' fadein', '' );
|
|
|
|
setTimeout(function() {
|
|
shareButton.style.display = '';
|
|
}, 500);
|
|
});
|
|
|
|
// Copy Embedcode.
|
|
if ( settings.hasOwnProperty( 'embed' ) ) {
|
|
document.getElementById( 'plyr__embed-code-input' ).addEventListener( 'focus', function() {
|
|
this.select();
|
|
document.execCommand( 'copy' );
|
|
});
|
|
}
|
|
}
|
|
|
|
// Logo
|
|
if ( settings.hasOwnProperty( 'logo' ) ) {
|
|
var style = 'bottom:50px; left:' + settings.logo.margin +'px;';
|
|
|
|
switch ( settings.logo.position ) {
|
|
case 'topleft':
|
|
style = 'top:' + settings.logo.margin +'px; left:' + settings.logo.margin +'px;';
|
|
break;
|
|
|
|
case 'topright':
|
|
style = 'top:' + settings.logo.margin +'px; right:' + settings.logo.margin +'px;';
|
|
break;
|
|
|
|
case 'bottomright':
|
|
style = 'bottom:50px; right:' + settings.logo.margin +'px;';
|
|
break;
|
|
}
|
|
|
|
var logo = document.createElement( 'div' );
|
|
logo.className = 'plyr__logo';
|
|
logo.innerHTML = '<a href="' + settings.logo.link + '" style="' + style + '" target="_blank"><img src="' + settings.logo.image + '" alt="" /><span class="plyr__sr-only">Logo</span></a>';
|
|
|
|
plyr.appendChild( logo );
|
|
}
|
|
});
|
|
|
|
// Update views count.
|
|
var viewed = false;
|
|
|
|
player.on( 'playing', function() {
|
|
if ( viewed ) return false;
|
|
viewed = true;
|
|
|
|
if ( settings.post_type == 'aiovg_videos' ) {
|
|
updateViewsCount();
|
|
}
|
|
});
|
|
|
|
// On ended.
|
|
var hasMessageSent = false;
|
|
|
|
player.on( 'ended', function() {
|
|
plyr.className += ' plyr--stopped';
|
|
|
|
// Autoplay next video.
|
|
if ( settings.hasOwnProperty( 'autoadvance' ) ) {
|
|
if ( ! hasMessageSent ) {
|
|
hasMessageSent = true;
|
|
|
|
window.parent.postMessage({
|
|
message: 'aiovg-video-ended',
|
|
id: settings.uid
|
|
}, '*');
|
|
}
|
|
}
|
|
});
|
|
|
|
// HLS
|
|
if ( settings.hasOwnProperty( 'hls' ) ) {
|
|
const hls = new Hls();
|
|
hls.loadSource( settings.hls );
|
|
hls.attachMedia( video );
|
|
window.hls = hls;
|
|
|
|
// Handle changing captions.
|
|
player.on( 'languagechange', () => {
|
|
setTimeout( () => hls.subtitleTrack = player.currentTrack, 50 );
|
|
});
|
|
}
|
|
|
|
// Dash
|
|
if ( settings.hasOwnProperty( 'dash' ) ) {
|
|
const dash = dashjs.MediaPlayer().create();
|
|
dash.initialize( video, settings.dash, true );
|
|
window.dash = dash;
|
|
}
|
|
|
|
// Custom ContextMenu.
|
|
if ( settings.hasOwnProperty( 'contextmenu' ) ) {
|
|
var contextmenu = document.createElement( 'div' );
|
|
contextmenu.className = 'plyr__contextmenu';
|
|
contextmenu.innerHTML = '<div class="plyr__contextmenu-content">' + settings.contextmenu.content +' </div>';
|
|
contextmenu.style.display = 'none';
|
|
|
|
plyr.appendChild( contextmenu );
|
|
|
|
var timeoutHandler = '';
|
|
|
|
document.addEventListener( 'contextmenu', function( event ) {
|
|
if ( event.keyCode == 3 || event.which == 3 ) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
var width = contextmenu.offsetWidth,
|
|
height = contextmenu.offsetHeight,
|
|
x = event.pageX,
|
|
y = event.pageY,
|
|
doc = document.documentElement,
|
|
scrollLeft = ( window.pageXOffset || doc.scrollLeft ) - ( doc.clientLeft || 0 ),
|
|
scrollTop = ( window.pageYOffset || doc.scrollTop ) - ( doc.clientTop || 0 ),
|
|
left = x + width > window.innerWidth + scrollLeft ? x - width : x,
|
|
top = y + height > window.innerHeight + scrollTop ? y - height : y;
|
|
|
|
contextmenu.style.display = '';
|
|
contextmenu.style.left = left + 'px';
|
|
contextmenu.style.top = top + 'px';
|
|
|
|
clearTimeout( timeoutHandler );
|
|
|
|
timeoutHandler = setTimeout(function() {
|
|
contextmenu.style.display = 'none';
|
|
}, 1500);
|
|
}
|
|
});
|
|
|
|
if ( settings.hasOwnProperty( 'logo' ) ) {
|
|
contextmenu.addEventListener( 'click', function() {
|
|
top.window.location.href = settings.logo.link;
|
|
});
|
|
}
|
|
|
|
document.addEventListener( 'click', function() {
|
|
contextmenu.style.display = 'none';
|
|
});
|
|
}
|
|
}
|
|
|
|
document.addEventListener( 'DOMContentLoaded', function() {
|
|
initPlayer();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|