Xgplayer watermelon 🍉 player custom style painting in painting modification

🍉 Watermelon player modify style

1. Vue. config Configure the Loader to parse SVG correctly

const webpack = require('webpack')
module.exports = {
	//[email protected]版本把基本的配置文件都封装到了./node_modules/@vue/cli-sevice/lib/config下
	lintOnSave: false,
	publicPath: './',
	 chainWebpack: config => {
	        const svgRule = config.module.rule('svg')
	        // 清除已有的所有 loader。
	        // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
	        svgRule.uses.clear()
	        // 添加要替换的 loader
	        svgRule
	            .use('raw-loader')
	            .loader('raw-loader')
	    },
	devServer: {
		
	},
	
}

Copy the code

2.npx xgplayer eject [targetDir] [skinName]

[skinName] [skinName] don't write [skinName] change name like NPX xgPlayer eject ./ customCopy the code

Demo:github.com/xuergo/test…

2. Add buttons such as picture-in-picture add buttons (not officially recommended above method can be used for simple functions below 🤭)

<div class="mse" id="mse"> <! <div class=" BTN "id=" BTN" @click="back">Copy the code

Demo:github.com/xuergo/test…

3. Similar to the next episode of netease open course function xgPlayer comes directly in the initialization of the player into 🆗

playNext: {
		urlList:[]
	}  
Copy the code

❗❗❗❗❗ What if the user clicks the list to switch?

All I want to do is manipulate the next set of numbers and play the subscript to do that you can imagine. 1. Change the subscript of the play video for the next episode (i.e. click ⏩ to play what) Player.currentVideoIndex 2. The next section array Through print consoloe. Log (enclosing player) can see this. Player. Config. PlayNext. UrlList 3. Let onUrlListEnd = function () {// let onUrlListEnd = function () {// let onUrlListEnd = function () Player.util.addClass(player.root, 'xgplayer-playnext-inactive') // } // player.on('urlListEnd', onUrlListEnd) 4. The next episode is called playNextCopy the code

open.163.com/newview/mov…

4. Find that the video cannot fill the screen as shown in the picture above. Check your video box is 21:9 in width and height? Not nature can not full 💻 ah