Created
October 10, 2014 07:42
-
-
Save talves/ed11d25b5bb4a0a599af to your computer and use it in GitHub Desktop.
Famous App Famo.us Video with Attributes // source http://jsbin.com/botija/2
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
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="description" content="Famo.us Video with Attributes" /> | |
<meta charset="utf-8"> | |
<title>Famous App</title> | |
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" /> | |
<meta name="mobile-web-app-capable" content="yes" /> | |
<meta name="apple-mobile-web-app-capable" content="yes" /> | |
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> | |
<script type="text/javascript" src="http://code.famo.us/lib/functionPrototypeBind.js"></script> | |
<script type="text/javascript" src="http://code.famo.us/lib/classList.js"></script> | |
<script type="text/javascript" src="http://code.famo.us/lib/requestAnimationFrame.js"></script> | |
<!-- famous --> | |
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.0/famous.css" /> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"></script> | |
<script type="text/javascript" src="http://code.famo.us/famous/0.3.0/famous.min.js"></script> | |
<script type="text/javascript">require(['main']);console.log('------------start------------')</script> | |
<style id="jsbin-css"> | |
html { | |
background: #fff; | |
} | |
.double-sided { | |
-webkit-backface-visibility: visible; | |
backface-visibility: visible; | |
} | |
.double-font { | |
font-size: 2em; | |
} | |
</style> | |
</head> | |
<body class='famous-root'> | |
<script id="jsbin-javascript"> | |
define('main', function (require, exports, module) { | |
var Engine = require('famous/core/Engine'); | |
var Modifier = require('famous/core/Modifier'); | |
var VideoSurface = require('famous/surfaces/VideoSurface'); | |
var mainContext = Engine.createContext(); | |
var vid = new VideoSurface(); | |
vid.setContent('http://media.w3.org/2010/05/sintel/trailer_hd.mp4'); | |
vid.mod = new Modifier({ | |
origin: [0.5, 0.5], | |
align: [0.5, 0.5] | |
}); | |
mainContext.add(vid.mod).add(vid); | |
vid.on('deploy', function(){ | |
vid.setOptions({ size: [undefined, undefined]}); | |
vid.setAttributes({ | |
autoplay: '', | |
controls: '', | |
loop: '' | |
}); | |
}); | |
}); | |
</script> | |
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="description" content="Famo.us Video with Attributes" /> | |
<meta charset="utf-8"> | |
<title>Famous App</title> | |
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" /> | |
<meta name="mobile-web-app-capable" content="yes" /> | |
<meta name="apple-mobile-web-app-capable" content="yes" /> | |
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> | |
<script type="text/javascript" src="http://code.famo.us/lib/functionPrototypeBind.js"><\/script> | |
<script type="text/javascript" src="http://code.famo.us/lib/classList.js"><\/script> | |
<script type="text/javascript" src="http://code.famo.us/lib/requestAnimationFrame.js"><\/script> | |
<\!-- famous --> | |
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.0/famous.css" /> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"><\/script> | |
<script type="text/javascript" src="http://code.famo.us/famous/0.3.0/famous.min.js"><\/script> | |
<script type="text/javascript">require(['main']);console.log('------------start------------')<\/script> | |
</head> | |
<body class='famous-root'> | |
</body> | |
</html></script> | |
<script id="jsbin-source-css" type="text/css">html { | |
background: #fff; | |
} | |
.double-sided { | |
-webkit-backface-visibility: visible; | |
backface-visibility: visible; | |
} | |
.double-font { | |
font-size: 2em; | |
} | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">define('main', function (require, exports, module) { | |
var Engine = require('famous/core/Engine'); | |
var Modifier = require('famous/core/Modifier'); | |
var VideoSurface = require('famous/surfaces/VideoSurface'); | |
var mainContext = Engine.createContext(); | |
var vid = new VideoSurface(); | |
vid.setContent('http://media.w3.org/2010/05/sintel/trailer_hd.mp4'); | |
vid.mod = new Modifier({ | |
origin: [0.5, 0.5], | |
align: [0.5, 0.5] | |
}); | |
mainContext.add(vid.mod).add(vid); | |
vid.on('deploy', function(){ | |
vid.setOptions({ size: [undefined, undefined]}); | |
vid.setAttributes({ | |
autoplay: '', | |
controls: '', | |
loop: '' | |
}); | |
}); | |
});</script></body> | |
</html> |
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
html { | |
background: #fff; | |
} | |
.double-sided { | |
-webkit-backface-visibility: visible; | |
backface-visibility: visible; | |
} | |
.double-font { | |
font-size: 2em; | |
} |
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
define('main', function (require, exports, module) { | |
var Engine = require('famous/core/Engine'); | |
var Modifier = require('famous/core/Modifier'); | |
var VideoSurface = require('famous/surfaces/VideoSurface'); | |
var mainContext = Engine.createContext(); | |
var vid = new VideoSurface(); | |
vid.setContent('http://media.w3.org/2010/05/sintel/trailer_hd.mp4'); | |
vid.mod = new Modifier({ | |
origin: [0.5, 0.5], | |
align: [0.5, 0.5] | |
}); | |
mainContext.add(vid.mod).add(vid); | |
vid.on('deploy', function(){ | |
vid.setOptions({ size: [undefined, undefined]}); | |
vid.setAttributes({ | |
autoplay: '', | |
controls: '', | |
loop: '' | |
}); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment