用iframe引入DPlayer吧!
浏览 1146 | 评论 7 | 字数 2012
小太
2020年02月18日
  • 前言

    最近研究了一下js,今天就出了个想法。利用js可以达到使用URL参数来设置DPlayer参数,并且可以使用iframe标签来引入播放器,无需自行安装DPlayer的css和js。

    介绍

    特点

    缓解服务器读取css和js的压力,可以直接使用iframe接入DPlayer,通过URL设置来使用播放器,且播放器内置多种主题(已经提前预设好)减小使用者的设置压力。同时内设无视频链接时提示语音视频。

    风格

    引入几种主题颜色(参考扁平式设计颜色)

    如何使用

    引入

    使用 <iframe src="//www.bbstr.net/player.php"></iframe> 引入播放器。

    参数

    视频

    视频链接 url=(必填,类型:HTTP/HTTPS地址,支持FLV/M3U8/AVI/MP4等视频文件)
    视频封面 pic=(默认参数为空,类型:HTTP/HTTPS地址,支持JPG/PNG/BMP/GIF等图片文件)
    自动播放 autoplay=(默认参数为 false ,可选值 true false
    循环播放 loop=(默认参数为 false,可选值 true false

    LOGO

    (视频左上角添加LOGO图片)
    LOGO图片 logo=(默认参数为空,类型:HTTP/HTTPS地址,支持JPG/PNG/BMP/GIF等图片文件)

    主题

    播放器内置主题:normal blue red orange purple green
    主题设置 theme=(默认参数为 normal ,可选值如上)
    主题颜色会应用在“进度条”、“音量调控条”上,如图(图片中选用的是 green 主题):
    主题颜色

    示例

    有视频链接示例

    插入代码:

    <iframe src="//www.bbstr.net/player.php?url=https://cdn.jsdelivr.net/gh/huxx16/m3u8/yourname/playlist.m3u8&theme=green&logo=https://static.bbstr.net/images/logo/bilibili.svg" scrolling="no" border="0" frameborder="no" framespacing="0" width="500" height="375" allowfullscreen="true"></iframe>

    该代码中包含url、theme、logo,三个参数,翻译成文字语言则为:

    视频链接是:https://cdn.jsdelivr.net/gh/huxx16/m3u8/yourname/playlist.m3u8
    选择的主题是:blue(蓝色)
    logo图片的地址是:https://static.bbstr.net/images/logo/bilibili.svg

    显示为:

    后序

    也就这样个东西吧,如果对DPlayer感兴趣的小伙伴可以自行研究,这里只是为小伙伴们提供一个更简易的使用DPlayer的方式,只需要一行代码就可以把视频插入到页面中。

    特别感谢

    本文作者:小太
    本文链接:https://blog.713.moe/p/11
    最后修改时间:2020-06-07 22:36:16
    本站未注明转载的文章均为原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!
    评论
    与本文无关评论请发留言板,谢谢合作啦(。・∀・)ノ
    textsms
    支持 Markdown 语法
    email
    link
    评论列表
    已有 7 条评论
    2020-06-07 19:28
    对不起,没注意到"与本文无关评论请发留言板,谢谢合作啦(。・∀・)ノ"
    下次绝对不会写在这了.... 😅
    2020-06-07 19:27
    你好,我想请问一下,为什么发布文章会有字数限制,我写了一篇很长的文章然后发布后只显示几十个字,在哪里可以修改这种截取呢? 😡
    2020-06-07 22:34
    @Jim2332 用的主题是castle吗?是不是在文章中使用了表情?如果是的,升级到最新版本即可。
    yee
    2020-04-22 00:01
    棒 偷懶神器 謝版主
    2020-04-22 08:08
    @yee 其实我也是个懒人
    2020-03-13 15:51
    强 小太 强
    2020-03-13 15:57
    @ohmyga 菜 我 菜