V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
MonoLogueChi
V2EX  ›  问与答

怎样在 vuepress 中使用 dplayer

  •  
  •   MonoLogueChi · 2018-11-04 20:23:00 +08:00 · 3360 次点击
    这是一个创建于 1971 天前的主题,其中的信息可能已经有所发展或是发生改变。

    有没有懂 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>
    
    
    第 1 条附言  ·  2022-03-29 23:05:20 +08:00

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

    9 条回复    2018-11-07 11:55:20 +08:00
    Trim21
        1
    Trim21  
       2018-11-04 20:42:54 +08:00   ❤️ 1
    不懂 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
        2
    kslr  
       2018-11-04 20:46:43 +08:00 via Android
    直接用原版调用,托管事件就可以了。
    你可以看 Vue-dp* 的源码
    Trim21
        3
    Trim21  
       2018-11-04 20:47:57 +08:00
    @Trim21 #1 啊 不过这么做会引起内存泄漏, 但是只是要跑起来的话是足够了, 换 p 正确的方式应该用 dp.switchVideo(video, danmaku)而不是重新 new 一个
    MonoLogueChi
        4
    MonoLogueChi  
    OP
       2018-11-04 21:13:32 +08:00 via Android
    @Trim21 换 p 和弹幕都没写呢,现在是跑不起来,build 生成静态文件直接报错啊
    Trim21
        5
    Trim21  
       2018-11-04 21:27:04 +08:00
    MonoLogueChi
        6
    MonoLogueChi  
    OP
       2018-11-04 22:02:55 +08:00 via Android
    @Trim21 我有试过<ClientOnly>标签,但是依旧报错
    Trim21
        7
    Trim21  
       2018-11-04 22:08:44 +08:00   ❤️ 1
    @MonoLogueChi #6 那后面说的异步加载模块你做了吗.....
    MonoLogueChi
        8
    MonoLogueChi  
    OP
       2018-11-04 22:56:10 +08:00
    @Trim21 #7 尝试过,但是 `import('vue-dplayer').then(module => { })`里面就不知道该怎么写了,es 什么的都是一脸懵逼
    chungzhao
        9
    chungzhao  
       2018-11-07 11:55:20 +08:00
    路过路过......装作不知情人士
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3123 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 12:42 · PVG 20:42 · LAX 05:42 · JFK 08:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.