Joomla Templates Club 406,261 posts

[zorroh Friend zorrohJoin date: November 2006Posts: 422Downloads:20Uploads:43 Thanks: 88 Thanked: 80 times in 1 posts]

#192817

background video not working with firefox.

i use firefox 24 on fedora linux. Joomla 3.2 quickstart.

With chrome in linux all ok.

[zorroh Friend zorrohJoin date: November 2006Posts: 422Downloads:20Uploads:43 Thanks: 88 Thanked: 80 times in 1 posts]

#514889

in documentation is sample code for video, but this is bit buggy…

for path is used /

poster=”/images/stories/joomla/poster.png”
src=”/images/stories/joomla/welcome.mp4″

i copy-pasted code from documentation to the my demo and my background stoped to work, so i removed this / before path and now it is working sort of..

poster image shows up, but video still not playing even not in chrome…:((

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#514890

Hi zorroh,

For this issue, you can try this.

1. Convert the current video to welcome.webm and keep it in the same folder as welcome.mp4 (imagesstoriesjoomla).
You should have both files existed in that folder.
You can use this converter.
http://www.mirovideoconverter.com/download_win.html
http://www.webmproject.org/tools/

2. Edit the custom video module and add
<source src=”images/stories/joomla/welcome.webm” type=’video/webm; codecs=”vorbis,vp8″‘ />

just after the first <source> tag

Save and try again on your firefox.

Note: you can use webmhd format you if you like.

Regards

[zorroh Friend zorrohJoin date: November 2006Posts: 422Downloads:20Uploads:43 Thanks: 88 Thanked: 80 times in 1 posts]

#514913

I read several pages about video tag and thing is that firefox not supporting mp4 fully, so you must give for firefox ogv.

i added ogv source and now everything works for me on chrome and on firefox! 🙂

here is my welcome video code:

<div class="video-shuffle-wrap">
<div class="video-shuffle" data-js-view="video-shuffle">
<div class="mask"> </div>
<video loop autoplay style="width: 100%; height: auto;" poster="images/stories/joomla/poster.png">
<source src="images/stories/joomla/welcome.mp4" type="video/mp4">
<source src="images/stories/joomla/welcome.ogv" type="video/ogg">
<source src="images/stories/joomla/welcome.webm" type="video/webm">
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="100%" height="1011" >
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':['http://www.yourdomain.com/images/stories/joomla/poster.png',{'url':'http://www.yourdomain.com/images/stories/joomla/teretulemast-kolgatale.mp4','autoPlay':true, 'controls': null}]}" />
<img alt="Welcome!" src="http://www.yourdomain.com/images/stories/joomla/poster.png" width="100%" height="auto" title="Video support is missing. Please download a video." />
</object>
</video>
</div>
</div>

2 users say Thank You to zorroh for this useful post

1. JA Developer
2. Wall Crasher

[tfosnom Friend tfosnomJoin date: October 2010Posts: 742Downloads:0Uploads:31 Thanks: 145 Thanked: 200 times in 94 posts]

#514918

Must be a linux thing perhaps as my firefox 25.01 on windows plays it fine?

[zorroh Friend zorrohJoin date: November 2006Posts: 422Downloads:20Uploads:43 Thanks: 88 Thanked: 80 times in 1 posts]

#514952

Here you can see that Firefox supporting partially: http://caniuse.com/mpeg4

so, yes it can work on windows but not with mac or linux with firefox.

Opera dont support mp4 at all, so ogv will help 🙂

1 user says Thank You to zorroh for this useful post

1. tfosnom

[Author]

Posts