diff options
| author | Kristian Lyngstol <kristian@bohemians.org> | 2016-04-01 19:14:20 +0200 |
|---|---|---|
| committer | Kristian Lyngstol <kristian@bohemians.org> | 2016-04-01 19:14:20 +0200 |
| commit | bc83b07e4aa4c68f63f4e1b9f6f00757388ea13c (patch) | |
| tree | ccb9a45430645ea80bca1b3717e453e254229a0e /examples/tg16/web/stream.gathering.org/index.html | |
| parent | 1d2470a411e5eaac7e5a1c5d5b6b81e92c92f4a8 (diff) | |
| parent | 3dc8afb739a03459393d3cda79bd16cefff15cae (diff) | |
Merge branch 'master' of github.com:tech-server/tgmanage
Diffstat (limited to 'examples/tg16/web/stream.gathering.org/index.html')
| -rw-r--r-- | examples/tg16/web/stream.gathering.org/index.html | 187 |
1 files changed, 187 insertions, 0 deletions
diff --git a/examples/tg16/web/stream.gathering.org/index.html b/examples/tg16/web/stream.gathering.org/index.html new file mode 100644 index 0000000..9a3670c --- /dev/null +++ b/examples/tg16/web/stream.gathering.org/index.html @@ -0,0 +1,187 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>The Gathering 2016 Streams</title> + + <!-- Mobile specific + ----------------------> + <meta name="viewport" content="width=device-width, initial-scale=0.35"> + + <!-- CSS specifics + --------------------> + <link rel="stylesheet" href="./resources/css/normalize.css"> + <link rel="stylesheet" href="./resources/css/skeleton.css"> + <link rel="stylesheet" href="./resources/css/core.css"> + <link rel="stylesheet" href="./resources/css/button-styles.css"> + + <style type="text/css"> + .vjs-big-play-button { + top:0; + left:0; + right:0; + bottom:0; + margin:auto; + } + </style> + + <!-- JavaScript specifics + ----------------------------> + <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> + <link href="//vjs.zencdn.net/5.8/video-js.min.css" rel="stylesheet"> + <script type="text/javascript" src="//www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script> + + <script type="text/javascript"> + function swapVideo (url) { + window.location = '/?url=' + encodeURIComponent(url);//window.btoa(url); + } + + var _float = true; + + function animateFloat() { + if(_float) { + $("#floater").animate({top: '-=20px'}, "slow"); + $("#floater").animate({top: '+=20px'}, "slow", animateFloat); + } + } + + function toggleAnimation() { + $('#bubble').stop().fadeOut( 400 ); + if(_float) { + _float = false; + $("#floater").delay(800).animate({top: '172px'}, "slow"); + } else { + _float = true; + animateFloat(); + } + } + + $(document).ready(function() { + $("#floater").click(function() { + toggleAnimation(); + }); + $("#bubble").click(function() { + toggleAnimation(); + }); + + //animateFloat(); + //$( "#bubble" ).delay( 5000 ).fadeOut( 400 ); + }); + </script> + + <style type="text/css"> + #floater { + position: absolute; + top: 172px; + right: 0px; + width: 531px; + height: 396px; + //background-image: url('/resources/images/floater.svg'); + background-size: cover; + } + + #bubble { + position: absolute; + visibility: hidden; + top: 62px; + right: 170px; + width: 200px; + height: 25px; + color: #000000; + cursor: pointer; + } + </style> + +<!-- creative, event och game --> +</head> +<body> + <div id="header"> + <img src="resources/images/thegathering.png" width="400"> + </div> + <div class="section"> + <div class="container"> + <div class="row"> + <div class="twelve columns" style="margin-top: 85px;"> + <h1>Takk for i år!</h1> + <h3 style="color: grey;"><3 Streamteam</h3> + </div> + </div> + </div> + </div> + + +<script src="//vjs.zencdn.net/5.8/video.js"></script> +<script src="./resources/js/videojs-contrib-hls.js"></script> +<script> + +// GOOGLE CAST + +var current_media; +var session; + +function show_castposter() { + stop_loader(); + castposter.style.display = 'block'; + loader.style.display = 'none'; + video.style.display = 'none'; +} + +function hide_castposter() { + castposter.style.display = 'none'; + loader.style.display = 'none'; + video.style.display = 'inline'; +} + +function stop_casting() { + hide_castposter(); + if (current_media) { + var media = current_media; + current_media = null; + media.stop(); + } + if (session) { + session.stop(); + session = null; + } +} + +function cast_current_video() { + if (session === undefined || selected_stream === undefined) { + return; + } + var title = streams[selected_stream].name; + var url = streams[selected_stream].url; + document.getElementById('casttarget').textContent = session.receiver.friendlyName; + show_castposter(); + video.pause(); + // If we are already casting this, do nothing. + if (current_media && current_media.media.contentId === url) { + console.log("Already casting " + url + " to " + session.receiver.friendlyName + " (" + current_media.playerState + ")"); + return; + } + if (current_media) { + current_media = null; // Signal to on_media_status_update. + } + var media_info = new chrome.cast.media.MediaInfo(url, "video/mp4"); + media_info.metadata = new chrome.cast.media.GenericMediaMetadata(); + media_info.metadata.title = global_title; // + ': ' + title; + var request = new chrome.cast.media.LoadRequest(media_info); + session.loadMedia(request, + on_media_discovered.bind(this, 'loadMedia'), + on_media_error); +} + +var techOrder = ["html5", "flash"]; +if (navigator.userAgent.match(/Trident|Edge|OPR/)) { + console.log("hit!"); + techOrder = ["flash", "html5"]; + //var video = document.getElementById('video'); + //video.src = "http://bleh"; +} +var player = videojs('stream', { + techOrder: techOrder +}); +player.play(); +</script> +</body> +</html> |