[版权声明] 本站内容采用 知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆 (CC BY-NC-SA 3.0 CN) 进行许可。
部分内容和资源来自网络,纯学习研究使用。如有侵犯您的权益,请及时联系我,我将尽快处理。
如转载请注明来自: Broly的博客,本文链接: 虎牙直播网页全屏
现在的直播不可谓不流行,各大直播网站逐渐崛起,给网民生活提供了不少的乐趣。我也挺喜欢看直播的,累的时候可以看直播放松一下。有时候会去虎牙看直播,但是虎牙缺少一个功能,让人感到很蛋疼——没有网页全屏的功能!
反正到截止到写下这篇博文的时候(2015年2月13日)是没有,所以我自己想办法DIY了一个:
环境需求:
Chrome
Tampermonkey (Chrome的插件请预先安装)
在Tampermonkey 新建一个脚本
添加下面代码,按 Ctrl+s 保存。然后在设置里面修改: 加载位置 -> document-end -> 保存
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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键,即可退出网页全屏。