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:
kate522 committed 2026-07-21 08:35:59 +08:00
1 parent 769976e54a
commit 08e63c07f4
2 files changed
+35 -19

No files matched your search

+5 -1
View File
@@ -65,6 +65,8 @@
this.poster = this.el.dataset.poster || ''; this.poster = this.el.dataset.poster || '';
this.type = this.el.dataset.type || detectType(this.src); this.type = this.el.dataset.type || detectType(this.src);
this.autoplay = this.el.dataset.autoplay === 'true'; 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(); this.init();
} }
@@ -76,8 +78,10 @@
this.video.controls = true; this.video.controls = true;
this.video.playsInline = true; this.video.playsInline = true;
this.video.preload = this.autoplay ? 'auto' : 'metadata'; 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; 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 // Play overlay
this.overlay = document.createElement('div'); this.overlay = document.createElement('div');
+30 -18
View File
@@ -1,6 +1,6 @@
<?php <?php
/** /**
* Video player widget (zibll dplayer lite via native video / oEmbed). * Video player widget (zibll dplayer lite via data-aksrt-video + embed).
* *
* @package AKSRT * @package AKSRT
*/ */
@@ -15,7 +15,10 @@ class WidgetVideoPlayer extends \WP_Widget {
parent::__construct( parent::__construct(
'aksrt_video_player', 'aksrt_video_player',
__('视频播放器', 'aksrt'), __('视频播放器', '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'] ?? ''); $aspect = (string) ($instance['aspect_ratio'] ?? '');
if ($video_url === '') { 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; return;
} }
@@ -47,29 +56,32 @@ class WidgetVideoPlayer extends \WP_Widget {
} }
$embed = $this->get_embed_url($video_url); $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) . '%">'; echo '<div class="' . esc_attr($cls) . '" style="padding-bottom:' . esc_attr((string) $scale) . '%">';
if ($embed !== '') { if ($embed !== '') {
$src = $embed; $src = $embed;
if ($autoplay) { if ($autoplay) {
$src = add_query_arg(['autoplay' => '1', 'mute' => '1'], $src); $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 { } else {
$attrs = ' controls playsinline'; // Shared player stack (assets/js/video-player.js).
if ($autoplay) { $type = 'mp4';
$attrs .= ' autoplay'; if (preg_match('/\.m3u8(\?|$)/i', $video_url)) {
$type = 'hls';
} elseif (preg_match('/\.flv(\?|$)/i', $video_url)) {
$type = 'flv';
} }
if ($loop) { printf(
$attrs .= ' loop'; '<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),
if ($muted) { esc_attr($type),
$attrs .= ' muted'; $poster !== '' ? ' data-poster="' . esc_url($poster) . '"' : '',
} $autoplay ? ' data-autoplay="true"' : '',
if ($poster !== '') { $loop ? ' data-loop="true"' : '',
$attrs .= ' poster="' . esc_url($poster) . '"'; $muted ? ' data-muted="true"' : ''
} );
echo '<video' . $attrs . '><source src="' . esc_url($video_url) . '"></video>';
} }
echo '</div>'; echo '</div>';
@@ -97,7 +109,7 @@ class WidgetVideoPlayer extends \WP_Widget {
</label> </label>
</p> </p>
<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'] ?? '')); ?>"> <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> </label>
</p> </p>