videoDome How to determine the time spent on each step of creating a videoDome

Questions
1

I used videoDome to create a panoramic video. I opened them in PC and mobile browsers respectively. I added playable events to the videos to calculate their loading time.
`
const videoElement = videoDome.videoTexture.video
videoRef = videoElement
videoElement.preload = ‘auto’
videoElement.load()
videoElement.volume = 1;
videoElement.muted = false;

    videoElement.addEventListener('canplay', () => {
        videoState.value = 1
        const endTime = new Date();

`
I found that even though the browser cores are the same and they all use webGl2.0 for rendering, the difference in time is more than 10 times. How can I determine where the performance problem is? I also added the time it takes for the video to start loading. I found that browsers that take a long time also have a long loading time.

2

Hello and welcome :slight_smile:

I’m not an expert in VideoDome but I assume that most of the loading time is the network loading of the actual video HTML element (videoDome.videoTexture.video is an HTMLVideoElement)

If you have a look on this page, events are like so, in order :

1. loadstart
2. durationchange
3. loadedmetadata
4. loadeddata
5. progress
6. canplay
7. canplaythrough

canplay → The video could start but is not guaranteed to run through without a stop
canplaythrough → The video can play through

Maybe you can try a timing on this different events, the main difference (between workstation and smartphone) might be the networking

const events = ["loadstart", "durationchange", "loadedmetadata", "loadeddata", "progress", "canplay", "canplaythrough"];
const start = Date.now();
events.forEach((event) => {
    videoElement.addEventListener(event, () => {
        console.log(event, Date.now()-start, "ms");
    });
})
1 Like
3

I consoled the time of all events and found that loadStart started very late, and the overall loading time was about the same, which is the time of loadStart-durationchange. Now I am not sure what caused the loadStart loading time to be delayed for so long. I have given the video Added preload
videoElement.preload = ‘auto’
videoElement.load()

4

Then it might come before the lines of code you just shared. At VideoDome creation, the texture itself needs some load time I guess.

Maybe try to share a Playground (that you can test on both Worstation and Smartphone) in order to helping pointing out exactly where is your loading time issue :slight_smile:

3 Likes
5

If you want to speed up the process you can create your own Video Element on page load (as part of the HTML), make sure it preloads and pass a reference to this element to your video dome. It doesn’t have to be a URL, you can also pass an HTMLVideoElement.