tz8

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)

1.playerConfig

2.musicConfig

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

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.