This is a combination of music and danmaku component

• https://gitee.com/zhang_jian_feng/tz8

use tz8 (Demo)

	import tz8 from 'tz8'
	Vue.use(tz8)
	
	...
	
	<tz8-mplayer 
		:musicConfig="{ music: music, end: end, loop: endHandler }"
		:danmakuConfig="{ getFn: testGetFn, postFn: testPostFn }"
	></tz8-mplayer>
	
	...
	
	<script>
	export default {
	  data() {
	    return {
	      music: { 
					src: 'http://lty712.imdo.co/packD/66CCFF.mp3', cover: 'http://lty712.imdo.co/packD/1.jpg', name: '66CCFF', 
					lrc: [[2.1235, 'aaaaaaaaaaaaa']], info: [{ key: '歌手', value: '洛天依' }, { key: '作者', value: '阿良良木健' }]
				},
				end: [['loop', '单曲循环'], ['end', '一遍结束']],
				testGetFn: {
					call: this.testGetDo,
					back: (value) => value
				},
				testPostFn: {
					call: this.testPostDo,
					back: (value) => value
				}
	    }
	  }
		
		methods: {
			testGetDo(start, end) {
				setTimeout(() => {
					this.testGetFn.back('<span danmaku="0.0010 center 1 #FFFFFF 123456">看这里看这里</span>');
				}, 100)
			},
			testPostDo(value) {
				setTimeout(() => {
					this.testPostFn.back(true);
				}, 50)
			},
			endHandler(end, count) {
				if (end === 'loop') {
					return true;
				} else {
					return false;
				}
			}
		}
	}
	</script>

props (See below for details)

| props | default | do | | --- | --- | --- | | playerConfig | {} | Complete the basic configuration of the player as a whole | | musicConfig | {} | Complete the configuration of song playback | | danmakuConfig | {} | Complete the configuration of danmaku | | actionConfig | {} | Complete some user-operable configurations |

1.playerConfig | attributes| type | default | optional value| do | | --- | --- | --- | --- | --- | | max | Number, String| 896 | | The maximum width that the player can extend | | user | String | 'default' | | Used for the generation of danmaku, which will affect the shielding of danmaku in the future | | zindex | Number, String| 100 | | The overall zindex of the component, currently occupies 100 zindex |

2.musicConfig | attributes| type | default | optional value | do | | --- | --- | --- | --- | --- | | music | Object | {} | | Song data (See below for details) | | volume | Number, String| 50 | 0 <= val <= 100 | Song default volume, only initialization, 0 <= val <= 100 | | loop | Function | (end) => { return true } | | The end of the song callback function | | end | Array | null | | Customize the actionable behavior at the end of a song |

Loop has a parameters -> end, This parameter indicates a value in the end Array

end parameter refers to the above example

music can have attributes

• src : Url of song (must)
• name : The name of song
• cover : The background Image of song
• lyrics : The lyrics of song
• singer : Object, { lable: String, text: String }
• album: Object, { lable: String, text: String }
• origin: Object, { lable: String, text: String }
• quality: String

3.danmakuConfig | attributes | type | default | optional value | do | | --- | --- | --- | --- | --- | | getFn | Object | {} | | Details will be explained later | | postFn | Object | {} | | Details will be explained later | | interval | Number | 40 | val >= 0 | Danmaku acquisition interval | | advance | Number | 10 | val >= 0 && val < intreval| Danmaku gets time in advance | | merge | Number | 10 | val >= 0 | If the remaining time of the song after the danmaku is acquired this time is too small, merge the time to the end | | placeholder | String | '友好的发弹幕吧...' | | Default placeholder for danmaku input box | | inputColor | String | '#66ccff' | Hexadecimal | Default color for danmaku post | | inputMode | String | 'rtl' | 'rtl', 'center' | Default mode for danmaku post | | inputText | String | '' | | Default test for danmaku input box | | definedColor| Array | ['#ff0000', '#ffaa00', '#ff00ff', '#00ff00', '#aaff7f', '#00aaff', '#00ffff', '#ffff00', '#aaaa7f', '#bfbfbf', '#ffffff', '#000000']| | Provide user-selected barrage predefined colors | | validator | Function| null | | Danmaku screen bypass function |

how to use danmaku_get_fn and danmaku_post_fn

There are simple examples in the above code

danmaku_get_fn -> Object( the Object include call and back methods )

• call: The callback function has two parameters (start, end). start represents the start time of the danmaku data interval, such as 20, which means that the requested danmaku time requires data greater than or equal to 20s. end represents the end time of the danmaku data interval, such as 40, which means that the requested danmaku time requires data less than 40s.
• back: Use this function to return the danmaku data.

danmaku_post_fn -> Object( the Object include call and back methods )

• call: The callback function has one parameter (value). value is the post danmaku data.
• back: If you have successfully post data, Use this function to return true, otherwise return false.

how to use validator

validator - param => ( text, color, user, mode, set ): The set contains the user's current settings for blocking. - if this fn is null, Any danmaku will be emitted.