She
Posts: 0
Joined: Wed Oct 08, 2014 12:46 am

Video/gif playing

Hi Team,
Is it possible in appery to play a repeatable video/gif in the back ground?
If its possible, How to reproduce that?.

Thanks a lot,
She

She
Posts: 0
Joined: Wed Oct 08, 2014 12:46 am

Video/gif playing

Hi Team,
This is the screen shot of my sample work.
https://d2r1vs3d9006ap.cloudfront.net...

i add HTML component and add the following code:
code
<p><video id="bgvid" width="320" height="240" autoplay="autoplay" poster="https:&#47;&#47;s3-us-west-2&#46;amazonaws&#46;com/s&#46;cdpn&#46;io/4273/polina&#46;jpg" loop="loop"><source src="http:&#47;&#47;demosthenes&#46;info/assets/videos/polina&#46;webm" type="video/webm" /><source src="http:&#47;&#47;demosthenes&#46;info/assets/videos/polina&#46;mp4" type="video/mp4" /><object id="bgvid" width="320" height="240" data="&#46;&#46;/&#46;&#46;/resources/editor/js/libs/tinymce/plugins/media/moxieplayer&#46;swf" type="application/x-shockwave-flash"><param name="src" value="&#46;&#46;/&#46;&#46;/resources/editor/js/libs/tinymce/plugins/media/moxieplayer&#46;swf" /><param name="flashvars" value="url=http%3A&#47;&#47;demosthenes&#46;info/assets/videos/polina&#46;mp4&poster=https%3A&#47;&#47;s3-us-west-2&#46;amazonaws&#46;com/s&#46;cdpn&#46;io/4273/polina&#46;jpg" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" /></object> <!-- WCAG general accessibility recommendation is that media such as background video play through only once&#46; Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button --> </video></p>
/code

How can i add this video into the full background of a device.

Thank you in advance,
She

She
Posts: 0
Joined: Wed Oct 08, 2014 12:46 am

Video/gif playing

Hi Team,

A video background like this:
https://d2r1vs3d9006ap.cloudfront.net...

Thanks.

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Video/gif playing

Hello She,

You can add a gif file as a background:
https://devcenter.appery.io/documenta...
But it would be really hard to implement video as a background. You may try to put video component on a page and then with margin option "put" other components over it.

She
Posts: 0
Joined: Wed Oct 08, 2014 12:46 am

Video/gif playing

Hi Evgene,
Do you think there's a plugin of video bg,that will fit in appery?
if there's a plugins, how can i execute that plugin?

Thank you.
She

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

Video/gif playing

It is not a plugin, it is a simple CSS.

She
Posts: 0
Joined: Wed Oct 08, 2014 12:46 am

Video/gif playing

Hi,
Do you know how can i adjust the video component to be a background?
Thanks,

She
Posts: 0
Joined: Wed Oct 08, 2014 12:46 am

Video/gif playing

i read this article about the video background,:
http://slicejack.com/creating-a-fulls...

where can i put the div in the mobilecontainer?

She
Posts: 0
Joined: Wed Oct 08, 2014 12:46 am

Video/gif playing

Hi Team,
i encountering problem i already get the javascript code for css and div. here are the code in page show javascript:
code
$('div[dsid="mobilecontainer"]')&#46;append('<video autoplay loop poster="https:&#47;&#47;s3-us-west-2&#46;amazonaws&#46;com/s&#46;cdpn&#46;io/4273/polina&#46;jpg">id="bgvid" loop<source src="&#47;&#47;demosthenes&#46;info/assets/videos/polina&#46;webm" type="video/webm" /> <source src="&#47;&#47;demosthenes&#46;info/assets/videos/polina&#46;mp4" type="video/mp4" /></video>');
$('div[dsid="mobilecontainer"')&#46;css(
"video" , "position:fixed",
"top: 50%",
"left: 50%",
"min-width: 100%",
"min-height: 100%",
"width: auto",
"height: auto",
"z-index: -100",
"transform: translateX(-50%) translateY(-50%)",
"background-size: cover",
"transition: 1s opacity"
);
$('div[dsid="mobilecontainer"]')&#46;css(
"body","margin: 0",
"background: #000"

);

/codeand in css i put :
code
@media screen and (max-device-width: 800px) {
html { background: url(&#47;&#47;demosthenes&#46;info/assets/images/polina&#46;jpg) #000 no-repeat center center fixed; }
#bgvid { display: none; }
}
/code
i want that video is going to the background of this page.
screen shot is in below

https://d2r1vs3d9006ap.cloudfront.net...

there's no error
https://d2r1vs3d9006ap.cloudfront.net...

i followed the ff link for referrence :

http://codepen.io/dudleystorey/pen/knqyK

i hope you can help me here..
Thanks,
She

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Video/gif playing

Hi She,

What you mean by "play in background" ?

If you want just to hide the video you can use following JS code instead of yours:

precode

var video = jQuery('<video autoplay loop poster="https:&#47;&#47;s3-us-west-2&#46;amazonaws&#46;com/s&#46;cdpn&#46;io/4273/polina&#46;jpg">id="bgvid" loop<source src="&#47;&#47;demosthenes&#46;info/assets/videos/polina&#46;webm" type="video/webm" /> <source src="&#47;&#47;demosthenes&#46;info/assets/videos/polina&#46;mp4" type="video/mp4" /></video>');

$('div[dsid="mobilecontainer"]')&#46;append(video );
jQuery("video")&#46;css({width: "1px", height: "1px"});

/code/pre

Regards.

Return to “Issues”