<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>360° Movie</title> <meta name="description" content="360° Image - A-Frame"> <script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script> <style type="text/css"> <!-- #sp {width: 80vw; height: 80vh;} --> </style> </head> <body> <button id="btn" type="button">START/stop</button> <a-scene id="sp" embedded> <!-- embeddedないと全画面になる --> <!-- CSSで id=sp に width: height: を設定しておく --> <a-assets> <video id="v" preload="auto" autoplay loop="true" webkit-playsinline playsinline src="../2020-ryusei/R0010003.MP4" /> </a-assets> <a-videosphere id="sp" src="#v"></a-videosphere> </a-scene> <!-- Borrowed FROM: http://www.gigas-jp.com/appnews/archives/8265 --> <!-- 以下はVR開始ボタンで動画を再生するためのJavascript --> <script> var scene = document.querySelector("a-scene"); var video = document.getElementById("v"); if (scene.hasLoaded) { run(); } else { scene.addEventListener("loaded", playvideo); } function playvideo() { document.querySelector("button#btn").addEventListener( "click", function (e) { if (video.paused) video.play(); else video.pause(); }, false); } </script> <!-- videoメディア操作関数についてはここがコンパクトでわかりやすい http://www.htmq.com/video/ --> </body> </html>