I want display just a simple scene where I load a 360 video and use it in a videosphere. The console show me this error Full error object: MediaError {code: 4, message: 'DEMUXER_ERROR_COULD_NOT_OPEN: FFmpegDemuxer: open context failed'} code: 4 message: "DEMUXER_ERROR_COULD_NOT_OPEN: FFmpegDemuxer: open context failed"
before video is fully loaded.
I try to downgrade the resolution, to encode with h.264 multiple times, I used various browser and device.
In development mode all works fine but in build all my screen is black. Im working with Vercel and React (I tried to isolate it for see if react and Aframe could be a problem but in every ways always the same error)
versione 1.4.0 PC / Android Reproducible Code Snippet or URL:
import React, { useEffect, useRef } from 'react';
import Video360 from '../assets/video/progressive.mp4';
import Image360 from '../assets/img/XI_360_Abbazia_San_Silvestro.0000.jpeg';
const XIV_360_Abbazia_San_Silvestro = () => {
const assetsRef = useRef(null);
const videoRef = useRef(null);
const sceneRef = useRef(null);
return (
<video
id="video360"
src={Video360}
ref={videoRef}
type="video/mp4"
crossOrigin="anonymous"
loop
muted
onLoadedMetadata={() => {
console.log('ON LOADED META DATA');
}}
onProgress={() => console.log('Loading progress...')}
onError={(e) => {
console.log('Video error:', e.target.error.code);
console.log('Full error object:', e.target.error);
}}
onWaiting={() => console.log('Waiting for video to load or play...')}
onPlay={() => console.log('Video started playing.')}
onPause={() => console.log('Video paused.')}
/>
<button
className="absolute w-20 h-20 bottom-0 left-0 z-50"
onClick={() => {
videoRef.current.play();
}}
>
PLAY
);
};
export default XIV_360_Abbazia_San_Silvestro;