配置

安装

npm install fishplayer

配置项

初始化配置

import Player from "fishplayer";

new Player({
        el: document.querySelector('.video'), // 播放器容器
        url: "https://novaex.cc/fireworks.mp4", // 视频地址
        title: '测试视频',  // 视频标题
        width: '100vw',
        height: '40vh',
    })

参数	类型	默认值	说明
url	string	必须	视频链接
el	HTMLElement	必须	播放器容器
title	string		视频标题
width	string	必须	宽度
height	string	必须	高度

播放器control

new Player({
        // ...
        isShowControl: true, // 是否显示控制条
        control:[
                pause:false,
                time: false,
                fullScreen: false,
                rate: false,
                volumne: false,
                progress:false,
                screenShot:false 
        ]
    })

参数	类型	默认值	说明
isShowControl	boolean	true / 非必须	是否显示视频控制栏
control	controlOption	非必须	单独控制不同工具栏是否显示

controlOption

参数	类型	默认值	说明
pause	boolean	true / 非必须	是否展示暂停
time	boolean	true / 非必须	是否展示时间
volumne	boolean	true / 非必须	是否展示音量控制组件
rate	boolean	true / 非必须	是否展示速率组件
fullScreen	boolean	true / 非必须	是否展示全屏组件
progress	boolean	true / 非必须	是否展示进度条组件
screenShot	boolean	true / 非必须	是否展示截图组件
danmu	boolean	true / 非必须	是否展示弹幕控制组件
setting	boolean	true / 非必须	是否展示视频设置组件
smallWindow	boolean	true / 非必须	是否展示小窗组件
webFullScreen	boolean	true / 非必须	是否展示网页全屏组件

一些可配置化选项

new Player({
        // ...
        stream: true;
        initVolume: 10, // 初始化音量
        rate: [0.5, 1, 1.5, 2], // 视频倍数
        initRate: 1, // 初始化倍数
    })

参数	类型	默认值	说明
initVolume	number	非必须 作用域在 0 - 100	初始化音量
rate	number[]	非必须	视频倍数选项
initRate	number	非必须	初始化视频倍率
stream	boolean	false/非必须	是否开启流媒体播放

弹幕配置

new Player({
        // ...
        danmaku:{
            url:"xxx";
            interval: 1000;
            isCanvas:true;
            data: {
                "id":1,
            };
            // 一切fetch的参数都可以在这里配置
        }
    })

参数	类型	默认值	说明
url	string	非必须	弹幕接口链接
isCanvas	boolean	非必须	是否启用convas
interval	number	非必须 默认1000	请求频率
data	object	非必须	请求参数

注意，当设置了danmaku但是没有配置url时会开启随机弹幕

    这个接口传入的其他参数将作为fetch的其他参数，

    如需要配置请求头，可以这样配置
     danmaku:{
            url:"xxx";
            interval: 1000;
            data: {
                "id":1,
            };
            header:{
                "xxx":"xxx"
            }
        }