虎牙直播网页全屏 | Broly的博客

[版权声明] 本站内容采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆 (CC BY-NC-SA 3.0 CN) 进行许可。
部分内容和资源来自网络，纯学习研究使用。如有侵犯您的权益，请及时联系我，我将尽快处理。
如转载请注明来自： Broly的博客，本文链接：虎牙直播网页全屏

现在的直播不可谓不流行，各大直播网站逐渐崛起，给网民生活提供了不少的乐趣。我也挺喜欢看直播的，累的时候可以看直播放松一下。有时候会去虎牙看直播，但是虎牙缺少一个功能，让人感到很蛋疼——没有网页全屏的功能！

反正到截止到写下这篇博文的时候（2015年2月13日）是没有，所以我自己想办法DIY了一个：

环境需求：

Chrome

Tampermonkey （Chrome的插件请预先安装）

在Tampermonkey 新建一个脚本

添加下面代码，按 Ctrl+s 保存。然后在设置里面修改：加载位置 -> document-end -> 保存

// ==UserScript==
// @name         huya full browser
// @namespace    http://blog.dreamlikes.cn
// @version      1.0.0
// @description  虎牙网页全屏
// @author       Broly
// @include     /http://www.huya.com/[0-9a-zA-Z]+$/
// @grant        none
// ==/UserScript==

/**
 *  添加自定义的样式
 */
function addStyle(_css) {
    var body = document.getElementsByTagName('body')[0];
    var style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = _css;
    body.appendChild(style);
}

/**
 *  适应屏幕
 */
function adaptBrowser(){
    var ww = $(window).width();
    var wh = $(window).height();
    $("#liveRoomObj").css({
            "width" : ww,
            "height" : wh,
     });
     $("body").css({
            "width" : ww,
            "height" : wh,
     });
}

function fullBrowser(){
    currentTop = $('body').scrollTop();

    $("#liveRoomObj").addClass("fb-liveRoomObj");
    //	隐藏滚动条
    $("body").addClass("fb-body");

    $("#exitbtn").show();

   	adaptBrowser();
    $(window).bind('resize', adaptBrowser);
}

function fullExit(){
        $("#liveRoomObj").removeClass("fb-liveRoomObj");
    	$("#liveRoomObj").removeAttr('style');
        $("body").removeClass("fb-body");
    	$("body").removeAttr('style');

    	$("#fullbtn").show();

    	$(window).unbind('resize');

    	$('body').animate({scrollTop: currentTop}, 800);
}

/**
 *  初始化
 */
function init(){

    // 如果没有直播则退出
    if(!$('.room-bd').length) return;

    // 1. 添加样式
    addStyle('.fb-liveRoomObj { position:fixed;top:0;left:0;z-index:10001; }');
    addStyle('.fb-body { overflow:hidden; }');
    addStyle('#fullbtn,#exitbtn { position:absolute;right:0;top:80%;width:40px;height:40px;line-height:40px;text-align:center;color:#fff;background:#fa0;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;cursor:pointer; } #exitbtn { display:none; } #fullbtn:hover,#exitbtn:hover { filter:alpha(opacity=100);-moz-opacity:1;opacity:1; }');

    // 2.添加元素
    //   -- 添加网页全屏按钮, 退出按钮
    var Btns = '<div id="fullbtn">全屏</div><div id="exitbtn">退出</div>';
    $("#liveRoomObj").append(Btns);

    // 3.绑定事件
    $("#fullbtn").click(function(){
        $(this).hide();
     	fullBrowser();
    });
    $("#exitbtn").click(function(){
        $(this).hide();
		fullExit();
    });

    // 4.按ESC可以退出
    $(document).keydown(function(event){
        if(event.keyCode == 27){
            var exitBtn = $("#exitbtn");
            if(!exitBtn.is(":hidden")){
            	exitBtn.click();
            }
        }
     });
}

var currentTop = 0;
init();

100

101

102

103

104

// ==UserScript==

// @name huya full browser

// @namespace http://blog.dreamlikes.cn

// @version 1.0.0

// @description 虎牙网页全屏

// @author Broly

// @include /http://www.huya.com/[0-9a-zA-Z]+$/

// @grant none

// ==/UserScript==

/**

* 添加自定义的样式

function addStyle(_css) {

var body = document.getElementsByTagName('body')[0];

var style = document.createElement('style');

style.type = 'text/css';

style.innerHTML = _css;

body.appendChild(style);

}

/**

* 适应屏幕

function adaptBrowser(){

var ww = $(window).width();

var wh = $(window).height();

$("#liveRoomObj").css({

"width" : ww,

"height" : wh,

});

$("body").css({

"width" : ww,

"height" : wh,

});

}

function fullBrowser(){

currentTop = $('body').scrollTop();

$("#liveRoomObj").addClass("fb-liveRoomObj");

// 隐藏滚动条

$("body").addClass("fb-body");

$("#exitbtn").show();

adaptBrowser();

$(window).bind('resize', adaptBrowser);

}

function fullExit(){

$("#liveRoomObj").removeClass("fb-liveRoomObj");

$("#liveRoomObj").removeAttr('style');

$("body").removeClass("fb-body");

$("body").removeAttr('style');

$("#fullbtn").show();

$(window).unbind('resize');

$('body').animate({scrollTop: currentTop}, 800);

}

/**

* 初始化

function init(){

// 如果没有直播则退出

if(!$('.room-bd').length) return;

// 1. 添加样式

addStyle('.fb-liveRoomObj { position:fixed;top:0;left:0;z-index:10001; }');

addStyle('.fb-body { overflow:hidden; }');

addStyle('#fullbtn,#exitbtn { position:absolute;right:0;top:80%;width:40px;height:40px;line-height:40px;text-align:center;color:#fff;background:#fa0;filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;cursor:pointer; } #exitbtn { display:none; } #fullbtn:hover,#exitbtn:hover { filter:alpha(opacity=100);-moz-opacity:1;opacity:1; }');

// 2.添加元素

// -- 添加网页全屏按钮, 退出按钮

var Btns = '<div id="fullbtn">全屏</div><div id="exitbtn">退出</div>';

$("#liveRoomObj").append(Btns);

// 3.绑定事件

$("#fullbtn").click(function(){

$(this).hide();

fullBrowser();

});

$("#exitbtn").click(function(){

$(this).hide();

fullExit();

});

// 4.按ESC可以退出

$(document).keydown(function(event){

if(event.keyCode == 27){

var exitBtn = $("#exitbtn");

if(!exitBtn.is(":hidden")){

exitBtn.click();

}

});

}

var currentTop = 0;

init();

然后在直播间刷新一下页面，如果主播在直播的话，就会看到如下效果：

看图中右下角绿色箭头指的地方，会多出一个按钮，点击即可网页全屏。

点击退出按钮或者按键盘ESC键，即可退出网页全屏。

如果本文对您有所帮助，可以请作者喝杯咖啡，感谢支持^_^

支付宝支付

微信支付

学无止境 | 强者之心