MediaWiki:Gadget-BiliPlayer.js

来自Mooncell - 玩家共同构筑的FGO中文Wiki
跳到导航 跳到搜索

注意:在保存之后,您可能需要清除浏览器缓存才能看到所作出的变更的影响。

  • Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5Ctrl-R(Mac为⌘-R
  • Google Chrome:Ctrl-Shift-R(Mac为⌘-Shift-R
  • Internet Explorer:按住Ctrl的同时单击刷新,或按Ctrl-F5
  • Opera:前往菜单 → 历史(Mac为Opera → Preferences),或按Ctrl-Shift-Del,然后清除浏览数据 → 勾选“已缓存的图片和文件” → 清除数据
    function buildPlayerPanel(aid, cid, page, width, height) {
    	var $player = $('<iframe></iframe>', {
    		'src': '//player.bilibili.com/player.html?aid=' + aid + '&cid=' + cid + '&page=' + page,
    		'scrolling': 'no',
    		'border': '0',
    		'frameborder': 'no',
    		'framespacing': '0',
    		'allowfullscreen': true,
    		'style': 'width:' + width + ';height:' + height + ';',
    		'class': 'bili-player',
    	});
    	var $playerPanelBack = $('<div></div>', {
    		'class': 'bili-player-panel-back',
    	});
    	var $playerPanel = $('<div></div>', {
    		'class': 'bili-player-panel',
    	});
    	var $playerPanelClose = $('<div></div>', {
    		'class': 'bili-player-panel-close',
    	}).append($('<span class="fa fa-times-circle-o"></span>'));
    	$playerPanelClose.click(function(event) {
    		$('.bili-player-panel-back').remove();
    	});
    	$playerPanelBack.append($playerPanel.append($player, $playerPanelClose))
    	return $playerPanelBack;
    }
     
    function autoResizePlayer(preferredWidth, preferredHeight) {
    	var $biliPlayer = $('.bili-player');
    	if ($biliPlayer.length === 0) {
    		return;
    	}
    	if (preferredWidth > $(window).width() - 40) {
    		$biliPlayer.width($(window).width() - 40);
    	} else {
    		$biliPlayer.width(preferredWidth);
    	}
    	if (preferredHeight > $(window).height() - 40) {
    		$biliPlayer.height($(window).height() - 40);
    	} else {
    		$biliPlayer.height(preferredHeight);
    	}
    }
     
    function init() {
    	var $biliButton = $('.bili-button');
    	if ($biliButton.length === 0) {
    		return;
    	}
    	var preferredWidth, preferredHeight, resizeTimer;
    	$biliButton.click(function(event) {
    		var aid = $(this).data('aid')
    		  , cid = $(this).data('cid')
    		  , page = $(this).data('page')
    		  , width = $(this).data('width')
    		  , height = $(this).data('height');
    		$('body').append(buildPlayerPanel(aid, cid, page, width, height));
    		var $player = $('.bili-player');
    		preferredWidth = $player.width();
    		preferredHeight = $player.height();
    		autoResizePlayer(preferredWidth, preferredHeight);
    	});
    	$(window).resize(function(event) {
    		clearTimeout(resizeTimer);
    		resizeTimer = setTimeout(autoResizePlayer(preferredWidth, preferredHeight), 50);
    	});
    }
     
    init();