Joomla Templates Club 406,261 posts

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

#195263

Hi, I used code for video from Applo template.

Video can’t start on Google Chrome (but is working well in Safari and Firefox browser)?

Can you please see how this can be fixed or let me know how I can do that?

Here is an link where is a video:
http://airpacx1.cloudaccess.net/

In addition, is there anyway that I can decrease padding between main menu and video (this is visible in SAfari or Frefox browser).

Thank you,

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

#524614

Have you sorted it out at your end? I have checked URL of your site with: Google Chrome, Safari, Firefox browsers. I see your site is working fine now.

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

#524678

Hi Ninja,

I am not sure when you checked!? Try it again, still do not work.

On the other hand here is what I learn for far (and the way who it was temporarily worked on chrome)

It looks like that Chrome has hard time to read .mp4 but it can read .webm.

Thus I guess you saw at Chrome when I have root to a video for file: welcome.webmhd.webm instead of (.mp4) 000020810170_HDFlashVideo.mp4.

If I setup code with .mp4 format video like below it will work with Safari and Firefox but not with Chrome:

<div class=”video-shuffle-wrap”>
<div class=”video-shuffle” data-js-view=”video-shuffle”>
<div class=”mask”> </div>
<video autoplay=”autoplay” loop=”loop” width=”100%” height=”auto” poster=”images/stories/joomla/poster.png” style=”width: 100%; height: auto;”><source src=”images/stories/joomla/000020810170_HDFlashVideo.mp4″ type=”video/mp4″ /><source src=”images/stories/joomla/welcome.webmhd.webm” type=”video/webm” /><div class=”video-fallback” style=”padding-bottom: 56.25%”><object data=”http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf” type=”application/x-shockwave-flash” 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://airpacx1.cloudaccess.net/images/stories/joomla/000020810170_HDFlashVideo.mp4′,’autoPlay’:true, ‘controls’: null}]}” /><img title=”No video playback capabilities, please download the video below” src=”images/stories/joomla/poster.png” alt=”Sample Video” width=”100%” height=”auto” /> </object></div></video>
</div>
</div>

On the other hand when I have set up root to video format (.webm) – welcome.webmhd.webm it is woking with Chrome but now with Safari and Firefox

Here is code that is just good for Chrome: (everything is the same just instead of video format 1st video format welcome.webmhd.webm and 2nd video format: 000020810170_HDFlashVideo.mp4)

<div class=”video-shuffle-wrap”>
<div class=”video-shuffle” data-js-view=”video-shuffle”>
<div class=”mask”> </div>
<video autoplay=”autoplay” loop=”loop” width=”100%” height=”auto” poster=”images/stories/joomla/poster.png” style=”width: 100%; height: auto;”><source src=”images/stories/joomla/welcome.webmhd.webm” type=”video/mp4″ /><source src=”images/stories/joomla/welcome.webmhd.webm” type=”video/webm” /><div class=”video-fallback” style=”padding-bottom: 56.25%”><object data=”http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf” type=”application/x-shockwave-flash” 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://airpacx1.cloudaccess.net/images/stories/joomla/welcome.webmhd.webm’,’autoPlay’:true, ‘controls’: null}]}” /><img title=”No video playback capabilities, please download the video below” src=”images/stories/joomla/poster.png” alt=”Sample Video” width=”100%” height=”auto” /> </object></div></video>
</div>
</div>

Then I realized that joomlart’s video coming from s3.amozaon (http://static.joomlart.com/video/ja_appolio/welcome.mp4) and I tried to set up the same way. Opened account with s3.amazon, uploaded video file: 000020810170_HDFlashVideo.mp4 but it looks like that I couldn’t identified what style Joomlart used in console.aws.amazon.com – BUCKET named “joomlart”!?

It looks like that there is HTML file in that bucket “joomlart” that helps to show this video nicely in Chrome and other browsers.

Ninja can you send that HTML file that support how videos to be shown in Chrome and help to work at the other browsers too?

Just in case here is my prntscr of s3.amazon if you need it:
http://prntscr.com/2wgne9

Maybe there is another way to start! But somehow this is my observation so far what is happening.

Google chrome nicely read .webm instead of (.mp4) and I fought the trick it might be in this s3.amazon that joomlart used for this applo template. However please help if you can, I am not sure what else to try!?

Thank you,
Branko

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

#524719

Hi Branko,

I have changed the link of video file:*

Change

http://airpacx1.cloudaccess.net/images/stories/joomla/000020810170_HDFlashVideo.mp4

To

http://static.joomlart.com/video/ja_appolio/welcome.mp4

I see it runs fine on Chrome, FireFox, IE, see these screenshots for reference:*

+ Chrome

+ FireFox

+ IE

You can upload the video file into s3.amazon and test your site with link from s3.amazon again. Let me know if it helps.

---

Attachments:

1. 
2. 
3. 

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

#524780

Hi Ninja,

I tired that as well and I saw that is working that way with Joomlart video. That is how I realized that s3.amazon should be part of this display in this case.

Yes, I uploaded my video to s3.amazon but it still do not work.

Here is an link:*
http://airpac.s3.amazonaws.com/airpac/000020810170_HDFlashVideo.mp4

but there is same error there. Joomlart add html file and had to do additional setup on s3.amazon where is that video in order to have it like that.

Can you please send those additional setup that I have to do as well in order to have this video to start?

Just in case here is print scr from s3.amazon:
http://prntscr.com/2wkpz7
http://prntscr.com/2wkqey

I tried to follow steps from this link and setup front console:*http://www.sysmoth.com/streaming-videos-through-amazon-s3-cloudfront-and-html5/

which is:*d1grrtorvtnj90.cloudfront.net/000020810170_HDFlashVideo.mp4 and this video load we’ll filezila but on chrome it just download on your computer if you place this link in browser.

How Joomlart setup this video to work on s3.amazon?
Can you please send that info in order to replicate this process as well?

Thank you

[Manos Moderator ManosJoin date: February 2014Posts: 2806Downloads:46Uploads:56 Thanks: 200 Thanked: 633 times in 576 posts]

#524785

Hi,

I am guessing the problem is permissions, this is what i get when i try to view your video:
<blockquote>AccessDeniedAccess Denied96E1F2CCD93C6000HmiK1ev1eQenjEaEFTl46V+2zWcQLJG42cNdgwlqPLWH4ESG91rPj5hMN4rn1iYT</blockquote>

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

#524816

Here is permission that I have:

{
“Version”: “2008-10-17”,
“Statement”: [
{
“Sid”: “AllowPublicRead”,
“Effect”: “Allow”,
“Principal”: {
“AWS”: “*”
},
“Action”: [
“s3:GetObject”
],
“Resource”: [
“arn:aws:s3:::airpac/*”
]
}
]
}

Can you please share permission of joomlart video so I can just replicate if this is the issue!?

when you open this link below in *your browser (in firefox start playing video, in Google Chrome and Safari just download this video immediately on your computer):
http://airpac.s3.amazonaws.com/000020810170_HDFlashVideo.mp4

Can you please check again? or if you can just find out setting how JoomlArt did for this video:
?

Joomlart has a bucket at s3.amazon name:

joomlart – then folder in that bucket
video – then another subfolder
ja_applio – and then file into it
welcome.mp4

in my case I have a bucket at s3.amazon name:
airpac – and then file:
000020810170_HDFlashVideo.mp4

and yes this file is public.

I am not sure what else I can try!?

[Manos Moderator ManosJoin date: February 2014Posts: 2806Downloads:46Uploads:56 Thanks: 200 Thanked: 633 times in 576 posts]

#524823

Hi,

Seems like you’ve fixed it yes ? It’s working fine now.

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

#524824

I wish 😉

it still not working in Google Browser / Chrome:*

here is an link of the website:*http://airpacx1.cloudaccess.net

but this is working with Firefox and Safari when I have this .mp4 file

I still can’t find why is not working on Chrome!?

Do you have an idea?

to make it work on Chrome I need replaced file video file format with*.webm (from .mp3 to*.webm)

but if it is with .webm will not work on Firefox and Safari, here is a link that is working with Chrome but not with Firefox and Safari:
http://airpacx2.cloudaccess.net

???

[Manos Moderator ManosJoin date: February 2014Posts: 2806Downloads:46Uploads:56 Thanks: 200 Thanked: 633 times in 576 posts]

#524825

Hi,

It’s working fine on my side -> Chrome- > Version 33.0.1750.117 m

[Manos Moderator ManosJoin date: February 2014Posts: 2806Downloads:46Uploads:56 Thanks: 200 Thanked: 633 times in 576 posts]

#524826

<em>@artistgates 413995 wrote:</em><blockquote>
here is an link of the website:*http://airpacx1.cloudaccess.net -> That doesn’t work for me either

http://airpacx2.cloudaccess.net -> That works on Chrome/FF

</blockquote>

It takes a while to load but it’s working

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

#524827

Hi I do have same version of Chrome*Version 33.0.1750.117 (last update)

This link is not working on chrome:*http://airpacx1.cloudaccess.net

This is a code for this video:
<div class=”video-shuffle-wrap”>
<div class=”video-shuffle” data-js-view=”video-shuffle”>
<div class=”mask”> </div>
<video autoplay=”autoplay” loop=”loop” width=”100%” height=”auto” poster=”images/stories/joomla/poster.png” style=”width: 100%; height: auto;”><source src=”images/stories/joomla/000020810170_HDFlashVideo.mp4″ type=”video/mp4″ /><source src=”images/stories/joomla/welcome.webmhd.webm” type=”video/webm” /><div class=”video-fallback” style=”padding-bottom: 56.25%”><object data=”http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf” type=”application/x-shockwave-flash” 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://airpacx1.cloudaccess.net/images/stories/joomla/000020810170_HDFlashVideo.mp4′,’autoPlay’:true, ‘controls’: null}]}” /><img title=”No video playback capabilities, please download the video below” src=”images/stories/joomla/poster.png” alt=”Sample Video” width=”100%” height=”auto” /> </object></div></video>
</div>
</div>

Here is a video how I can see on chrome:*http://screencast.com/t/Y4eiCLBZ (it takes little bit time to load this vide)

once again this is a link: http://airpacx1.cloudaccess.net*that is WORKING ON FIREFOX AND SAFARI BUT NOT TO CHROME

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

#524828

YES BUT THIS LINK IS NOT WORKING ON SAFARI AND FIREFOX IN THAT CASE:*http://airpacx2.cloudaccess.net*

i have describe a different between this two links.

Please let me know if you need more information regarding:
http://airpacx1.cloudaccess.net

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

#524833

Here is my last observation so far regarding this issue

Non of them below solve the way to start working on 3 browsers at the same time, all this variation below are supported jut by Safari and Firefox

1. source for video:*http://airpacx3.cloudaccess.net/images/stories/joomla/v.mp4 (this didn’t work out, I tired to use her all lower case characters in link but this is not the issue).
<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=”http://airpacx3.cloudaccess.net/images/stories/joomla/v.mp4″ type=”video/mp4″ />
* *<source src=”images/stories/joomla/welcome.webmhd.webm” type=”video/webm” />
* *<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>

2.*source for video:*http://airpacx3.cloudaccess.net/images/stories/joomla/000020810170_HDFlashVideo.mp4 (this is old link that I was playing around)
<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=”http://airpacx3.cloudaccess.net/images/stories/joomla/000020810170_HDFlashVideo.mp4″ type=”video/mp4″ />
* *<source src=”images/stories/joomla/welcome.webmhd.webm” type=”video/webm” />
* *<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/000020810170_HDFlashVideo.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>

3.**source for video:*http://airpac.s3.amazonaws.com/000020810170_HDFlashVideo.mp4 (I fought that amazon server will solve this issue – if I am getting this video from them – but this did not help again to show video on Google Chrome)
<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=”http://airpac.s3.amazonaws.com/000020810170_HDFlashVideo.mp4″ type=”video/mp4″ />
* *<source src=”images/stories/joomla/welcome.webmhd.webm” type=”video/webm” />
* *<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://airpac.s3.amazonaws.com/000020810170_HDFlashVideo.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>

4. *source for video:*http://airpac1.s3.amazonaws.com/video/1.mp4 (I tired here to have lower case as well in link but just to have this video from amazon – but this didn’t help too)
<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=”http://airpac1.s3.amazonaws.com/video/1.mp4″ type=”video/mp4″ />
* *<source src=”images/stories/joomla/welcome.webmhd.webm” type=”video/webm” />
* *<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://airpac1.s3.amazonaws.com/video/1.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 why this is not working on Google Chrome?

just in case here is original Joomlart code that make it this happen and I do not understand what is the difference then just instead of video source:*http://static.joomlart.com/video/ja_appolio/welcome.mp4

Everything else is the same:
<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=”http://static.joomlart.com/video/ja_appolio/welcome.mp4″ type=”video/mp4″ />
* *<source src=”images/stories/joomla/welcome.webmhd.webm” type=”video/webm” />
* *<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://static.joomlart.com/video/ja_appolio/welcome.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>

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

#524834

HERE IS A CODE THAT CAN SUPPORT TWO BROWSERS*
1. Google Chrome
2. Firefox

And I do not why is not working with SAFARI know!!!????

I am not sure what is a catch!!! How I can have it to work on all 3 browsers on the same time?

<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=”http://airpacx3.cloudaccess.net/images/stories/joomla/welcome.webmhd.webm” type=”video/webm” />
* *<source src=”images/stories/joomla/welcome.webmhd.webm” type=”video/webm” />
* *<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>

[Author]

Posts