CODEWITHSUNDEEP
htmlfirefoxvideo
Dusan
Dusan

Reputation: 5144

HTML Video autoplay not working in Firefox

I have a website built with bootstrap and loading video in a dialog:

<video width="760" style="background-color: white;" preload controls autoplay>
    <source src="....." type="video/mp4" />
</video>

Shows and works fine in IE, Chrome and Safari. In Firefox auto play worked a few times, and now does not work at all. No errors in console and video plays just fine manually using controls.

I have also tried script approach (without autoplay attribute):

oncanplay="$(this)[0].play()"

And works flawlessly on all browsers except Firefox.

Can anyone see what could be wrong?

Upvotes: 11

Views: 31082

Answers (6)

Rapha&#235;l Balet
Rapha&#235;l Balet

Reputation: 8481

This worked for me for the firefox browser, but it have to be muted.

<video
   width="100%"
   height="100%"
   onloadedmetadata="this.muted = true"
   autoplay
>
   <source src="assets/videos/Helpline_Video.mp4" type="video/mp4" />
</video>

Upvotes: 3

Aamir Shahzad
Aamir Shahzad

Reputation: 6834

First check your web page here for test

http://html5test.com/

Second inspect via code inspector and enter them in the browser to check if the are working fine or not. Or drag and drop video file over the browser to check if its working or not.

Thirdly try checking MIME Types

AddType video/mp4 for .mp4 .m4v
AddType video/ogg for .ogv
AddType video/webm for .webm

Fourthly check you html5 converter it has often problem with format conversion I had same problem year back when I was working html5 video. Changing it fixed the issue for me.

Last but not the least; Add a flash fall-back!

<object type="application/x-shockwave-flash" 
data="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf"
height="227" width="220">

Upvotes: 1

Pham Duc Toan
Pham Duc Toan

Reputation: 169

From Firefox 66 and aboew, you must click the unblock button on the right of browser bar to unblock Autoplay Video and Audio

Upvotes: 0

Asad Ali
Asad Ali

Reputation: 665

I have tested this on all browser its working perfect with javascript event

<video onloadeddata="this.play();" poster="poster.png" playsinline loop muted controls>
    <source src="video.mp4" type="video/mp4" />
    <source src="video.mp4.webm" type="video/webm" />
    <source src="video.mp4.ogg" type="video/ogg" />
    Your browser does not support the video tag or the file format of this video.
</video>

Upvotes: 23

devst3r
devst3r

Reputation: 562

Firefox Video Issue: Troubleshooting

  1. Make sure that the server sends the video files with a correct and supported MIME type to make it work in Firefox.

    link

  2. Use source URL relative to ROOT, not Web page

    Eg: src="/complete/folder/path/video.ogv"

  3. Version of mozilla.

    • Mozilla Firefox (3.5 and later) supports Theora video and Vorbis audio in an Ogg container.
    • Firefox 4 supports WebM.

    link

Upvotes: 0

Bud Damyanov
Bud Damyanov

Reputation: 31829

The problem has an easy solution: changing the order of the videos, listing first the .mp4 source and next the .webm source made the auto-play videos run on Firefox, Explorer and Chrome, this of course is valid if you have multiple video sources.

A side note: Firefox supports H.264 on Windows 7 and later since version 21. Firefox supports H.264 on Linux since version 26 if the appropriate gstreamer plug-ins are installed. Partial support for Firefox refers to the lack of support in OSX & some Linux platforms, for Android Firefox it refers to the inability of hardware acceleration.

Upvotes: 4

Related Questions