基于Vue JS主题使用WP REST v2时，内置音视频播放列表无法正常工作

我之前也遇到过一模一样的坑！WP内置的音视频播放列表本质上依赖MediaElement.js和WordPress自带的WPPlaylistView初始化逻辑，而通过REST API拿到的只是静态HTML，加上Vue的异步DOM更新机制，直接初始化很容易踩时机不对的问题。下面是亲测有效的解决步骤：

1. 确保加载必要的WP依赖资源 #

播放列表要正常工作，必须先加载WP自带的几个核心文件，顺序不能乱：

• 样式文件：wp-mediaelement.css（控制播放控件样式）
• 脚本文件：wp-mediaelement.js（MediaElement.js的WP适配版）、wp-playlist.js（播放列表的核心逻辑）

你可以通过WP后端的wp_enqueue_script/wp_enqueue_style获取这些资源的正确URL，然后在Vue项目中引入（注意跨域问题，如果Vue和WP不在同域名，需要在WP端配置CORS允许资源访问）。

2. 抓住Vue DOM更新的正确时机初始化 #

Vue的v-html渲染是异步的，直接在mounted里执行初始化代码，可能DOM还没更新完成。必须用$nextTick或者监听内容变化后再执行初始化：

<template>
  <div ref="playlistWrap" v-html="wpPostContent"></div>
</template>

<script>
export default {
  data() {
    return {
      wpPostContent: ''
    }
  },
  async mounted() {
    // 模拟获取WP REST API内容
    const res = await fetch('你的WP文章REST接口地址');
    const postData = await res.json();
    this.wpPostContent = postData.content.rendered;
    
    // 等待DOM渲染完成再初始化播放列表
    this.$nextTick(() => {
      this.initWPPlaylists();
    });
  },
  methods: {
    initWPPlaylists() {
      // 先检查依赖是否都加载完成
      if (typeof WPPlaylistView === 'undefined' || typeof jQuery === 'undefined') {
        console.error('WP播放列表依赖资源未加载');
        return;
      }

      // 只初始化未被处理过的播放列表，避免重复创建实例
      jQuery(this.$refs.playlistWrap)
        .find('.wp-playlist:not(.wp-playlist-initialized)')
        .each(function() {
          // 添加标记防止重复初始化
          jQuery(this).addClass('wp-playlist-initialized');
          // 正确初始化WPPlaylistView
          new WPPlaylistView({ el: this });
        });
    }
  },
  // 监听内容变化，比如切换文章时重新初始化
  watch: {
    wpPostContent(newVal) {
      if (newVal) {
        this.$nextTick(() => {
          this.initWPPlaylists();
        });
      }
    }
  }
}
</script>

3. 额外排查点 #

• 检查WP返回的HTML结构：确保content.rendered里的播放列表HTML包含data-wp-playlist等必要属性，这些是WPPlaylistView识别播放列表的关键。
• 避免Vue过滤属性：如果你的项目用了全局的v-html过滤规则，不要移除播放列表相关的class和data-*属性。
• 冲突排查：如果项目里引入了其他音频播放库，可能和MediaElement.js冲突，可以暂时禁用其他库测试。

内容的提问来源于stack exchange，提问作者Isu