Joomla Templates Club 406,261 posts

[Tony Silveira Friend Tony SilveiraJoin date: September 2014Posts: 64Downloads:0Uploads:6 Thanks: 6 Thanked: 9 times in 1 posts]

#192861

I tried to figure this one out on the Flowplayer website but could find a solution. Instead of having the video looping I want to have a video with an introduction to the site and at the end of the video switch to a background image as it does at video load. To stop the loop I just deleted loop=”loop” on the code. However I don’t know how to get the background image to show at the end of the video.

The site under development is at http://isaac.netgifted.com/ and I am not developing the rest until I can get this one solved. I am thinking as an option to purchase a license of Flowplayer and customize with their tool but I didn’t want to spend almost $100 and I might not like the end result.

As an option I am thinking in looping a short video and then use a button on the Social-login module position with a lightbox to pop-up the welcome video.

Any help or ideas would be greatly appreciated

Thank you

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

#514885

Hi powertowin,

You can try with this script.
Open templatesja_appoliojsscript.js

and replace

$('video').updateSizeVideo('.t3-video');
to

$('video').on('ended', function(){
$('<img/>')
.addClass('video-poster')
.css({
position: 'absolute',
top: 0,
left: 0,
width: $(this).css('width'),
height: $(this).css('height')
})
.attr('src', this.poster)
.insertAfter(this)
}).updateSizeVideo('.t3-video');

If you want the image also update when you resize the browser then replace the current ‘updateSize’ function
with

function updateSize(){

if(!imobile){
var elementW = $(element).width(),
elementH = $(element).height(),
windowAspect = elementW/elementH;

if (windowAspect < mediaAspect) {

$this.add($this.next('.video-poster')).css({
width: elementH * mediaAspect,
height: elementH
});

}else{
$this.add($this.next('.video-poster')).css({
width: elementW,
height: elementW / mediaAspect
});
}
} else {
video.width = window.innerWidth;
video.height = window.innerWidth * 9 / 16;

$this.next('.video-poster').css({
width: video.width,
height: video.height
});
}
}

Hope it helps,

Regards

1 user says Thank You to Wall Crasher for this useful post

1. Saguaros

[creativeint Friend creativeintJoin date: February 2013Posts: 18Downloads:123Uploads:0 Thanks: 5 Thanked: 3 times in 1 posts]

#515198

Thanks for this however it didnt work. I cant find the line

$(‘video’).updateSizeVideo(‘.t3-video’);

in templatesja_appoliojsscript.js

on line 53 I have:
function updateSize(){

if(!imobile){
var elementW = $(element).width(),
elementH = $(element).height(),
windowAspect = elementW/elementH;

if (windowAspect < mediaAspect) {
$this.css(‘width’,elementH*mediaAspect).css(‘height’,elementH);
}else{
$this.css(‘width’,elementW).css(‘height’,elementW/mediaAspect);
}
} else {
video.width = window.innerWidth;
video.height = window.innerWidth * 9 / 16;
}
}

$(window).on(‘resize orientationchange’, function(){ setTimeout(updateSize, 200)});
updateSize();

Also this routine appears to call the poster frame from the css as

$this.add($this.next(‘.video-poster’)).css({

however I cant find video-poster in the css.

Please advise as I really need to have this video close back on the poster frame and also resize accurately.
Thanks

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

#515207

Hi creativeint,

You can search for ‘updateSizeVideo’ in templatesja_appoliojsscript.js file.
$(‘video’).updateSizeVideo(‘.t3-video’); should be there (if you have not modify this file).

.video-poster is a dynamic class, which was created and used by javascript only. it will be not available in css.

Also, please post your site here so that we can check.

Regards

[creativeint Friend creativeintJoin date: February 2013Posts: 18Downloads:123Uploads:0 Thanks: 5 Thanked: 3 times in 1 posts]

#515334

I must have mde a change without realising it, loading a fresh version of script.js and then making your changes worked, thanks!:)

[Tony Silveira Friend Tony SilveiraJoin date: September 2014Posts: 64Downloads:0Uploads:6 Thanks: 6 Thanked: 9 times in 1 posts]

#515728

I downloaded the updated version of the template and restarted from scratch. Things overall look much better but I cannot find the line of code ‘updateSizeVideo’ in templatesja_appoliojsscript.js file
It’s just not there

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

#515798

Hi powertowin,

In the new version, you can use this

$('.t3-video video').prop('loop', false).on('ended', function(){
$('<img/>')
.addClass('video-poster')
.css({
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: 'auto'
})
.attr('src', this.poster)
.insertAfter(this)
})

just right after

$(document).ready(function ($) {

Regards

[Tony Silveira Friend Tony SilveiraJoin date: September 2014Posts: 64Downloads:0Uploads:6 Thanks: 6 Thanked: 9 times in 1 posts]

#516109

Thank you, I did this however the new template version has a different code for the module that is
<div class=”video-shuffle-wrap”>
<div class=”video-shuffle” data-js-view=”video-shuffle”>
<div class=”mask”> </div>
<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://isaac.netgifted.com/images/stories/video/welcome.mp4′,’autoPlay’:true, ‘controls’: null}]}” /><img title=”No video playback capabilities, please download the video below” src=”http://isaac.netgifted.com/images/stories/joomla/poster.png” alt=”Sample Video” width=”100%” height=”auto” border=”0″ /></object>
</div>
</div>
</div>
The code on the documentation page doesn’t work anymore. When I insert

<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″>
<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’:[‘/images/stories/joomla/poster.png’,{‘url’:’/images/stories/joomla/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>
</video>
</div>
</div>

I can only see the poster, the video doesn’t load

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

#516205

Hi powertowin,

Please use the latest code in template version. Although, I see it misses a <video> tag in your code.
You need to change source to your correct link.

<div class="video-shuffle-wrap">
<div class="video-shuffle" data-js-view="video-shuffle">
<div class="mask">*</div>
<video style="width: 100%; height: auto;" poster="images/stories/joomla/poster.png" autoplay="autoplay" loop="loop">
<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 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://static.joomlart.com/video/ja_appolio/welcome.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>

Regards

[karca Friend karcaJoin date: July 2011Posts: 47Downloads:0Uploads:18 Thanks: 11]

#562302

Thank you very much for your answer.

I have two questions:
1) Is there a possibility to have different images – one for the beginning (before video starts) and second for the end (after video ends)?
2) I´ve tried it but it didn´t work – so just hypothetical question – could be the end image mapped? I mean if there can be a client-side image-map on the image which shows after video ends.

Thank you very much for your answers 🙂

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#562397

Hi @karca,

1. No, it’s not possible to do that.

2. As there are many changes in the code from last post by @wall Crasher and the way browser handle it, I’m afraid that solution won’t work. For such customization task, you should hire a developer via Joomlancers or submit a quote here as it’s beyond our support scope.

[karca Friend karcaJoin date: July 2011Posts: 47Downloads:0Uploads:18 Thanks: 11]

#562639

Thank you very much for your answer. I´ve just realized that for those I´m doing the web pages are satisfied with the look as it is 🙂 So no more complications 😀

Thanks!

[Author]

Posts