Skip to content

Instantly share code, notes, and snippets.

@jonathansadowski

jonathansadowski/receiver.html

Created August 26, 2013 18:53
Show Gist options
  • Save jonathansadowski/6345103 to your computer and use it in GitHub Desktop.
Save jonathansadowski/6345103 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
receiver.html
<!doctype html>
<html>
<head>
<style>
@-webkit-keyframes relocate {
0% { top:16px; }
50% { top: 64px; }
100% { top: 16px; }
}
video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
#display{
position:absolute;
top:16px;
left:0;
right:0;
height:48px;
font-size:36px;
font-weight:bold;
text-align:center;
background-color:rgba(0,0,0,.5);
color:rgba(0,255,0,.8);
display:none;
-webkit-animation: relocate 360s linear infinite;
}
</style>
</head>
<body>
<video id="video"></video>
<div id="display"></div>
<script src="https://www.gstatic.com/cast/js/receiver/1.0/cast_receiver.js"></script>
<script>
window.addEventListener('load', function() {
var lastTimeBroadcast = (new Date()).getTime();
var appId = '******replace with your app id******';
var receiver = new cast.receiver.Receiver(appId, ['******replace with your channel name******'], "", 5);
var display = document.getElementById('display');
var video = document.getElementById('video');
setInterval(function(){
var end=0, now=Math.floor(video.currentTime);
try{
end = Math.floor(video.seekable.end(0));
} catch (e) {}
nowM = Math.floor(now/60);
nowS = now % 60;
nowH = Math.floor(nowM/60);
nowM = nowM % 60;
while( (''+nowS).length < 2 ) nowS = '0' + nowS;
while( (''+nowM).length < 2 ) nowM = '0' + nowM;
while( (''+nowH).length < 2 ) nowH = '0' + nowH;
endM = Math.floor(end/60);
endS = end % 60;
endH = Math.floor(endM/60);
endM = endM % 60;
while( (''+endS).length < 2 ) endS = '0' + endS;
while( (''+endM).length < 2 ) endM = '0' + endM;
while( (''+endH).length < 2 ) endH = '0' + endH;
display.innerText= nowH + ':' + nowM + ':' + nowS + ' / ' + endH + ':' + endM + ':' + endS ;
},100);
var myvid = new cast.receiver.ChannelHandler('******replace with your channel name******');
myvid.addChannelFactory(receiver.createChannelFactory('******replace with your channel name******'));
var broadcast = function(event,message){
if( (new Date()).getTime() - lastTimeBroadcast < 1200 ) {
return;
}
lastTimeBroadcast = (new Date()).getTime();
var channels = myvid.getChannels();
for(var i = 0; i<channels.length; i++){
channels[i].send({action:'event',event:event,args:message});
}
};
video.addEventListener('timeupdate', function(evt) {
try {
var v = {
position:video.currentTime,
end:video.seekable.end(0),
percent:video.seekable.end(0) == 0 ? 0 : (video.currentTime / video.seekable.end(0)) * 100
};
broadcast('timeupdate', v);
} catch(e){}
});
video.addEventListener('stalled', function(evt) {
console.log(evt);
});
myvid.addEventListener(cast.receiver.Channel.EventType.MESSAGE, function(event) {
var callback = function(){};
var message = event.message;
if(message.callback){
callback = function(args){
event.target.send({
'action':'callback',
'callback':message.callback,
'args': args
});
};
}
switch(message.message.action){
case 'play':
video.play(); callback();
break;
case 'pause':
video.pause(); callback();
break;
case 'seek':
try{ video.currentTime = message.message.time; } catch (e) {} callback();
break;
case 'display':
display.style.display=(display.style.display=="block"?"none":"block");
break;
case 'src':
if(video.src != message.message.src) {
var cb = function(e){
callback();
video.removeEventListener('canplay', cb);
};
video.addEventListener('canplay', cb);
video.src = message.message.src;
} else {
callback();
}
break;
case 'volume':
cast.receiver.platform.setVolume(message.message.level);
callback();
break;
}
return true;
});
receiver.start();
});
</script>
</body>
</html>
Raw
sender.html
<!doctype html>
<html data-cast-api-enabled="true">
<head>
</head>
<body>
<ul id="receivers"></ul>
<h1>Video</h1>
src: <input type="text" id="videoSrc" /> <button onclick="cast_api.sendMessage(cv_activity.activityId, '******replace with your channel name******', {message:{action: 'src', src: document.getElementById('videoSrc').value}});">go</button><br />
<button onclick="cast_api.sendMessage(cv_activity.activityId, '******replace with your channel name******', {message:{action: 'play'}});">play</button> <button onclick="cast_api.sendMessage(cv_activity.activityId, '******replace with your channel name******', {message: {action: 'pause'}});">pause</button><br />
seek: <input type="text" id="videoTime" /> <button onclick="cast_api.sendMessage(cv_activity.activityId, '******replace with your channel name******', {message:{action: 'seek', time: document.getElementById('videoTime').value}});">go</button><br />
<script>
var appId = '******replace with your app id******';
var cast_api, cv_activity, receivers;
if (typeof cast != "undefined" && cast && cast.isAvailable) {
// Cast is known to be available
initializeApi();
} else {
// Wait for API to post a message to us
window.addEventListener("message", function(event) {
console.log(event.data);
if (event.source == window && event.data &&
event.data.source == "CastApi" &&
event.data.event == "Hello")
initializeApi();
});
};
initializeApi = function() {
cast_api = new cast.Api();
cast_api.addReceiverListener(appId, onReceiverList);
};
onReceiverList = function(list) {
// If the list is non-empty, show a widget with
// the friendly names of receivers.
// When a receiver is picked, invoke doLaunch with the receiver.
receivers = list;
var ul = document.createElement('ul');
for(var i = 0; i < list.length; i++) {
var li = document.createElement('li');
li.innerText = list[i].name + ' ';
var a = document.createElement('a');
a.innerText = 'Cast';
a.href = 'javascript:doLaunch(receivers['+i+']);';
li.appendChild(a);
ul.appendChild(li);
}
document.getElementById('receivers').innerHTML = ul.innerHTML;
};
doLaunch = function(receiver) {
var request = new cast.LaunchRequest(appId, receiver);
request.description = new cast.LaunchDescription();
request.description.text = "Video Player";
request.description.url = "...";
cast_api.launch(request, onLaunch);
};
onLaunch = function(activity) {
if (activity.status == "running") {
cv_activity = activity;
cast_api.addMessageListener(cv_activity.activityId, '******replace with your channel name******', onMessage);
} else if (activity.status == "error") {
cv_activity = null;
}
};
onMessage = function(message){
console.log(message);
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment