CODEWITHSUNDEEP
htmlhtml5-video
arifix
arifix

Reputation: 750

Autoplay of HTML5 video doesn't work

I am not sure why autoplay function doesn't work on site. Live site- http://lyorcohen.searchinteractions.com/ComingSoon/

<video class="supervideo hidden-phone hidden-tablet" poster="images/stillframe.jpg" autoplay>
<source src="video/WeaveLogo.mov" />
Your browser does not support the HTML5 video tag. Please upgrade it.
</video>

Upvotes: 2

Views: 4505

Answers (4)

metamonkey
metamonkey

Reputation: 447

Most browsers require the video to be initiated by the user or muted.

Try:

<video class="supervideo hidden-phone hidden-tablet" poster="images/stillframe.jpg" muted="muted" autoplay>
<source src="video/WeaveLogo.mov" />
Your browser does not support the HTML5 video tag. Please upgrade it.
</video>

Upvotes: 0

Alex Martinez
Alex Martinez

Reputation: 21

var vid = document.getElementById("myVideo");
vid.autoplay = true;
vid.load();

Upvotes: 0

Kevin
Kevin

Reputation: 1

I've had similar problem when adding a video on a Magento site. It seems that when I used the preload attribute before the autoplay attribute, it fixed the problem. Was testing in Chrome

Upvotes: 0

user1693593
user1693593

Reputation:

Works in Chrome but not in Firefox.

You also get this error in Firefox when the MP4 fails (due to testing this on an XP machine which does not support mp4 with Firefox):

HTTP load failed with status 404. Load of media resource http://lyorcohen.searchinteractions.com/ComingSoon/video/WeaveLogo.ogg failed.

which means the fall-back fails due to the ogg file gone missing. Check that the file actually is there and that the name is spelled the same including capitalization.

On Chrome the MP4 video auto-plays and works fine.

You could also consider to provide a webm version of the file.

To eliminate further possible causes you can provide the type attribute in your source tags:

<source src="video/WeaveLogo.webm" type="video/webm" />

You are using the autoplay attribute correctly but some peculiar browsers has historically had problems with attributes without values so you can add =true to it to make these browsers happy (I can only think about one browser though...).

Upvotes: 1

Related Questions