西瓜视频插件使用

配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
    let player = new Player({
    id: 'xgVideo',
    url: './video.mp4',
    poster: './show_img_2.png', //设置封面图
    playbackRate: [0.5, 0.75, 1, 1.5, 2], //传入倍速可选数组
    defaultPlaybackRate: 1, //默认倍速
    width: 800,
    height: 400,
    fluid: true, //流式布局，可使播放器宽度跟随父元素的宽度大小变化，且高度按照配置项中的高度和宽度的比例来变化（播放器宽高未设置时按照内部默认值来计算）。
    // fitVideoSize: 'fixHeight', //1、fitVideoSize设置为fixWidth，表示容器宽度固定，容器高度按照视频内容比例增大或减小；2、fitVideoSize设置为fixHeight，表示容器高度固定，容器宽度按照视频内容比例增大或减小；3、fitVideoSize设置为auto，表示容器高度或宽度按照视频内容比例增大。
    volume: 0.6, //音量大小
    autoplay: true, //自动播放
    loop: false, //循环播放
    videoInit: false, //设置视频初始帧 该配置与autoplay配置项不可同时设置为true。该配置在移动端无效。
    //lastPlayTime: 10, //视频起播时间（单位：秒）播放器支持设置视频起播时间。
    //lastPlayTimeHideDelay: 5, //提示文字展示时长（单位：秒）
    rotateFullscreen: true, //部分移动端场景的系统默认全屏功能不支持横屏，播放器支持通过配置 rotateFullscreen: true 使触发全屏时实现样式横屏全屏。使用该配置时不需配置rotate和cssFullscreen。
    // 视频跳转播放下一集，需提供视频资源列表。
    //     playNext: {
    //     urlList: [
    //       'url1',
    //       'url2',
    //       'url3'
    //     ],
    // },
    download: true, //下载控件
    controls: true,//关闭控制键
    pip: true, //小屏画中画
    screenShot: true, //截图
    keyShortcut: 'on', //键盘快捷键可通过该配置项开启键盘快捷键：按 → 键快进10秒， 按 ← 键后退10秒，按 ↑ 键调高音量，按 ↓ 键调低音量，按 space 键切换播放/暂停状态。
    errorTips: `请<span>刷新</span>试试`, //自定义错误提示
        // 播放器使用自执行的插件机制，如需要在插件生效前执行某些方法，开发者可将相关方法写在execBeforePluginsCall配置项数组中
    execBeforePluginsCall: [() => {
        console.log('Execute before plugins call')
    }],

    danmu: {
        panel: true, //弹幕控制面板
        comments: [ //弹幕数组
            {
                duration: 15000, //弹幕持续显示时间,毫秒(最低为5000毫秒)
                id: '1', //弹幕id，需唯一
                start: 3000, //弹幕出现时间，毫秒
                prior: true, //该条弹幕优先显示，默认false
                color: true, //该条弹幕为彩色弹幕，默认false
                txt: '长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕', //弹幕文字内容
                style: { //弹幕自定义样式
                    color: '#ff9500',
                    fontSize: '20px',
                    border: 'solid 1px #ff9500',
                    borderRadius: '50px',
                    padding: '5px 11px',
                    backgroundColor: 'rgba(255, 255, 255, 0.1)'
                },
                mode: 'scroll' //显示模式，top顶部居中，bottom底部居中，scroll滚动，默认为scroll
                // el: DOM //直接传入一个自定义的DOM元素作为弹幕，使用该项的话会忽略所提供的txt和style
                // eventListeners: [{ //支持自定义DOM设置DOM监听事件
                //   event: 'click',
                //   listener: function (e) {
                //     console.log('click')
                //   },
                //   useCapture: false,
                // }]
            }
        ],
        area: { //弹幕显示区域
            start: 0, //区域顶部到播放器顶部所占播放器高度的比例
            end: 1 //区域底部到播放器顶部所占播放器高度的比例
        },
        closeDefaultBtn: true, //开启此项后不使用默认提供的弹幕开关，默认使用西瓜播放器提供的开关
        defaultOff: false //开启此项后弹幕不会初始化，默认初始化弹幕
    }

    // player.danmu.start() //弹幕初始化并播放(内部默认已调用)
    // player.danmu.pause() //弹幕暂停
    // player.danmu.play() //弹幕继续播放
    // player.danmu.stop() //弹幕停止并消失
    // player.danmu.sendComment({ //发送弹幕
    //     duration: 15000,
    //     id: 'id',
    //     start: 3000,
    //     txt: '弹幕内容',
    //     style: {
    //         color: '#ff9500',
    //         fontSize: '20px',
    //         border: 'solid 1px #ff9500',
    //         borderRadius: '50px',
    //         padding: '5px 11px',
    //         backgroundColor: 'rgba(255, 255, 255, 0.1)'
    //     }
    // })
    // player.danmu.setCommentDuration(id, duration) //按照id改变某一个弹幕的持续显示时间
    // player.danmu.setAllDuration(mode, duration) //改变所有已加入队列弹幕的持续显示时间
    // player.danmu.setCommentID(oldID, newID) //改变某一个弹幕的id
    // player.danmu.hide(mode) //屏蔽某一类弹幕(参数可选值 scroll | top | bottom | color)
    // player.danmu.show(mode) //显示某一类弹幕(参数可选值 scroll | top | bottom | color)
});

事件

play播放  playing继续播放  pause暂停 ended视频结束  error视频错误 seeking seek播放
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 // 永久注册 
// 结束回调  在配置为loop为true时无效
player.on('ended',function(){
    alert("end")
})
// 一次注册
player.once('事件名',function(){

})
// 事件注销
player.off('事件名',function(){

})
// 时间触发
player.emit('事件名')

生命周期

1
2
3
4
5
6
7
8
9
10
11
12
// 生命周期
      // 实例化完成
      // 播放器调用Player进行实例化，实例化结束后会触发 ready 事件，通过对 ready 的监听可以确定实例化是否完成。实例化主要包括自定义UI生成、事件绑定、插件化实例化工作。
      player.once('ready',()=>{console.log('ready')})

      // 视频生成结束
      // 考虑到节约视频流量和HTTP连接数的限制，PC端播放器在实例化的时候只是UI生效并未生成video视频，只有点击播放后才会创建video标签拉取视频进行播放。如果想捕获创建video的时机，监听 complete 事件。
      player.once('complete',()=>{console.log('complete')})

      // 实例已销毁
      // 播放器在销毁实例的时候会触发 destroy 事件
      player.once('destroy',()=>{console.log('destroy')})

ready事件和complete事件是在实例化的时候已经触发，为了保证“后监听”方式能捕获到事件，请勿使用异步操作来监听，如setTimeout、Promise等，如果需要使用这些异步操作，请在响应函数内完成。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 错误的方式
    let player=new Player({/*配置*/});
        setTimeout(function () {
            player.once('ready',()=>{console.log('ready')})
        }, 1000);


// 正确的方式

    let player=new Player({/*配置*/});
    player.once('ready',()=>{
      setTimeout(function () {
        console.log('ready')
      }, 1000);
    })