呓语 | 杨英明的个人博客

专注于c++、Python,欢迎交流

By

使用 DPlayer && 七牛云 在博文中优雅的嵌入视频(基于Django)

前言

最近逛博客的时候看到他们在博文中嵌入了视频,播放器无边框、设计简洁、甚至还有弹幕功能,十分好看优雅。分享几个博主的页面:

其实在这之前我还使用过bilibili自带的播放脚本,在视频页面点击分享可以找到,复制到博文中就可以出现一个播放器,点击就可以播放视频,但是这个播放器带B站的广告,还有很多零零碎碎的东西,总之不够简洁。

查看这几个博主的页面才发现他们用的是一款web播放器————DPlayer,是前端大佬 DIYGod 的开源项目。

项目地址:MoePlayer/DPlayer

文档地址:中文文档

看到 DPlayer 简洁的界面和弹幕功能后我如获至宝,这就是我心中的理想web播放器呀!

废话不多说,先看一下效果:

准备工作

需要:

  • DPlayer 的 css & js 资源文件:在项目地址的 dist 文件夹中就可以找到,然后放到自己博客的静态资源中即可;
  • 七牛云:七牛云是一个云存储服务,注册免费提供10G空间和20G的流量(本来想用阿里云的OSS,但是下行流量要单独收费,放弃)。我们需要提前把视频上传到七牛云中,并得到一个可以直接访问的链接,比如这种:https://yym-videobed.oss-cn-zhangjiakou.aliyuncs.com/20180829%20%E5%BB%B6%E6%97%B6%E6%91%84%E5%BD%B1%20%E5%AE%8C%E6%95%B4%E7%89%88%20%E5%B8%A6%E8%83%8C%E6%99%AF%E9%9F%B3%E4%B9%90%20%E6%97%A0%E6%B0%B4%E5%8D%B0.mov

注意:上传的视频最好使用 AVC(H264) 编码格式的 MP4 文件,不然播放视频容易出现只有声音没有画面的情况。

参考自:网页mp4视频在线播放只有声音没有画面解决办法

配置 DPlayer 的简单教程

先载入所需文件(注意顺序):

<link rel="stylesheet" href="DPlayer.min.css">
<div id="dplayer"></div>
<script src="DPlayer.min.js"></script>

然后调用,并传递配置参数:

<script>
(function(){
    var player = new DPlayer({
        "container":document.getElementById("dplayer"), // 对应 div 中的 id
        "preload":"auto",
        "video":{   // 视频配置
            "url":"<<url>>" // 把 OSS 中上传视频得到链接放到这儿
        },
        danmaku:{   // 弹幕配置
            id:"demo",     //本视频弹幕的唯一标识
            api:"https://api.diygod.me/dplayer/"
        }
    });
    window.dplayers||(window.dplayers=[]);
    window.dplayers.push(player);
})()
</script>

参考自:DPlayer – H5视频播放器支持弹幕

如何集成到 Django 博客中?

由于我后台的编辑器是使用 Markdown 写文章的,虽然也能兼容 HTML, 但是总不能让我再写文章的时候再粘贴一堆代码吧?这太不美观了,而且不太可行。

于是我决定构造一个标签解析器,能自动解析标签中的 url 并生成调用代码,标签大概长这个样子:

---video:http://xxxx.com/xxx.mp4--

也就是说我写博文时,如果想要插入一段视频,那么在插入位置写这么一个标签,里面带有要播放的视频链接。

在前台查看文章时,这个标签会自动解析成一段 DPlayer 调用代码:

<div id="dplayer-1"></div>
<script src="/static/js/DPlayer.min.js"></script>
<script>
(function(){
    var player = new DPlayer({
        "container":document.getElementById("dplayer-1"),
        "preload":"auto",
        "video":{
            "url":"http://xxxx.com/xxx.mp4"
        },
        danmaku:{
            id:"yiyu",
            api:"https://api.diygod.me/dplayer/"
        }
    });
    window.dplayers||(window.dplayers=[]);
    window.dplayers.push(player);
})()
</script>

特性:

  • 支持同时插入多个视频
  • 默认开启弹幕功能

实现

注意:以下是我自己博客的实现过程,仅供参考

1.将 DPlayer 资源文件添加到博客的静态资源中

2.在博客模板 templates 中引入 css 资源

<link rel='stylesheet' id='DPlayer.css'
  href="/static/css/DPlayer.min.css" type='text/css' media='all'/>

3.修改 settings.py 文件,添加标签解析器的调用代码模板:

## 定义video标签解析器调用模板
VIDEO_SCRIPT = '''
<div id="dplayer-<<id>>"></div>
<script src="/static/js/DPlayer.min.js"></script>
<script>
(function(){
        var player = new DPlayer({
                "container":document.getElementById("dplayer-<<id>>"),
                "preload":"no",
                "video":{
                        "url":"<<url>>"
                },
                danmaku:{
                        id:"yiyu-<<id>>",
                        api:"https://api.diygod.me/dplayer/"
                }
        });
        window.dplayers||(window.dplayers=[]);
        window.dplayers.push(player);
})()
</script>
'''

4.修改 blog/views.py 文件中的 article 函数(即渲染文章的函数),在 article.save() 语句之后添加 video 标签渲染代码:

# 渲染 video 标签
video_id = 1
while True:
    pattern = re.compile(r'
<div id="dplayer-427-2"></div>

<script>
(function(){
    var player = new DPlayer({
        "container":document.getElementById("dplayer-427-2"),
        "preload":"no",
        "video":{
            "url":"(.*?)"
        },
        danmaku:{
            id:"yiyu-427-2",
            api:"https://api.diygod.me/dplayer/"
        }
    });
    window.dplayers||(window.dplayers=[]);
    window.dplayers.push(player);
})()
</script>
')
    video_url = pattern.findall(article.content)
    if len(video_url) == 0:
        # 没找到video标签,跳出
        break
    video_url = video_url[0]

    # 将视频的源地址video_url填充到配置脚本中,生成配置脚本
    video_script = re.sub(r'<<url>>', video_url, settings.VIDEO_SCRIPT, count=1)
    # 将视频的id填充到配置脚本中,生成配置脚本
    video_script = re.sub(r'<<id>>', '%s-%d'%(article_id, video_id), video_script, count=0)
    # 如果不是第一个video标签,就不再引用js文件
    if video_id > 1:
        video_script = re.sub(r'<script src="/static/js/DPlayer.min.js"></script>', '', video_script, count=1)

    video_id += 1
    # 替换配置脚本到博文的video标签位置
    article.content = re.sub(r'
<div id="dplayer-427-3"></div>

<script>
(function(){
    var player = new DPlayer({
        "container":document.getElementById("dplayer-427-3"),
        "preload":"no",
        "video":{
            "url":".*?"
        },
        danmaku:{
            id:"yiyu-427-3",
            api:"https://api.diygod.me/dplayer/"
        }
    });
    window.dplayers||(window.dplayers=[]);
    window.dplayers.push(player);
})()
</script>
', video_script, article.content, count=1)

效果

实现之后,在后台编辑中添加 video 标签:

标签被自动解析为 DPlayer 调用代码:

前台显示效果:

参考资料

原创声明

转载请注明:呓语 » 利用 DPlayer+OSS 在博文中优雅的嵌入视频(基于Django博客)