Video Animation Javascript - Page 2 -...

User 244626 Photo


Registered User
811 posts

Taylor Kurz wrote:
You're right, but that's not how it's supposed to work. That is essentially two videos combined into one. You should only see that happy face moving with a transparent background. One half is supposed to be used for the alpha information.

Please look at this demonstration: http://www.sciencelifeny.com/transparency/transparency.html


I think you are trying to do something really simple using very advanced methods. Why not use a simple animated transparent gif and then layer it with text headings using relative and absolute settings along with z-index ?

These setting are already available in RSD.

Attachments:
Bootstrap 5 CSS Grid.
User 2699991 Photo


Registered User
5,305 posts
Online Now

Taylor Kurz wrote:
You're right, but that's not how it's supposed to work. That is essentially two videos combined into one. You should only see that happy face moving with a transparent background. One half is supposed to be used for the alpha information.

Please look at this demonstration: http://www.sciencelifeny.com/transparency/transparency.html


well as I mentioned earlier you dont have the video in your resources
<source src="HappyFaceWeb.mp4" type='video/mp4; codecs="avc1.42E01E"' />

this is pointing at nothing
if you have the video hosted somewhere, (third party hosting) then you need point to that location
if you are going to put the video on your server then you need put that video into your resources folder then point to it

eg
make a new folder in your resources call it "video" (withhout the quote marks)
with that resource open select ADD Files browse to the video HAPPYFACEWeb.mp4 ans select it

then chance the <source src="HappyFaceWeb.mp4" type='video/mp4; codecs="avc1.42E01E"' />
to <source src="./video/HappyFaceWeb.mp4" type='video/mp4; codecs="avc1.42E01E"' />

if its hosted somewhere then add the hosting service webaddress
<source src="(hosting service web address & video reference location)HappyFaceWeb.mp4" type='video/mp4; codecs="avc1.42E01E"' />
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2699991 Photo


Registered User
5,305 posts
Online Now

Wayan Jaya wrote:
Taylor Kurz wrote:
You're right, but that's not how it's supposed to work. That is essentially two videos combined into one. You should only see that happy face moving with a transparent background. One half is supposed to be used for the alpha information.

Please look at this demonstration: http://www.sciencelifeny.com/transparency/transparency.html


well as I mentioned earlier you dont have the video in your resources
<source src="HappyFaceWeb.mp4" type='video/mp4; codecs="avc1.42E01E"' />

this is pointing at nothing
if you have the video hosted somewhere, (third party hosting) then you need point to that location
if you are going to put the video on your server then you need put that video into your resources folder then point to it

eg
make a new folder in your resources call it "video" (withhout the quote marks)
with that resource open select ADD Files browse to the video HAPPYFACEWeb.mp4 ans select it

then chance the <source src="HappyFaceWeb.mp4" type='video/mp4; codecs="avc1.42E01E"' />
to <source src="./video/HappyFaceWeb.mp4" type='video/mp4; codecs="avc1.42E01E"' />

if its hosted somewhere then add the hosting service webaddress
<source src="(hosting service web address & video reference location)HappyFaceWeb.mp4" type='video/mp4; codecs="avc1.42E01E"' />


apologies, there was a glip with my red,, The video has now shown in your resources so please ignore my previous post
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2893072 Photo


Registered User
6 posts

Twinstream wrote:


I think you are trying to do something really simple using very advanced methods. Why not use a simple animated transparent gif and then layer it with text headings using relative and absolute settings along with z-index ?

These setting are already available in RSD.



Great, thank you very much. Simple is good. This should work for my purposes.

Wayan Jaya wrote:

apologies, there was a glip with my red,, The video has now shown in your resources so please ignore my previous post

No problem, thanks for your help. I'm curious why it's not working, but it's a bit above my head.

My absolute goal is to have a simple looping background video with another looping video with transparency on top, as the title.
User 2902258 Photo


Registered User
3 posts

From Firefox, I do "view source" on your website.
view-source:http://edengirls.club

I then click on the video link to open it's respective view-source, coming up with this:
view-source:http://edengirls.club/HappyFaceWeb.mp4
which plays just fine when I remove "view-source:" from the front of the URL.

So try hard coding the link as
http://edengirls.club/HappyFaceWeb.mp4
if hadn't added it to your RSD resources as referred to above, before you exported it. It's a nice application, but many traditional items left out that includes smarter links as their HTML editor has, but no direct visual WYSIWYG as you edit the code.
User 2902258 Photo


Registered User
3 posts

Hard coding links (full / permanent) is a must inside RSD if you aren't going to load the resources to your project and link from within creating dynamic links based on where the site will be loaded.

For non-secure sites, you can actually leave out "http:" and it will be fine. Though if you leave it out for the secure sites, most are friendly enough to redirect, but still recommended to add "https:".

For example //edingirls.com/HappyWebFace.mp4 will work just fine for a full URL.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.