CODEWITHSUNDEEP
jqueryhtmlvideo
user5618385
user5618385

Reputation: 97

HTML5 Video in Chrome: forward/rewind not working

It is an ASP.NET MVC app - using a lot of HTML5 Videos.

What happens: when I try in other browsers to move forward the video with the mouse (manually), it works perfectly; even if I click pause, move the video circle on the track and click play, it works again.

In Chrome it works just sometimes (if the Video is cached I guess?), but the most time when I try to move the circle with the mouse, it just goes back on the place where it was. Even with paused video, I cannot play the video from wherever I want.

For example it happens with this Video. I have a feeling it happens only when I delete browser history and the video loads from zero. If I try several times, later it works (refreshing page or something).

Open this example: jsfiddle.net/1b9749et/

Any experience? Thanks.

Upvotes: 1

Views: 10549

Answers (3)

fidderr
fidderr

Reputation: 43

for me the problem was that instead of placing the path to the file in the src tag, i placed a url that called a php controller that returned the file. something like this:

< audio autobuffer="" preload="auto" controls="controls" src="http://127.0.0.1:8000/getFile/file123">

this is done because the files are not in a public folder, and in order to access a file i had to do some checks first like who is logged in.

this worked in firefox but not chromium based browsers. from what i gathered online it has something to do with the headers, and the status code should return 206 instead of 200. yet editing them did not fix it for me.

how i fixed it is instead of calling the url directly in the audio tag, i used axios to get the file and i converted the file into a blob, and used that as the src for the audio tag:

< audio :ref="customRef" autobuffer preload controls>

                const audioElement = this.$refs[this.customRef];

                // Make the HTTP request to get the audio data
                this.bp.request('get', this.url, { responseType: 'arraybuffer' })
                .then(response => {
                    if (response.status === 200) {
                    this.file = response.data;
                    // Convert the response data into a Blob
                    const blob = new Blob([response.data]);

                    // Create a URL for the Blob
                    const blobUrl = URL.createObjectURL(blob);

                    // Set the Blob URL as the source for the audio element
                    audioElement.src = blobUrl;

                    // Optionally, you can preload and play the audio
                    audioElement.preload = 'auto';
                    } else {
                       console.error('Error fetching audio data');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });

(im using vue, if you use plain javascript, then instead of a ref, use a id)

Upvotes: 1

user8779480
user8779480

Reputation: 11

In order to fix video rewind and fast forward on chrome just add /stream? to your html request for example:

<video src="youre.website.ext/{fileId}">
fix.  <video src="your.website./{fileId}/stream?">

My problem was video rewind and forward didnt work on chrome but worked well on mozzila.

Upvotes: 1

Offbeatmammal
Offbeatmammal

Reputation: 8236

So, I re-encoded your video using ffmpeg to place the MOOV atom at the front (see below), uploaded it to Azure blob storage and the sample now seems to work correctly.

./ffmpeg -y -i 9f99b62e-7d56-4816-993b-286239f243bc_x264.mp4 -movflags faststart DestFile.mp4

The MOOV atom in an mp4 is the metadata that tells the browser where the frames are (amongst other things) so the sooner it's loaded and available the sooner the browser can allow scrubbing etc

If you want to test quickly I'll leave the video hosted at https://jecathblob.blob.core.windows.net/samples/destfile.mp4 for the next 48 hours

[EDIT:] Updated the defaultStorageVersion for my BlobStorage to the latest which seems to support ByteRangeRequests better (to do that I used this utility, can share a pre-compiled .exe if that's easier)

[EDIT2:] I've uploaded the compiled version to https://1drv.ms/u/s!AhulbaZgpLZTjNhE_QaT4ET5xX1B-w (link will expire in 5 days). Just run per instructions at https://github.com/Plasma/AzureBlobUtility to set DefaultStorageVersion to 2016-05-31 (https://learn.microsoft.com/en-us/rest/api/storageservices/versioning-for-the-azure-storage-services)

Upvotes: 3

Related Questions