A Pen by One Tech Genius on CodePen.
Created
April 30, 2016 00:30
-
-
Save onetechgenius/50ce8150756318b551131bcefe86a1a5 to your computer and use it in GitHub Desktop.
premium live streams
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <title><h1>TEST</h1></title> | |
| <body><h1>LIVE TV</h1> | |
| <div class="wrapper"> | |
| <ul class="gallery"> | |
| <li style="text-align: center;"><a href="https://dl.dropboxusercontent.com/u/537572325/NEW_IPTV/TBS/index.html" data-tooltip=:"TBS"><img height="150px" src="https://lh5.googleusercontent.com/-E1aBk7qShjg/AAAAAAAAAAI/AAAAAAAADVQ/XPQkaatcn8A/photo.jpg" width="250px" /></a</li> | |
| <li style="text-align: center;"><a href="https://dl.dropboxusercontent.com/u/537572325/NEW_IPTV/FOX/index.html" data-tooltip=:"FOX"><img height="150px" src="http://www.fox.com/sites/default/files/fox_logo_1.jpg" width="250px" /></a</li> | |
| <li style="text-align: center;"><a href="https://dl.dropboxusercontent.com/u/537572325/NEW_IPTV/ESPN/index.html" data-tooltip=:"ESPN"><img height="150px" src="http://movietvtechgeeks.com/wp-content/uploads/2015/08/espn-earning-hatred-nfl-nba-2015-images.png" width="250px" /></a</li> | |
| <li style="text-align: center;"><a href="https://dl.dropboxusercontent.com/u/537572325/NEW_IPTV/ItsAlwaysSunny/index.html" data-tooltip=:"Its Always Sunny In Philadelphia"><img height="150px" src="http://teemato.com/wp-content/uploads/its-always-sunny-in-philadelphia-tshirt.png" width="250px" /></a</li> | |
| <li style="text-align: center;"><a href="https://dl.dropboxusercontent.com/u/537572325/NEW_IPTV/HistoryChannel/index.html" data-tooltip=:"History Channel"><img height="150px" src="https://lh3.googleusercontent.com/-tIQN2Z8Fv0k/AAAAAAAAAAI/AAAAAAAABTo/QCmjgk-l7jo/s0-c-k-no-ns/photo.jpg" width="250px" /></a</li> | |
| <li style="text-align: center;"><a href="http://graykgwnlive-i.akamaihd.net/hls/live/217552/KGWN/master.m3u8" data-tooltip="WY Wyoming,KGWN NewsChannel 5"><img height="150px" src="http://media.graytvinc.com/designimages/580*315/KGWNlogo.jpg" width="250px" /></a></li> | |
| <li style="text-align: center;"><a href="http://graykcwylive-i.akamaihd.net/hls/live/217449/KCWY/master.m3u8" data-tooltip="WY Wyoming,KCWY News 13"><img height="150px" src="https://s3.amazonaws.com/content.dashboard.socialnewsdesk.com/KCWY_News_Content_App_Default_Thumbnail_B9122.jpg" width="250px" /></a></li> | |
| <li style="text-align: center;"><a href="http://wtrf-lh.akamaihd.net/i/WTRF_1020@78349/master.m3u8" data-tooltip="WV West Virginia,WTRF 7 News"><img height="150px" src="https://pbs.twimg.com/profile_images/661184986/wtrf_400x400.png" width="250px" /></a></li> | |
| <li style="text-align: center;"><a href="http://play-prod1.live.anvato.net/server/play/gray-wtap-dfp/master.m3u8" data-tooltip="WV West Virginia,WTAP News 15"><img height="150px" src="http://media.graytvinc.com/designimages/TNC21.jpg" width="250px" /></a></li> | |
| <li style="text-align: center;"><a href="http://wboy-lh.akamaihd.net/i/WBOY_1015@62282/master.m3u8" data-tooltip="WV West Virginia,WBOY 12 News"><img height="150px" src="https://pbs.twimg.com/profile_images/3149377513/8ca17ab292bc6db001946ab417f9ecf0_400x400.jpeg" width="250px" /></a></li> | |
| <li style="text-align: center;"><a href="http://play-prod1.live.anvato.net/server/play/gray-wsazhnt-dfp/master.m3u8" data-tooltip="WV West Virginia,WSAZ News 3"><img height="150px" src="http://media.graytvinc.com/designimages/720*360/wsaz_default_200x100.png" width="250px" /></a></li> | |
| <li style="text-align: center;"><a href="http://wowk-lh.akamaihd.net/i/WOWK_1018@76648/master.m3u8" data-tooltip="WV West Virginia,WOWK 13 News"><img height="150px" src="https://pbs.twimg.com/profile_images/621661748349804545/2THlho9Q.jpg" width="250px" /></a></li> | |
| <li style="text-align: center;"><a href="http://wvns-lh.akamaihd.net/i/WVNS_1019@76768/master.m3u8" data-tooltip="WV West Virginia,WVNS 59 News"><img height="150px" src="http://ftpcontent.worldnow.com/wowk/custom/Live_Stream_Graphics/WVNS.jpg" width="250px" /></a></li> | |
| <li style="text-align: center;"><a href="http://cdn.bimvidlive.com/wjfw1/wjfw1/master.m3u8" data-tooltip="WI Wisconsin,WJFW Newswatch 12"><img height="150px" src="https://s-media-cache-ak0.pinimg.com/136x136/01/6c/7b/016c7b0fcd8b451ca39b149bd2834dc2.jpg" width="250px" /></a></li></ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var offset = 300, | |
| //browser window scroll (in pixels) after which the "back to top" link opacity is reduced | |
| offset_opacity = 1200, | |
| //duration of the top scrolling animation (in ms) | |
| scroll_top_duration = 700; | |
| var mainFunction = | |
| { | |
| elements: { | |
| container : ".container", | |
| containerInner : ".container-inner", | |
| videoPlayerContainer: ".video-player-container", | |
| videoContainer : ".video-container", | |
| playerContainer : ".player-container", | |
| mediaVideo : "#media-video", | |
| playControl : ".play-control", | |
| playButton : ".play-button", | |
| pauseButton : ".pause-button", | |
| volumeControl : ".volume-control", | |
| volumeButton : ".volume-button", | |
| volumeButtonMute : ".volume-button-mute", | |
| progress : ".progress", | |
| progressOver : ".progress-over", | |
| progressHidden : ".progress-hidden", | |
| progressBackground : ".progress-background", | |
| indicator : ".indicator", | |
| fullScreenButton : ".fullscreen-button" | |
| }, | |
| isPlay : true, | |
| isVolume : true, | |
| isEnd : false, | |
| progressBarHeight : 100, | |
| init: function(){ | |
| mainFunction.defaultSettings(); | |
| mainFunction.clickSettings(); | |
| mainFunction.playControlVideo(); | |
| mainFunction.volumeControlVideo(); | |
| mainFunction.progressControlVideo(); | |
| mainFunction.mouseHideControl(); | |
| }, | |
| defaultSettings: function(){ | |
| $(mainFunction.elements.mediaVideo)[0].controls = false; | |
| $(window).on("resize", onResize); | |
| function onResize(){ | |
| $(mainFunction.elements.progress).width( $(mainFunction.elements.playerContainer).width() - 223 ); | |
| $(mainFunction.elements.progressBackground).width( $(mainFunction.elements.playerContainer).width() - 223 - 40 ); | |
| $(mainFunction.elements.progressHidden).width( $(mainFunction.elements.playerContainer).width() - 223 - 40 ); | |
| mainFunction.progressBarHeight = $(mainFunction.elements.playerContainer).width() - 223 - 40; | |
| $(mainFunction.elements.progressOver).css("width", String( (mainFunction.progressBarHeight / $(mainFunction.elements.mediaVideo)[0].duration) * $(mainFunction.elements.mediaVideo)[0].currentTime )); | |
| } | |
| onResize(); | |
| }, | |
| clickSettings: function(){ | |
| $(mainFunction.elements.playControl).on("click", mainFunction.playControlVideo); | |
| $(mainFunction.elements.volumeControl).on("click", mainFunction.volumeControlVideo); | |
| $(mainFunction.elements.mediaVideo).on("click", mainFunction.playControlVideo); | |
| $(mainFunction.elements.fullScreenButton).on("click", mainFunction.fullScreenControl); | |
| $("body").on("keyup", function(e){ if(e.which == 27) { mainFunction.exitFullScreen(); } }); | |
| }, | |
| fullScreenControl:function(){ | |
| if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) | |
| { | |
| if (document.documentElement.requestFullscreen) | |
| { | |
| document.documentElement.requestFullscreen(); | |
| mainFunction.onFullScreen(); | |
| } | |
| else if (document.documentElement.msRequestFullscreen) | |
| { | |
| document.documentElement.msRequestFullscreen(); | |
| mainFunction.onFullScreen(); | |
| } | |
| else if (document.documentElement.mozRequestFullScreen) | |
| { | |
| document.documentElement.mozRequestFullScreen(); | |
| mainFunction.onFullScreen(); | |
| } | |
| else if (document.documentElement.webkitRequestFullscreen) | |
| { | |
| document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); | |
| mainFunction.onFullScreen(); | |
| } | |
| } | |
| else | |
| { | |
| if (document.exitFullscreen) | |
| { | |
| document.exitFullscreen(); | |
| mainFunction.exitFullScreen(); | |
| } | |
| else if(document.msExitFullscreen) | |
| { | |
| document.msExitFullscreen(); | |
| mainFunction.exitFullScreen(); | |
| } | |
| else if (document.mozCancelFullScreen) | |
| { | |
| document.mozCancelFullScreen(); | |
| mainFunction.exitFullScreen(); | |
| } | |
| else if (document.webkitExitFullscreen) | |
| { | |
| document.webkitExitFullscreen(); | |
| mainFunction.exitFullScreen(); | |
| } | |
| } | |
| }, | |
| onFullScreen: function(){ | |
| $(mainFunction.elements.progressOver).css("width", String( (mainFunction.progressBarHeight / $(mainFunction.elements.mediaVideo)[0].duration) * $(mainFunction.elements.mediaVideo)[0].currentTime )); | |
| $(mainFunction.elements.container).css("display", "block"); | |
| $(mainFunction.elements.videoPlayerContainer).width("100%"); | |
| $(mainFunction.elements.videoPlayerContainer).height("100%"); | |
| $(mainFunction.elements.videoContainer).height("calc(100% - 40px)"); | |
| $(mainFunction.elements.progress).width( $(mainFunction.elements.playerContainer).width() - 223 ); | |
| $(mainFunction.elements.progressBackground).width( $(mainFunction.elements.playerContainer).width() - 223 - 40 ); | |
| $(mainFunction.elements.progressHidden).width( $(mainFunction.elements.playerContainer).width() - 223 - 40 ); | |
| mainFunction.progressBarHeight = $(mainFunction.elements.playerContainer).width() - 223 - 40; | |
| $(".container-inner").css("display", "none"); | |
| }, | |
| exitFullScreen: function(){ | |
| $(mainFunction.elements.container).css("display", "-webkit-box"); | |
| $(mainFunction.elements.container).css("display", "-moz-box"); | |
| $(mainFunction.elements.container).css("display", "-ms-flexbox"); | |
| $(mainFunction.elements.container).css("display", "-webkit-flex"); | |
| $(mainFunction.elements.container).css("display", "flex"); | |
| $(mainFunction.elements.videoPlayerContainer).width("648"); | |
| $(mainFunction.elements.videoPlayerContainer).height("350"); | |
| $(mainFunction.elements.videoContainer).height("310"); | |
| $(mainFunction.elements.progress).width( $(mainFunction.elements.playerContainer).width() - 223 ); | |
| $(mainFunction.elements.progressBackground).width( $(mainFunction.elements.playerContainer).width() - 223 - 40 ); | |
| $(mainFunction.elements.progressHidden).width( $(mainFunction.elements.playerContainer).width() - 223 - 40 ); | |
| mainFunction.progressBarHeight = $(mainFunction.elements.playerContainer).width() - 223 - 40; | |
| $(mainFunction.elements.progressOver).css("width", String( (mainFunction.progressBarHeight / $(mainFunction.elements.mediaVideo)[0].duration) * $(mainFunction.elements.mediaVideo)[0].currentTime )); | |
| $(".container-inner").css("display", "inherit"); | |
| }, | |
| mouseHideControl: function(){ | |
| var mouseHide = setTimeout(onMouseHide, 3000); | |
| $(mainFunction.elements.containerInner).on("mousemove", function(){ | |
| clearTimeout( mouseHide ); | |
| onMouseShow(); | |
| }); | |
| $(mainFunction.elements.containerInner).on("mousemoveend", function(){ | |
| clearTimeout( mouseHide ); | |
| mouseHide = setTimeout(onMouseHide, 3000); | |
| }); | |
| function onMouseHide(){ $("body").css("cursor", "none"); } | |
| function onMouseShow(){ $("body").css("cursor", "inherit"); } | |
| }, | |
| playControlVideo: function(){ | |
| if(mainFunction.isPlay) { $(mainFunction.elements.mediaVideo)[0].play(); } else { $(mainFunction.elements.mediaVideo)[0].pause(); } | |
| $(mainFunction.elements.playButton).css("display", ( (mainFunction.isPlay) ? "none" : "table-cell" ) ); | |
| $(mainFunction.elements.pauseButton).css("display", ( (!mainFunction.isPlay) ? "none" : "table-cell" ) ); | |
| mainFunction.isPlay = !mainFunction.isPlay; | |
| mainFunction.isEnd = false; | |
| }, | |
| volumeControlVideo: function(){ | |
| $(mainFunction.elements.mediaVideo)[0].muted = !mainFunction.isVolume; | |
| $(mainFunction.elements.volumeButtonMute).css("display", ( (mainFunction.isVolume) ? "none" : "table-cell" ) ); | |
| $(mainFunction.elements.volumeButton).css("display", ( (!mainFunction.isVolume) ? "none" : "table-cell" ) ); | |
| mainFunction.isVolume = !mainFunction.isVolume; | |
| }, | |
| progressControlVideo: function(){ | |
| var mouseX = 0; | |
| var isDown = false; | |
| var currentMinute = 0; | |
| var currentSecond = 0; | |
| var mediaPlayer = $(mainFunction.elements.mediaVideo)[0]; | |
| mediaPlayer.addEventListener("timeupdate", onProgressVideo, false); | |
| function onProgressVideo(){ | |
| $(mainFunction.elements.progressOver).css("width", String( (mainFunction.progressBarHeight / mediaPlayer.duration) * mediaPlayer.currentTime )); | |
| videoEndControl(); | |
| setIndicator(mediaPlayer.currentTime, mediaPlayer.duration); | |
| } | |
| function videoEndControl(){ | |
| if(mediaPlayer.currentTime >= mediaPlayer.duration) | |
| { | |
| mainFunction.isPlay = false; | |
| mainFunction.playControlVideo(); | |
| mainFunction.isEnd = true; | |
| } | |
| } | |
| function setIndicator(current, duration){ | |
| var durationMinute = Math.floor(duration / 60); | |
| var durationSecond = Math.floor(duration - durationMinute * 60); | |
| var durationLabel = durationMinute + ":" + durationSecond; | |
| currentSecond = Math.floor(current); | |
| currentMinute = Math.floor(currentSecond / 60); | |
| currentSecond = currentSecond - ( currentMinute * 60 ); | |
| currentSecond = ( String(currentSecond).length > 1 ) ? currentSecond : ( String("0") + currentSecond ); | |
| var currentLabel = currentMinute + ":" + currentSecond; | |
| var indicatorLabel = currentLabel + " / " + durationLabel; | |
| $(mainFunction.elements.indicator).text( indicatorLabel ); | |
| } | |
| $(mainFunction.elements.progressHidden).on("mousemove", onProgressHiddenMouseMove); | |
| function onProgressHiddenMouseMove(e){ | |
| var parentOffset = $(this).parent().offset(); | |
| mouseX = Math.floor( e.pageX - parentOffset.left - 20 ); | |
| if(isDown) { mediaPlayer.currentTime = (mediaPlayer.duration / mainFunction.progressBarHeight) * mouseX; } | |
| } | |
| $(mainFunction.elements.progressHidden).on("click", function(){ if(!isDown) { mediaPlayer.currentTime = (mediaPlayer.duration / mainFunction.progressBarHeight) * mouseX; } }); | |
| $(mainFunction.elements.progressHidden).on("mousedown", onProgressHiddenMouseDown); | |
| function onProgressHiddenMouseDown(){ | |
| isDown = true; | |
| mediaPlayer.currentTime = (mediaPlayer.duration / mainFunction.progressBarHeight) * mouseX; | |
| $(mainFunction.elements.mediaVideo)[0].pause(); | |
| } | |
| $(mainFunction.elements.progressHidden).on("mouseup", function(){ isDown = false; if(!mainFunction.isEnd) { mainFunction.isPlay = true; mainFunction.playControlVideo(); } }); | |
| $(mainFunction.elements.progressHidden).on("mouseout", function(){ isDown = false; if(!mainFunction.isEnd) { mainFunction.isPlay = true; mainFunction.playControlVideo(); } }); | |
| } | |
| }; | |
| $(document).on("ready", mainFunction.init); | |
| (function ($) { | |
| var timeout; | |
| $(document).on('mousemove', function (event) { | |
| if (timeout !== undefined) { | |
| window.clearTimeout(timeout); | |
| } | |
| timeout = window.setTimeout(function () { | |
| $(event.target).trigger('mousemoveend'); | |
| }, 100); | |
| }); | |
| }(jQuery)); | |
| var offset = 300, | |
| //browser window scroll (in pixels) after which the "back to top" link opacity is reduced | |
| offset_opacity = 1200, | |
| //duration of the top scrolling animation (in ms) | |
| scroll_top_duration = 700; | |
| //@ sourceURL=pen.js |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| AudioManager am = mContext.getSystemService(Context.AUDIO_SERVICE); | |
| ... | |
| // Start listening for button presses | |
| am.registerMediaButtonEventReceiver(RemoteControlReceiver); | |
| ... | |
| // Stop listening for button presses | |
| am.unregisterMediaButtonEventReceiver(RemoteControlReceiver); | |
| body { | |
| color: Yellow; | |
| } | |
| h1 { | |
| color: #ffff00; | |
| } | |
| p { | |
| color: rgb(255,255,0); | |
| } | |
| .cd-top.cd-is-visible { | |
| /* the button becomes visible */ | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .cd-top.cd-fade-out { | |
| /* if the user keeps scrolling down, the button is out of focus and becomes less visible */ | |
| opacity: .5; | |
| } | |
| @import url(http://fonts.googleapis.com/css?family=Open+Sans:600); | |
| body { | |
| background:url('https://dl.dropboxusercontent.com/u/537572325/IMAGES4HTML/sportbackground.png'); | |
| font-family: 'Open Sans', sans-serif; | |
| font-weight:600; | |
| text-align:center; | |
| } | |
| .wrapper { | |
| margin: 0 auto; | |
| margin-top:2%; | |
| } | |
| ul.gallery { | |
| position: relative; | |
| z-index: 1; | |
| overflow: hidden; | |
| list-style: none; | |
| padding:5px; | |
| } | |
| ul.gallery li { | |
| border:5px solid #fff; | |
| position: relative; | |
| display:inline-block; | |
| width: 250px; | |
| height: 150px; | |
| margin: 0 30px 30px 0; | |
| background: #fff; | |
| -webkit-box-shadow: 0 1px 4px #ccc, 0 0 40px #ccc inset; | |
| -moz-box-shadow: 0 1px 4px #ccc, 0 0 40px #ccc inset; | |
| box-shadow: 0 1px 4px #ccc, 0 0 40px #ccc inset;} | |
| ul.gallery li:before, | |
| ul.gallery li:after { | |
| content: ''; | |
| z-index: -1; | |
| position: absolute; | |
| left: 10px; | |
| bottom: 10px; | |
| width: 70%; | |
| height: 55%; | |
| -webkit-box-shadow: 0 15px 16px #6b6b6b; | |
| -moz-box-shadow: 0 15px 16px #6b6b6b; | |
| box-shadow: 0 15px 16px #6b6b6b; | |
| -webkit-transform: skew(-15deg) rotate(-6deg); | |
| -moz-transform: skew(-15deg) rotate(-6deg); | |
| -ms-transform: skew(-15deg) rotate(-6deg); | |
| -o-transform: skew(-15deg) rotate(-6deg); | |
| transform: skew(-15deg) rotate(-6deg); | |
| } | |
| ul.gallery li:after { | |
| left: auto; | |
| right: 11px; | |
| -webkit-transform: skew(15deg) rotate(6deg); | |
| -moz-transform: skew(15deg) rotate(6deg); | |
| -ms-transform: skew(15deg) rotate(6deg); | |
| -o-transform: skew(15deg) rotate(6deg); | |
| transform: skew(15deg) rotate(6deg); | |
| } | |
| a img { | |
| border:none; | |
| } | |
| a { | |
| position: relative; | |
| text-decoration: none; | |
| } | |
| a:after { | |
| content: attr(data-tooltip); | |
| position: absolute; | |
| bottom: 0%; | |
| top; | |
| left: 0; | |
| background: #111; | |
| padding: 5px 15px; | |
| color: white; | |
| font-family: 'Open Sans', sans-serif; | |
| text-shadow: 0px 0px 1px #000; | |
| white-space: nowrap; | |
| opacity: 0; | |
| -webkit-transition: all 0.4s ease; | |
| -moz-transition : all 0.4s ease; | |
| width:85; | |
| } | |
| a:before { | |
| content: ""; | |
| position: absolute; | |
| width: 0; | |
| height: 0; | |
| -webkit-transition: all 0.4s ease; | |
| -moz-transition : all 0.4s ease; | |
| opacity: 0; | |
| left: 30%; | |
| bottom: 90%; | |
| } | |
| a:hover:after { | |
| bottom: 100%; | |
| } | |
| a:hover:before { | |
| bottom: 70%; | |
| } | |
| a:hover:after, a:hover:before { | |
| opacity: 1; | |
| } | |
| .cd-top.cd-is-visible { | |
| /* the button becomes visible */ | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| //browser window scroll (in pixels) after which the "back to top" link is shown | |
| var offset = 300, | |
| //browser window scroll (in pixels) after which the "back to top" link opacity is reduced | |
| offset_opacity = 1200, | |
| //duration of the top scrolling animation (in ms) | |
| scroll_top_duration = 700; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment