I am trying to create a video-based VR experience. However, I'm having trouble with video playback on chrome. I'm hosting the HTML file on a local server and if I access the HTML file from the index page then it works correctly. However, refreshing the page results in a black screen. Chrome's console gives a code 200 for the file, but the response is "Failed to load response data: No data found for resource with given identifier".
Edge has the same behaviour, but firefox works correctly. I've seen people say that this could be a problem with autoplay, but I've tried making the video start with a button but it hasn't fixed the issue (perhaps I need to load the video with the button? I'm new to this language/framework).
Here's some example code I've gotten from the internet which results in this behavior:
<pre>
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="description" content="3D Model">
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
</head>
<body>
<a-scene vr-mode-ui="enabled: false" cursor="rayOrigin: mouse">
<!--Assets -->
<a-assets>
<video id="videoclip" autoplay loop="true" src="test360b.mp4"></video>
</a-assets>
<!--Camera Rig -->
<a-entity movement-controls="speed: 0.2; constrainToNavMesh: true" position="0 4 20">
<!-- Camera -->
<a-entity camera position="0 1.8 0"
look-controls="pointerLockEnabled: false">
</a-entity>
</a-entity>
<!--Video -->
<a-video src="#videoclip" width="2.15" height="1" rotation=" 0 180 0" position="-2 2 -4.15"></a-video>
</a-scene>
</body>
</html>
</pre>