aframe-gui
Version:
A-Frame GUI components
131 lines (114 loc) • 3.54 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>A-Frame GUI Movie Player</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="js/aframe-gui.js"></script>
<script src="js/gui-env.js"></script>
</head>
<body>
<a-scene gui-env>
<a-assets>
<canvas id="canvasObj" crossorigin="anonymous" webkit-playsinline=""></canvas>
<a-asset-item id="iconfontsolid" src="assets/fonts/fa-solid-900.ttf"></a-asset-item>
<a-asset-item id="iconfontbrand" src="assets/fonts/fa-brands-400.ttf"></a-asset-item>
<a-asset-item id="textfont" src="assets/fonts/DiplomataSC-Regular.ttf"></a-asset-item>
<a-asset-item id="theater-obj" src="assets/theater.obj"></a-asset-item>
<video id="film" autoplay loop="true" muted webkit-playsinline playsinline src="assets/minority.mp4"></video>
</a-assets>
<a-entity
obj-model="obj: #theater-obj;"
material="color:#333"
position="-1 -0.25 0"
scale="0.025 0.025 0.025"
></a-entity>
<a-entity id="video-screen"
position="-1 1.6 -4.8"
geometry="primitive:plane; width:8; height:2.75;"
material="shader:flat; color:#fff; side:double; transparent:true; src:#film"
></a-entity>
<a-gui-flex-container
flex-direction="row" justify-content="center" align-items="normal" component-padding="0.1"
opacity="0.7" width="5.5" height="1"
position="0 0.45 -4" rotation="0 0 0" scale="0.5 0.5 0.5"
>
<a-gui-icon-button
width="0.75" height="0.75"
onclick="togglePlayback"
icon="f04b"
icon-font-size="0.3"
icon-font="assets/fonts/fa-solid-900.ttf"
>
</a-gui-icon-button>
<a-gui-icon-button
width="0.75" height="0.75"
onclick="stop"
icon="f04d"
icon-font-size="0.3"
icon-font="assets/fonts/fa-solid-900.ttf"
>
</a-gui-icon-button>
<a-gui-icon-button
width="0.75" height="0.75"
onclick="toggleSound"
icon="f6a9"
icon-font-size="0.4"
icon-font="assets/fonts/fa-solid-900.ttf"
>
</a-gui-icon-button>
<a-gui-toggle
width="2.75" height="0.75"
onclick="toggleCaps"
value="Captions"
font-family="assets/fonts/DiplomataSC-Regular.ttf"
>
</a-gui-toggle>
</a-gui-flex-container>
<a-sky color="#222"></a-sky>
<!-- Camera + cursor. -->
<a-entity id="cameraRig" position="0 1.6 0">
<a-camera look-controls wasd-controls position="0 0 0">
<a-gui-cursor id="cursor"
raycaster="objects: [gui-interactable]"
fuse="true" fuse-timeout="2000"
design="ring"
>
</a-gui-cursor> <!-- /cursor -->
</a-camera> <!-- /camera -->
</a-entity>
</a-scene>
<script type="text/javascript">
var video_el = document.getElementById("film");
function togglePlayback () {
console.log('play/pause movie');
if(!video_el.paused){
video_el.pause();
}
else {
video_el.play();
}
// var filmEl = document.getElementById('video')
// var material = Object.assign({}, filmEl.getAttribute('material'))
// material.pause = !material.pause
// filmEl.setAttribute('material', material)
}
function stop () {
console.log('stop movie');
video_el.pause();
}
function toggleSound () {
console.log('toggleSound on/off');
if(!video_el.muted){
video_el.muted == true;
}
else {
video_el.muted == false;
}
}
function toggleCaps () {
console.log('toggleCaps visible/hidden');
}
</script>
</body>
</html>