reroad-test/yuuji/theta.html at 334b4c060fc767107757e9aaef1d951d9ac3e283

Fork: 0

SKIP / reroad-test

Find file

Newer

Older

reroad-test / yuuji / theta.html

HIROSE Yuuji on 22 Oct 2020 1 KB Wrong link fixed

Raw Blame History

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>360&deg; Movie</title>
    <meta name="description" content="360&deg; 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>