MyBB

MangaD

Hello, I am trying to add support for Bilibili videos on the bbcodes_sceditor.js file.

This is what I currently have:

'Bilibili': {
'match': /https:\/\/www\.bilibili\.com\/video\/([^/]+)\/?/,
'url': '//player.bilibili.com/player.html?bvid=',
'html': '<iframe src="{url}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" ' +
' style="width: 640px; height: 430px; max-width: 100%" height="378" width="620" data-mybb-vt="{type}" data-mybb-vsrc="{src}"></iframe>'
}

One problem is, the url of a Bilibili video iframe is supposed to receive two parameters: aid and bvid. But here it appears I can only pass one parameter to it. Another problem is that the match could have two different types of URL, and the URL of the iframe depends on it.

For example, there can be these two different URLs for the same video:

https://www.bilibili.com/video/bv1EJ411s7ZG
https://www.bilibili.com/video/av80220911

One has bv in the ID prefix, and the other one has av in the ID prefix. For URLs with bv, the iframe url may have only bvid (and must have it). But for URLs with av, the iframe url may have only aid (and must have).

MangaD

This is how I added support for Bilibili videos (MyBB v1.8.38).

Important note: The editor in this forum is recognizing all occurrences of [ video (without space) as a video, and won't let me post that way because it accuses me of having 8 videos while only 1 is allowed here, so I used[\video instead. You should remove the \ in your code.

jscripts/bbcodes_sceditor.js

Add in the mybbCmd variable after the Twitch section:

'Bilibili': {
	'match': /bilibili\.com\/video\/([^\/?]+)(?:\?p=(\d+)\/?)?/,
	'url': function (videoId, page) {
		videoId = new RegExp('av.+', 'i').test(videoId) ? videoId.slice(2) : videoId;
		return `//player.bilibili.com/player.html?aid=${videoId}${new RegExp('bv.+', 'i').test(videoId) ? `&bvid=${videoId}` : ''}${page ? `&page=${page}` : ''}&as_wide=1&high_quality=1&autoplay=0`;
	},
	'html': '<iframe src="{url}" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" ' +
			'style="width: 640px; height: 430px; max-width: 100%" height="378" width="620" data-mybb-vt="{type}" data-mybb-vsrc="{src}"></iframe>'
}

Edit the code after the mybbCmd variable for the Sceditor allowedIframeUrls:

for (var i in mybbCmd.video) {
	var item = mybbCmd.video[i];
	if(!(item.url instanceof Function)) { //MangaD - don't add functions to allowed urls
		$.sceditor.defaultOptions.allowedIframeUrls.push(item.url);
	}
}
// MangaD - add bilibili to allowed iframe url's
$.sceditor.defaultOptions.allowedIframeUrls.push("//player.bilibili.com/player.html");

Edit the html key of the video BBCode command:

	// Add MyBB video command
	$.sceditor.formats.bbcode.set('video', {
		allowsEmpty: true,
		allowedChildren: ['#', '#newline'],
		tags: {
			iframe: {
				'data-mybb-vt': null
			}
		},
		format: function ($element, content) {
			return '[\video=' + $($element).data('mybb-vt') + ']' + $($element).data('mybb-vsrc') + '[/video]';
		},
		html: function (token, attrs, content) {
			var params = mybbCmd.video[Object.keys(mybbCmd.video).find(key => key.toLowerCase() === attrs.defaultattr)];
			var matches, url;
			var n = (attrs.defaultattr == 'dailymotion') ? 2 : 1;
			if (typeof params !== "undefined") {
				matches = content.match(params['match']);
			// MangaD - Support function in url
				if (params['url'] instanceof Function && matches) {
					url = params['url'](...matches.slice(1));
				} else {
					url = matches ? params['url'] + matches[n] : false;
				}
			//url = matches ? params['url'] + matches[n] : false;
			}
			if (url) {
				return params['html'].replace('{url}', url).replace('{src}', content).replace('{type}', attrs.defaultattr);
			}
			return $.sceditor.escapeEntities(token.val + content + (token.closing ? token.closing.val : ''));
		}
	});

Admin CP - MyCode

In Admin CP add custom MyCode (in this order!):

Title: Bilibili BV with part
Short Description: Bilibili videos that have BV in URL and a part
Regular Expression: \[\video=bilibili\]https:\/\/(?:www|m)\.bilibili\.com\/video\/[bB][vV]([^\/?]+)\?p=(\d+)\/?\[\/video\]
Replacement:

<iframe src="//player.bilibili.com/player.html?aid=bv$1&amp;bvid=bv$1&amp;page=$2&amp;as_wide=1&amp;high_quality=1&amp;autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="638" height="447"></iframe>

Test: [\video=bilibili]https://www.bilibili.com/video/BV1P64y1S76p?p=2[/video]

Title: Bilibili BV
Short Description: Bilibili videos that have BV in the URL
Regular Expression: \[\video=bilibili\]https:\/\/(?:www|m)\.bilibili\.com\/video\/[bB][vV]([^/]+)\/?\[\/video\]
Replacement:

<iframe src="//player.bilibili.com/player.html?aid=bv$1&amp;bvid=bv$1&amp;as_wide=1&amp;high_quality=1&amp;autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="638" height="447"></iframe>

Test: [\video=bilibili]https://www.bilibili.com/video/bv1EJ411s7ZG[/video]

Title: Bilibili AV with part
Short Description: Bilibili videos that have AV in URL and a part
Regular Expression: \[\video=bilibili\]https:\/\/(?:www|m)\.bilibili\.com\/video\/[aA][vV]([^\/?]+)\?p=(\d+)\/?\[\/video\]
Replacement:

<iframe src="//player.bilibili.com/player.html?aid=$1&amp;page=$2&amp;as_wide=1&amp;high_quality=1&amp;autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="638" height="447"></iframe>

Test: Didn't test this one

Title: Bilibili AV
Short Description: Bilibili videos that have AV in the URL
Regular Expression: \[\video=bilibili\]https:\/\/(?:www|m)\.bilibili\.com\/video\/[aA][vV]([^/]+)\/?\[\/video\]
Replacement:

<iframe src="//player.bilibili.com/player.html?aid=$1&amp;as_wide=1&amp;high_quality=1&amp;autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="638" height="447"></iframe>

Test: [\video=bilibili]https://www.bilibili.com/video/av80220911[/video]

Tip: for 100% width (without resize working)

<iframe src="//player.bilibili.com/player.html?aid=$1&amp;as_wide=1&amp;high_quality=1&amp;autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="width:100%;" onload="setTimeout(() => {this.style.height=(this.clientWidth/1.427293065)+'px';}, 1000);" onmouseover="this.style.height=(this.clientWidth/1.427293065)+'px';"></iframe>

Login
Username:
Password:	Lost Password?
	Remember me