视频音频播放js插件

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

音频

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

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

QQ截图20200809171156.png

MetingJS参数

option	default	description
id	require	song id / playlist id / album id / search keyword
server	require	music platform: `netease`, `tencent`, `kugou`, `xiami`, `baidu`
type	require	`song`, `playlist`, `album`, `search`, `artist`
auto	options	music link, support: `netease`, `tencent`, `xiami`
fixed	`false`	enable fixed mode
mini	`false`	enable mini mode
autoplay	`false`	audio autoplay
theme	`#2980b9`	main color
loop	`all`	player loop play, values: 'all', 'one', 'none'
order	`list`	player play order, values: 'list', 'random'
preload	`auto`	values: 'none', 'metadata', 'auto'
volume	`0.7`	default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
mutex	`true`	prevent to play multiple player at the same time, pause other players when this player start play
lrc-type	`0`	lyric type
list-folded	`false`	indicate whether list should folded at first
list-max-height	`340px`	list max height
storage-name	`metingjs`	localStorage 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的存储结构