MoePlayer / hexo-tag-dplayer

Embed dplayer in Hexo posts/pages
MIT License
210 stars 30 forks source link

怎样在md中设置视频控件的宽和高 #3

Closed youngkaaa closed 8 years ago

youngkaaa commented 8 years ago

使用起来整体很棒,可就是在md中加入相关tag后,由于视频高度很高,导致在网页上面看不全,而右键只有关于作者那些的,没有载新窗口中播放的选项,能讲一下设置高度和宽度吗?

dixyes commented 8 years ago

或许你可以在最上面的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 %}

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

youngkaaa commented 8 years ago

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

我猜是这句话的原因:

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

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

dixyes commented 8 years ago

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

youngkaaa commented 8 years ago

image

上面的是 .md 中的写法

下面是我的项目结构:

image

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

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

dixyes commented 8 years ago

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

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

youngkaaa commented 8 years ago

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

dixyes commented 8 years ago

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

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

youngkaaa commented 8 years ago

好的 我会继续关注的 谢谢

DIYgod commented 8 years ago

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

youngkaaa commented 8 years ago

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

DIYgod commented 8 years ago

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

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

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

dixyes commented 8 years ago

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

DIYgod commented 8 years ago

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

dplayer1 {

height: 100px;
width: 100px;

}

dixyes commented 8 years ago

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

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

dixyes commented 8 years ago

fixed https://github.com/NextMoe/hexo-tag-dplayer/commit/4446e99463506d02420890f92b5a4956c0fddf3c

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

用法:更新插件:

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

然后使用tag:

{% dplayer "ori_keys=values" "width=12450px" height="2333px" %}
Myer921 commented 8 years ago

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

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