Giter Club home page Giter Club logo

Comments (16)

dixyes avatar dixyes commented on June 23, 2024

或许你可以在最上面的div里加入width和height属性?
用rawtag:

{% raw %}
<div id="player1" width="233" height="233" class="dplayer"></div>
<script src="dist/DPlayer.min.js"></script><!-- use your path -->
<script>
var option = {
    element: document.getElementById('player1'),                       // Optional, player element
    autoplay: false,                                                   // Optional, autoplay video, not supported by mobile browsers
    theme: '#FADFA3',                                                  // Optional, theme color, default: #b7daff
    loop: true,                                                        // Optional, loop play music, default: true
    lang: 'zh',                                                        // Optional, language, `zh` for Chinese, `en` for English, default: Navigator language
    screenshot: true,                                                  // Optional, enable screenshot function, default: false, NOTICE: if set it to true, video and video poster must enable Cross-Origin
    hotkey: true,                                                      // Optional, binding hot key, including left right and Space, default: true
    preload: 'auto',                                                   // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'auto'
    video: {                                                           // Required, video info
        url: '若能绽放光芒.mp4',                                         // Required, video url
        pic: '若能绽放光芒.png'                                          // Optional, music picture
    },
    danmaku: {                                                         // Optional, showing danmaku, ignore this option to hide danmaku
        id: '9E2E3368B56CDBB4',                                        // Required, danmaku id, NOTICE: it must be unique, can not use these in your new player: `https://dplayer.daoapp.io/list`
        api: 'https://dplayer.daoapp.io/',                             // Required, danmaku api
        token: 'tokendemo',                                            // Optional, danmaku token for api
        maximum: 1000                                                  // Optional, maximum quantity of danmaku
    }
}
var dp = new DPlayer(option);
</script>
{% endraw %}

未测试 如果可行我回去丢到选项里(还在外面 爪机不方便

from hexo-tag-dplayer.

youngkaaa avatar youngkaaa commented on June 23, 2024

我按照你讲的操作了,可是没有效果,直接视频就不出现了、

我猜是这句话的原因:

<script src="dist/DPlayer.min.js"></script><!-- use your path -->

这个.js是要我下载到本地hexo source 中去吗? (原谅我对js并不是很懂)

from hexo-tag-dplayer.

dixyes avatar dixyes commented on June 23, 2024

@youngkaaa 这个就是你的dplayer的js的路径
比如插件默认在 /assets/js/DPlayer.min.js
你不需要专门下载 如果已经安装了hexo-tag-dplayer,直接在node_modules文件夹找到dplayer里面的dist里的js就行(带不带min无所谓),把他丢到source,然后使用能访问的路径
我这里不太好测试。。。求反馈效果

from hexo-tag-dplayer.

youngkaaa avatar youngkaaa commented on June 23, 2024

image

上面的是 .md 中的写法

下面是我的项目结构:

image

其中:是上面的 .md 文件中使用了 下面的 /dist/中的 DPlayer.min.js (用箭头标示出来了)

在运行起来是,video的那个框被没有显示出来,就像 标签中的没有生效一样

from hexo-tag-dplayer.

dixyes avatar dixyes commented on June 23, 2024

为何是../。。。
应该是dist/DPlayer.min.js或者/dist/DPlayer.min.js

tag的src属性是http的路径,不存在../ ./这种的,xxx,/xxx就是domain/xxx,//xxx.xxx/xxx就是http(s)://xxx.xxx/xxx
我还是自己试下吧,但我没有特定长宽的视频源。。。可能效果不一样

from hexo-tag-dplayer.

youngkaaa avatar youngkaaa commented on June 23, 2024

还是没有起作用 。
而对于使用 ../... 写法 是参照了下面这个的写法:
image

from hexo-tag-dplayer.

dixyes avatar dixyes commented on June 23, 2024

我自己测试发现改div似乎没啥用,需要改video元素,那个就不是我的修改范围了,转发issue到DPlayer好咯

https://github.com/DIYgod/DPlayer/issues/25

from hexo-tag-dplayer.

youngkaaa avatar youngkaaa commented on June 23, 2024

好的 我会继续关注的 谢谢

from hexo-tag-dplayer.

DIYgod avatar DIYgod commented on June 23, 2024

video是根据视频自适应的,是不是你视频太高了啊,给个链接看看

from hexo-tag-dplayer.

youngkaaa avatar youngkaaa commented on June 23, 2024

对,是高度过高。
第三个视频开始往下好几个

from hexo-tag-dplayer.

DIYgod avatar DIYgod commented on June 23, 2024

因为你的视频太高了啊。。。

一定要的话用css限制一下最外层的宽度

@dixyes 这个不好在DPlayer里面做,可以自己用css做适配,就是设置最外层那个.dplayer的宽高

from hexo-tag-dplayer.

dixyes avatar dixyes commented on June 23, 2024

@DIYgod 我又不会css= = 具体怎么做写出来呗,我试试

from hexo-tag-dplayer.

DIYgod avatar DIYgod commented on June 23, 2024

比如设置id是dplayer1的播放器的高宽为100px:

#dplayer1 {
height: 100px;
width: 100px;
}

from hexo-tag-dplayer.

dixyes avatar dixyes commented on June 23, 2024

@DIYgod 奇怪 刚刚不行现在好了。。。
我直接用内嵌style了 待我丢进插件

啊才发现我刚刚忘了加px,我这mdzz

from hexo-tag-dplayer.

dixyes avatar dixyes commented on June 23, 2024

fixed 4446e99

(大约吧,如果存在问题请重新打开这个issue

用法:更新插件:

npm install --save https://github.com/NextMoe/hexo-tag-dplayer

然后使用tag:

{% dplayer "ori_keys=values" "width=12450px" height="2333px" %}

from hexo-tag-dplayer.

Myer921 avatar Myer921 commented on June 23, 2024

npm插件源已更新
现在可以直接更新了

npm install hexo-tag-dplayer -save
2016-09-25 IceMoe(Myer921)

from hexo-tag-dplayer.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.