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:
2026-07-21 08:35:59 +08:00
parent 769976e54a
commit 08e63c07f4
2 changed files with 35 additions and 19 deletions
+5 -1
View File
@@ -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');
+30 -18
View File
@@ -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>