为wordpress添加dplayer的支持

dplayer是一个播放器，目前还在学习研究中，正如欢迎来到小秦的全新个人网站！文章中所展示的那样，尝试做了对接，在dplayer文档中，存在wordpress生态下的插件分享，但是看上去很久没更新了，我并未尝试，而是采用了wordpress的简码功能，尝试实现，效果：

其代码实际为：

[dplayer url="https://media.cdn.qyh0214.com/wow/wyzz.mp4"]

对接的方式是在主题的function.php中加入如下代码：

<?php
// 注册并加载DPlayer资源
function dplayer_enqueue_scripts() {
    // 注册DPlayer JS
    wp_register_script('dplayer', 'https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'dplayer_enqueue_scripts');

// DPlayer短代码处理函数
function dplayer_shortcode($atts) {
    // 确保加载DPlayer脚本
    wp_enqueue_script('dplayer');

    // 生成唯一ID
    $player_id = 'dplayer-' . uniqid();

    // 默认参数
    $default_atts = array(
        'url' => '',
        'autoplay' => false,
        'theme' => '#7E57C2',
        'loop' => false,
        'lang' => 'zh-cn',
        'screenshot' => false,
        'hotkey' => true,
        'preload' => 'auto',
        'volume' => 0.7,
        'mutex' => true,
        'width' => '100%',
        'height' => '', // 改为空，让CSS控制
        'poster' => '',
        'subtitle' => '',
        'subtitle_type' => 'webvtt',
        'ratio' => '16:9', // 新增宽高比参数
    );

    // 解析短代码属性
    $atts = shortcode_atts($default_atts, $atts, 'dplayer');

    if (empty($atts['url'])) {
        return '<div style="color: red; padding: 10px; border: 1px solid red;">DPlayer错误：请提供视频URL地址</div>';
    }

    // 准备配置（注意：这里不包含 container）
    $config = array(
        'video' => array(
            'url' => $atts['url'],
        ),
        'autoplay' => (bool) $atts['autoplay'],
        'theme' => $atts['theme'],
        'loop' => (bool) $atts['loop'],
        'lang' => $atts['lang'],
        'screenshot' => (bool) $atts['screenshot'],
        'hotkey' => (bool) $atts['hotkey'],
        'preload' => $atts['preload'],
        'volume' => (float) $atts['volume'],
        'mutex' => (bool) $atts['mutex'],
    );

    if (!empty($atts['poster'])) {
        $config['video']['pic'] = $atts['poster'];
    }

    if (!empty($atts['subtitle'])) {
        $config['subtitle'] = array(
            'url' => $atts['subtitle'],
            'type' => $atts['subtitle_type'],
        );
    }

    // 创建初始化脚本 - 修正 container 的写法
    $init_script = "
        (function() {
            function initDPlayer() {
                if (typeof DPlayer !== 'undefined') {
                    var container = document.getElementById('" . esc_js($player_id) . "');
                    if (container) {
                        var config = " . wp_json_encode($config) . ";
                        config.container = container;
                        new DPlayer(config);
                    }
                } else {
                    setTimeout(initDPlayer, 100);
                }
            }

            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initDPlayer);
            } else {
                initDPlayer();
            }
        })();
    ";

    // 添加内联脚本
    wp_add_inline_script('dplayer', $init_script);

    // 处理宽高比
    $container_classes = 'dplayer-container';
    $style_attrs = '';

    // 如果设置了具体的height值，使用固定高度
    if (!empty($atts['height'])) {
        $style_attrs = sprintf(
            'width: %s; height: %s; max-width: 100%%;',
            esc_attr($atts['width']),
            esc_attr($atts['height'])
        );
    } 
    // 否则使用宽高比
    else {
        $ratio = $atts['ratio'];
        $container_classes .= ' dplayer-responsive';

        // 解析宽高比 (支持格式: "16:9", "4:3", "21:9", "1:1" 等)
        if (strpos($ratio, ':') !== false) {
            list($width_ratio, $height_ratio) = explode(':', $ratio, 2);
            if (is_numeric($width_ratio) && is_numeric($height_ratio) && $height_ratio > 0) {
                $padding_percentage = ($height_ratio / $width_ratio) * 100;
            } else {
                $padding_percentage = 56.25; // 16:9 的默认值
            }
        } else {
            $padding_percentage = 56.25; // 16:9 的默认值
        }

        // 添加响应式容器和内层播放器
        return sprintf(
            '<div class="%s" style="width: %s; max-width: 100%%; position: relative; padding-bottom: %.2f%%;">' .
            '<div id="%s" style="position: absolute; top: 0; left: 0; width: 100%%; height: 100%%;"></div>' .
            '</div>',
            esc_attr($container_classes),
            esc_attr($atts['width']),
            $padding_percentage,
            esc_attr($player_id)
        );
    }

    // 返回播放器容器（固定高度版本）
    return sprintf(
        '<div id="%s" class="%s" style="%s"></div>',
        esc_attr($player_id),
        esc_attr($container_classes),
        $style_attrs
    );
}
add_shortcode('dplayer', 'dplayer_shortcode');

// 可选：添加一些CSS样式来美化播放器
function dplayer_enqueue_styles() {
    $custom_css = '
        .dplayer-responsive {
            display: block;
            overflow: hidden;
            background: #000;
        }
        .dplayer-responsive > div {
            border-radius: 4px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }
    ';
    wp_add_inline_style('wp-block-library', $custom_css);
}
add_action('wp_enqueue_scripts', 'dplayer_enqueue_styles');
?>

这样在文章中添加形如上文的简码就可以实现内嵌播放器并播放啦~

当然，很多wordpress主题、插件甚至原生就可以直接使用video标签实现播放，但是引用外部的一些插件组件，可能会提供更加多的功能和可定制化。

以上部分内容使用人工智能辅助生成或改进