feat(widgets): VideoPlayer data-aksrt-video shared player shell
Route non-embed videos through video-player.js with poster/type/autoplay loop/muted attrs; keep platform iframe embeds; admin empty warning.
This commit is contained in:
@@ -65,6 +65,8 @@
|
||||
this.poster = this.el.dataset.poster || '';
|
||||
this.type = this.el.dataset.type || detectType(this.src);
|
||||
this.autoplay = this.el.dataset.autoplay === 'true';
|
||||
this.loop = this.el.dataset.loop === 'true';
|
||||
this.muted = this.el.dataset.muted === 'true' || this.autoplay;
|
||||
this.init();
|
||||
}
|
||||
|
||||
@@ -76,8 +78,10 @@
|
||||
this.video.controls = true;
|
||||
this.video.playsInline = true;
|
||||
this.video.preload = this.autoplay ? 'auto' : 'metadata';
|
||||
if (this.loop) this.video.loop = true;
|
||||
if (this.muted) this.video.muted = true;
|
||||
if (this.poster) this.video.poster = this.poster;
|
||||
this.video.style.cssText = 'display:block;width:100%;height:auto;max-height:70vh;';
|
||||
this.video.style.cssText = 'display:block;width:100%;height:100%;object-fit:contain;max-height:none;';
|
||||
|
||||
// Play overlay
|
||||
this.overlay = document.createElement('div');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<?php
|
||||
/**
|
||||
* Video player widget (zibll dplayer lite via native video / oEmbed).
|
||||
* Video player widget (zibll dplayer lite via data-aksrt-video + embed).
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
@@ -15,7 +15,10 @@ class WidgetVideoPlayer extends \WP_Widget {
|
||||
parent::__construct(
|
||||
'aksrt_video_player',
|
||||
__('视频播放器', 'aksrt'),
|
||||
['description' => __('侧栏/流体区嵌入视频播放器。', 'aksrt')]
|
||||
[
|
||||
'description' => __('侧栏/流体区嵌入视频(共享 aksrt-video 播放器)。', 'aksrt'),
|
||||
'classname' => 'widget_aksrt_video_player',
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
@@ -31,6 +34,12 @@ class WidgetVideoPlayer extends \WP_Widget {
|
||||
$aspect = (string) ($instance['aspect_ratio'] ?? '');
|
||||
|
||||
if ($video_url === '') {
|
||||
if (current_user_can('manage_options')) {
|
||||
echo $args['before_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||
echo '<div class="c-red muted-box mb20"><b>' . esc_html__('视频播放器:', 'aksrt') . '</b>' .
|
||||
esc_html__('请配置视频 URL 或移出该模块', 'aksrt') . '</div>';
|
||||
echo $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -47,29 +56,32 @@ class WidgetVideoPlayer extends \WP_Widget {
|
||||
}
|
||||
|
||||
$embed = $this->get_embed_url($video_url);
|
||||
$cls = 'aksrt-video-widget' . ($hide_controller ? ' controller-hide' : '');
|
||||
$cls = 'aksrt-video-widget relative-h radius8' . ($hide_controller ? ' controller-hide' : '');
|
||||
echo '<div class="' . esc_attr($cls) . '" style="padding-bottom:' . esc_attr((string) $scale) . '%">';
|
||||
|
||||
if ($embed !== '') {
|
||||
$src = $embed;
|
||||
if ($autoplay) {
|
||||
$src = add_query_arg(['autoplay' => '1', 'mute' => '1'], $src);
|
||||
}
|
||||
echo '<iframe src="' . esc_url($src) . '" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe>';
|
||||
echo '<iframe class="aksrt-video-widget__frame" src="' . esc_url($src) . '" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe>';
|
||||
} else {
|
||||
$attrs = ' controls playsinline';
|
||||
if ($autoplay) {
|
||||
$attrs .= ' autoplay';
|
||||
// Shared player stack (assets/js/video-player.js).
|
||||
$type = 'mp4';
|
||||
if (preg_match('/\.m3u8(\?|$)/i', $video_url)) {
|
||||
$type = 'hls';
|
||||
} elseif (preg_match('/\.flv(\?|$)/i', $video_url)) {
|
||||
$type = 'flv';
|
||||
}
|
||||
if ($loop) {
|
||||
$attrs .= ' loop';
|
||||
}
|
||||
if ($muted) {
|
||||
$attrs .= ' muted';
|
||||
}
|
||||
if ($poster !== '') {
|
||||
$attrs .= ' poster="' . esc_url($poster) . '"';
|
||||
}
|
||||
echo '<video' . $attrs . '><source src="' . esc_url($video_url) . '"></video>';
|
||||
printf(
|
||||
'<div class="aksrt-video aksrt-video-widget__player" data-aksrt-video data-src="%s" data-type="%s"%s%s%s%s></div>',
|
||||
esc_url($video_url),
|
||||
esc_attr($type),
|
||||
$poster !== '' ? ' data-poster="' . esc_url($poster) . '"' : '',
|
||||
$autoplay ? ' data-autoplay="true"' : '',
|
||||
$loop ? ' data-loop="true"' : '',
|
||||
$muted ? ' data-muted="true"' : ''
|
||||
);
|
||||
}
|
||||
echo '</div>';
|
||||
|
||||
@@ -97,7 +109,7 @@ class WidgetVideoPlayer extends \WP_Widget {
|
||||
</label>
|
||||
</p>
|
||||
<p>
|
||||
<label><?php esc_html_e('视频 URL', 'aksrt'); ?>
|
||||
<label><?php esc_html_e('视频 URL(mp4/m3u8/flv 或 YouTube/B站/腾讯)', 'aksrt'); ?>
|
||||
<input class="widefat" type="url" name="<?php echo esc_attr($this->get_field_name('video_url')); ?>" value="<?php echo esc_attr((string) ($instance['video_url'] ?? '')); ?>">
|
||||
</label>
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user