• 趁最近有时间,完善了博客的多媒体插件,配合后端完成
  • player.rar

音频

使用Aplayer,配合了MetingJS,可以支持各大网站的链接,因为MetingJS需要依赖Aplayer,所有这个插件的参数列表和Aplayer很像

html部分,前端通过js解析成播放器对象

QQ截图20200809171156.png

MetingJS参数

optiondefaultdescription
idrequiresong id / playlist id / album id / search keyword
serverrequiremusic platform: netease, tencent, kugou, xiami, baidu
typerequiresong, playlist, album, search, artist
autooptionsmusic link, support: netease, tencent, xiami
fixedfalseenable fixed mode
minifalseenable mini mode
autoplayfalseaudio autoplay
theme#2980b9main color
loopallplayer loop play, values: 'all', 'one', 'none'
orderlistplayer play order, values: 'list', 'random'
preloadautovalues: 'none', 'metadata', 'auto'
volume0.7default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
mutextrueprevent to play multiple player at the same time, pause other players when this player start play
lrc-type0lyric type
list-foldedfalseindicate whether list should folded at first
list-max-height340pxlist max height
storage-namemetingjslocalStorage key that store player setting

视频

使用Dplayer,自己用js做好配合,实现视频播放的功能

Dplayer中文文档

html部分,前端通过js解析成播放器对象

QQ截图20200809170853.png

  • js配合部分,主要是生成对象,可以根据需要添加参数
var dpobj = $(".dplayer");
var dpnum = 0;
var dPlayers = [];
$(".dplayer").each(function(i){
    dPlayers.push(new DPlayer(
    {
        container: dpobj[dpnum], // 播放器容器元素
        // live: false, // 开启直播模式
        autoplay: $(this).attr("autoplay")?$(this).attr("autoplay"):false, // 视频自动播放
        // theme: '#ffffff', // 主题色
        loop: $(this).attr("loop")?$(this).attr("loop"):true, // 视频循环播放
        lang: $(this).attr("lang")?$(this).attr("lang"):'zh-cn', // 可选值: 'en', 'zh-cn', 'zh-tw'
        screenshot: $(this).attr("screenshot")?$(this).attr("screenshot"):true, // 开启截图,如果开启,视频和视频封面需要允许跨域
        hotkey: $(this).attr("hotkey")?$(this).attr("hotkey"):true, // 开启热键,支持快进、快退、音量控制、播放暂停
        airplay: $(this).attr("airplay")?$(this).attr("airplay"):true, // 在 Safari 中开启 AirPlay
        preload: $(this).attr("preload")?$(this).attr("preload"):'auto', // 视频预加载,可选值: 'none', 'metadata', 'auto'
        volume: $(this).attr("volume")?$(this).attr("volume"):0.7, // 默认音量,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效
        logo: $(this).attr("logo")?$(this).attr("logo"):'', // 在左上角展示一个 logo,你可以通过 CSS 调整它的大小和位置
        // 视频信息
        video: {
            url: $(this).attr("video-url"), // 视频链接
            pic: $(this).attr("video-pic"), // 视频封面
            thumbnails: $(this).attr("video-thumbnails"), // 视频缩略图
            type: $(this).attr("video-type"), // 可选值: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或其他自定义类型, 见#MSE 支持
            quality: eval('(' +$(this).attr("quality")+ ')'), // 清晰度切换
            defaultQuality: $(this).attr("video-defaultQuality"), // 默认清晰度切换
        },
        //  外挂字幕
        // subtitle: {
        //     url: $(this).attr("subtitle-url"), // 字幕链接
        //     type: $(this).attr("subtitle-type"), // 字幕类型,可选值: 'webvtt', 'ass',目前只支持 webvtt
        //     fontSize: $(this).attr("subtitle-fontSize"), // 字幕字号
        //     bottom: $(this).attr("subtitle-bottom"), // 字幕距离播放器底部的距离,取值形如: '10px' '10%'
        //     color: $(this).attr("subtitle-color"), // 字幕颜色
        // },
        // 显示弹幕
        // danmaku: {
        //     id: $(this).attr("danmaku-id"), // 弹幕池 id,必须唯一
        //     api: $(this).attr("danmaku-api"), // 见#弹幕接口
        //     token: $(this).attr("danmaku-token"), // 弹幕后端验证 token
        //     maximum: $(this).attr("danmaku-maximum"), // 弹幕最大数量
        //     addition: $(this).attr("danmaku-addition"), // 额外外挂弹幕,见#bilibili 弹幕
        //     user: $(this).attr("danmaku-user"), // 弹幕用户名
        //     bottom: $(this).attr("danmaku-bottom"), // 弹幕距离播放器底部的距离,防止遮挡字幕,取值形如: '10px' '10%'
        //     unlimited: $(this).attr("danmaku-unlimited"), // 海量弹幕模式,即使重叠也展示全部弹幕,请注意播放器会记忆用户设置,用户手动设置后即失效
        // },
        // 自定义右键菜单
        // contextmenu: eval('(' +$(this).attr("highlight")+ ')'),
        // [
        //     {
        //         text: 'custom1', // 
        //         link: 'https://blog.1997sty.com', // 
        //     },
        //     {
        //         text: '控制器信息', // 
        //         click: (player) => {
        //             console.log(player);
        //         }, // 
        //     },
        // ],
        // 自定义进度条提示点
        highlight: eval('(' +$(this).attr("highlight")+ ')'),
        // [
        //     {
        //         time: 20, // 
        //         text: '这是第 20 秒', // 
        //     },
        //     {
        //         time: 120, // 
        //         text: '这是 2 分钟', // 
        //     },
        // ],
        mutex: true, // 互斥,阻止多个播放器同时播放,当前播放器播放时暂停其他播放器
    }));
    dpnum++;
});

dplayer弹幕

官方没有提供弹幕服务器的详细说明,网上可以找到docker方式的镜像搭建方法,简单看了一下,是用redis+mongodb的组合来保存弹幕,另外还提供的mongodb的备份脚本

此外还在网上找到php搭建弹幕服务器的代码,具体实现过程通过本地生产弹幕文件上传到cos,获取时通过代码从cos拉取弹幕文件提供给播放器,作者提供的源码是使用在腾讯云函数(SCF)上,好处就是节省服务器资源,另外每个月还有免费的额度,如果有开发能力也可以根据这片代码进行修改,使用redis+mongodb的存储结构

dplayer字幕

目前字幕只支持webvtt

dplayer缩略图

把鼠标放到进度条上,可以显示视频的缩略图