Joomla Templates Club 406,261 posts

[brankopilic Friend brankopilicJoin date: December 2014Posts: 131Downloads:0Uploads:70 Thanks: 53 Thanked: 5 times in 1 posts]

#524900

Final Code that is working on 3 browsers – Google Chrome, Firefox, Safari

*<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=”https://s3.amazonaws.com/airpac4/video/ww.webm” type=”video/webm” />
* *<source src=”https://s3.amazonaws.com/airpac4/video/v.mp4″ type=”video/mp4″ />
* *<div class=”video-fallback” style=”padding-bottom: 56.25%”>
* * <object type=”application/x-shockwave-flash” data=”http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf” width=”100%” height=”100%” >
* * *<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’:[{‘url’:’http://airpacx3.cloudaccess.net/images/stories/joomla/v.mp4′,’autoPlay’:true, ‘controls’: null}]}” />
* * *<img alt=”Sample Video” src=”images/stories/joomla/poster.png” width=”100%” height=”auto” title=”No video playback capabilities, please download the video below” />
* * </object>
* *</div>
* </video>
*</div>
</div>

There is still an issue to play this video on iPad – hope to solve that too. On the other hand if you can identified why is not working on iPad at the moment that would be great.

Thank you

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#524987

The video on iPad is not auto-play, it needs touch event instead. Please check our demo here again.*

[brankopilic Friend brankopilicJoin date: December 2014Posts: 131Downloads:0Uploads:70 Thanks: 53 Thanked: 5 times in 1 posts]

#525124

Hi,

it is on auto play, here is a code:

*<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=”https://s3.amazonaws.com/airpac4/video/ww.webm” type=”video/webm” />
* *<source src=”https://s3.amazonaws.com/airpac4/video/v.mp4″ type=”video/mp4″ />
* *<div class=”video-fallback” style=”padding-bottom: 56.25%”>
* * <object type=”application/x-shockwave-flash” data=”http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf” width=”100%” height=”100%” >
* * *<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’:[{‘url’:’https://s3.amazonaws.com/airpac4/video/v.mp4′,’autoPlay’:true, ‘controls’: null}]}” />
* * *<img alt=”Sample Video” src=”images/stories/joomla/poster.png” width=”100%” height=”auto” title=”No video playback capabilities, please download the video below” />
* * </object>
* *</div>
* </video>
*</div>
</div>

is there any other suggestion? Should I correct anything else in this code?

Thank you

1 user says Thank You to brankopilic for this useful post

1. Ninja Lead

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#525204

Awesome! Glad that you figure out a workaround on this.

[Author]

Posts