怎样在 vuepress 中使用 dplayer

[MonoLogueChi]

有没有懂 vuepress 的大佬能指点我一下啊

需求

我最近需要在 vuepress 页面中插入视频，暂定使用 dplayer，

• 需要使用弹幕功能（非刚需，但是最好有）
• 提供 api 可以切换视频，可以做成换 P 的功能（因为有好几期视频，想放在一起）

如果有能满足上面功能的其他播放器，也麻烦大佬提醒告知一下。

现状

经过两天的折腾，使用了 vue-dplayer（也尝试过使用最新版本的 dplayer 自己打包，结果一样），在 vuepress dev docs 时可以正常使用，本地预览网页正常，但是在使用 vuepress build docs 命令生成静态文件时，会报错，报错图片如下：

现在页面内使用代码如下：

<template>
  <div id="app">    
    <d-player :options="options" ref="player">
    </d-player>    
  </div>
</template>

<script>
import Vue from 'vue';
import VueDPlayer from 'vue-dplayer'
import 'vue-dplayer/dist/vue-dplayer.css'

Vue.use(VueDPlayer)

export default {    
    data() {
        return {
            options: {
                video: {
                url: '',
                },
                autoplay: false,
            },
            player: null,
        }
    },
    mounted() {
        this.player = this.$refs.player.dp
    }
}
</script>

已解决，后面又自己做了一个插件，可以解决这个问题 https://github.com/u2sb/vuepress-plugin-smplayer

[Trim21]

不懂 vuepress 和 vue-dplayer 但是用过 vue+webpack+dplayer, 我是这么实现的

添加一个 init()的 method 在 init 里实例化一个 dplayer
然后 watch '$route.params.episode' 如果有改变就调用 this.init()

https://github.com/BGmi/BGmi-frontend/blob/master/src/pages/Player.vue

[kslr]

直接用原版调用，托管事件就可以了。
你可以看 Vue-dp* 的源码

[Trim21]

@Trim21 #1 啊 不过这么做会引起内存泄漏, 但是只是要跑起来的话是足够了, 换 p 正确的方式应该用 dp.switchVideo(video, danmaku)而不是重新 new 一个

[MonoLogueChi]

@Trim21 换 p 和弹幕都没写呢，现在是跑不起来，build 生成静态文件直接报错啊

[Trim21]

@MonoLogueChi #4 应该是这个 issue https://github.com/vuejs/vuepress/issues/791

[MonoLogueChi]

@Trim21 我有试过<ClientOnly>标签，但是依旧报错

[Trim21]

@MonoLogueChi #6 那后面说的异步加载模块你做了吗.....

[MonoLogueChi]

@Trim21 #7 尝试过，但是 `import('vue-dplayer').then(module => { })`里面就不知道该怎么写了，es 什么的都是一脸懵逼

[chungzhao]

路过路过......装作不知情人士