Video texture in edge animate

How can i use something like a video texture in Edge animate? And can i use it anyway???

what do you mean by a video texture? You can add videos for background for example.

Similar Messages

Is that you can add a video player in edge animate

Is that you can add a video player in edge animate

Not sure if this is what you are looking for but passing it on nevertheless
http://layersmagazine.com/embedding-video-in-adobe-edge-animate.html
Thanks,
Preran

Trying to create HTML5 Video Playlist in Edge Animate - I can't get it to work. Please help!?!?

Hi All,
I am creating an interactive site through Edge Animate and am in the process of trying to create a HTML 5 Video Playlist to function within Edge Animate.
Current Process - Example:
I have 3 videos that need to be played on a certain page.
I created a symbol and dragged the videos to the stage and hidden them within that symbol's timeline.
I then use thumbnail images in a side playlist to either .remove(); .hide(); a video and .show(); the next.
However when I do a hide / show option, the video continue to plays in the background if I don't also create an if/else statement to pause it.
My concern with pausing it is that it will continue to load and dramatically slow down the load time of the site.
References:
I found this which looks very helpful but don't know how to add this to edge composition.
http://demosthenes.info/blog/909/Create-An-Automatic-HTML5-Video-Playlist
Please help or put me in the right direction to create a playlist would be hugely... AMAZINGLY.. helpful.
Thanks,
Jason

Hi Joe,
Thank you so much for your help on this one. It is hugely appreciated!!
I have been working frantically to implement your solution to get this working. I used the 'change src' method.
I have added all my code below in case anyone wants the solution in the future.
Could you please help below as I am now totally stuck with the <track> and 'event listener issues' !!
Issue #1:
I am having major problems with loading the 'closed captions' track element.
Everything I click for the video to change source / to the next video, the closed caption track adds to the video and doesn't 'unload' the previous one. You then end up with multiple different subtitle tracks on the video screen
- The closed captions / subtitles are not showing up in Google Chrome either?
Issue #2:
I can't get the event listener in edge animate to work for 'playing' and 'ended'. Can you please help and point me in the correct direction??
Screenshot (showing what happens after the 3rd video is loaded)
This is the Code I am currently using in the "Creation Complete" of this Symbol.
SET UP OF VIDEO PLAYER AND FIRST VIDEO
var vid = sym.$("video_Chapter5");
vid.html('<video id="ch5video" width="100%" height="auto" margin= "0 auto" \
position ="relative" poster="video/video1_poster.jpg" controls="controls" </video> \
<source id ="videomp4src" src="video/Video_mp4_1.mp4" type="video/mp4" </source> \
<source id ="videoogvsrc" src="video/Video_ogv_1.ogg" type="video/ogv" </source> \
<source id ="videowebmsrc" src="video/Video_webm_1.ogg" type="video/webm" </source> \
<track id ="trackvtt" kind="subtitles" src="video/Video_1_Script.vtt" srclang="en" label="English" hidden </track>');
VARIABLE IDS
$(document).ready(function() {
var videoID = 'ch5video';
var sourceID1 = 'videomp4src';
var sourceID2 = 'videoogvsrc';
var sourceID3 = 'videowebmsrc';
var trackID = 'trackvtt';
var vid1mp4 = 'video/Video_mp4_1.mp4';
var vid2mp4 = 'video/Video_mp4_2.mp4';
var vid3mp4 = 'video/Video_mp4_3.mp4';
var vid4mp4 = 'video/Video_mp4_4.mp4';
var vid1ogv = 'video/Video_ogv_1.ogv';
var vid2ogv = 'video/Video_ogv_2.ogv';
var vid3ogv = 'video/Video_ogv_3.ogv';
var vid4ogv = 'video/Video_ogv_4.ogv';
var vid1webm = 'video/Video_webm_1.webm';
var vid2webm = 'video/Video_webm_2.webm';
var vid3webm = 'video/Video_webm_3.webm';
var vid4webm = 'video/Video_webm_4.webm';
var script1vtt = 'video/Video_1_Script.vtt';
var script2vtt = 'video/Video_2_Script.vtt';
var script3srt = 'video/Video_3_Script.vtt';
var script4vtt = 'video/Video_4_Script.vtt';
var newposter1 = 'video/video1_poster.jpg';
var newposter2 = 'video/video2_poster.jpg';
var newposter3 = 'video/video3_poster.jpg';
var newposter4 = 'video/video4_poster.jpg';
VIDEO PLAYLIST THUMBNAIL BUTTONS - TO CHANGE VIDEO IN PLAYER
sym.$('btn1').click(function(event) {
sym.$('#'+videoID).get(0).pause();
sym.$('#'+sourceID1).attr('src', vid1mp4);
sym.$('#'+sourceID2).attr('src', vid1ogv);
sym.$('#'+sourceID3).attr('src', vid1webm);
sym.$('#'+trackID).attr('src', script1vtt);
sym.$('#'+videoID).get(0).load();
sym.$('#'+videoID).attr('poster', newposter1);
sym.$('#'+videoID).get(0).play();
sym.$('btn2').click(function(event) {
sym.$('#'+videoID).get(0).pause();
sym.$('#'+sourceID1).attr('src', vid2mp4);
sym.$('#'+sourceID2).attr('src', vid2ogv);
sym.$('#'+sourceID3).attr('src', vid2webm);
sym.$('#'+trackID).attr('src', script2vtt);
sym.$('#'+videoID).get(0).load();
sym.$('#'+trackID).load();
sym.$('#'+videoID).attr('poster', newposter2);
sym.$('#'+videoID).get(0).play();
sym.$('btn3').click(function(event) {
sym.$('#'+videoID).get(0).pause();
sym.$('#'+sourceID1).attr('src', vid3mp4);
sym.$('#'+sourceID2).attr('src', vid3ogv);
sym.$('#'+sourceID3).attr('src', vid3webm);
sym.$('#'+trackID).attr('src', script3srt);
sym.$('#'+videoID).get(0).load();
sym.$('#'+videoID).attr('poster', newposter3);
sym.$('#'+videoID).get(0).play();
sym.$('btn4').click(function(event) {
sym.$('#'+videoID).get(0).pause();
sym.$('#'+sourceID1).attr('src', vid4mp4);
sym.$('#'+sourceID2).attr('src', vid4ogv);
sym.$('#'+sourceID3).attr('src', vid4webm);
sym.$('#'+trackID).attr('src', script4vtt);
sym.$('#'+videoID).get(0).load();
sym.$('#'+videoID).attr('poster', newposter4);
sym.$('#'+videoID).get(0).play();
EVENT LISTENER FOR PLAYING - TO CREAT BACKGROUND /LIGHT BOX SCREEN
sym.$('#'+videoID).get(0).addEventListener('playing', function () {
sym.getSymbol("backscreen_Ch5").$("backscreen").show();
sym.getSymbol("backscreen_Ch5").play("play");
EVENT LISTENER FOR ENDED - TO PLAY NEXT VIDEO IN SERIES
sym.$('#'+videoID).get(0).addEventListener('ended', function () {
//code to play next video

Adding captions to video file in edge animate

Any ideas if this is possible? Thanks to heathrowe I have been able to add video to my project but I also need to add text to accompany it (think captions or subtitles). I currently have text appearing and reappearing but it is independent to the video timeline, so if a viewer skips the video the captions do not reappear. Any thoughts or workarounds would be massively helpful as i am very new to edge but eager to do some great motion design

Hi Jakey,
Have you cracked this?
I think I'm pretty close using a plugin called bubbles.js
I've got the plugin working here.
However when I attempt to install the plugin within edge by placing the following code on the stage compositionReady action it's not working. The function seems to be called, however according to the web inspector the english.srt subtitle file isn't being downloaded, any ideas?
Code:
var vid = $("<video width='640' height='360' id='video-srt' controls=''>" +
   "<source src='test.mp4' type='video/mp4' />" +
   "<source src='http://www.w3schools.com/html5/movie.ogg' type='video/ogg' />" +
   "This browser is not compatible with HTML 5" +
"</video>");
$.getScript("js/bubbles.js", function() {
                    subtitles_test = new Bubbles.video('video-srt');
                    subtitles_test.subtitles( false,
                                        'English' :          {
                                                  language          :          'English',
                                                  file                    :          'subs/english.srt'
sym.$("vcontainer").append(vid);

Problem uploading video to edge animate

I am trying to add a video to my Edge Animate project, but every time I complete the process, it doesn't show up in the library. Here is the process I follow:
1. In the library panel, I click the + sign next to the video tab
2. The browse dialog box pops up and I find the video and double click it to add it to the Edge Animate library
3. Edge Animate pauses for a second, then appears to be ready to continue, but the video never shows up in the library
The movie was created in Premiere Pro. I exported it as an H.264 high def movie. The file is 760 MB. The title of the movie is Yellowstone.mp4.
I am able to upload other movies which are the same H.264 codec with the .mp4 extension.
Is there a size limit on video files for Edge Animate?

When you add any Video to the animate project, the video gets copied from the location you selected to the Edge composition folder.
As your video is very large-sized, it takes quite a time to copy it. And if copying fails internally, then it won't show in the library.
Workaround:
     First save the composition somewhere.
     And then manually, copy all such large-sized videos to the composition's media folder.
     Then automatically it will show under Vidoe Library.
hth,
Vivekuma

How To Create A Website Background Video In Adobe Edge ?

Hello,
I have video file in my computer SSD drive and i want it to play as background on my web page (page that i am creating).I did try to follow this video:
How To Create A Website Background Video In Adobe Edge Animate Using Edgehero - YouTube
but i cant follow 100% what he is doing.
Guide that i did try to follow is at this link: How To Create A Website Background Video In Adobe Edge Animate Using Edgehero - YouTube
Steps i do in Adobe Edge Animate CC
1.) Create New
2.) i click + sign under section Library >> Scripts >> Add JS File from URL...
URL that i am adding is: http://www.edgehero.com/edgehero.js/1.2/edgehero_1.2_min.js (URL is taken from site: Edgehero.js )
I add this link: http://www.edgehero.com/edgehero.js/1.2/edgehero_1.2_min.js to box that occures after i click on Add JS File from URL
3.) I go to Edgehero.js and from there i scrol down to section named as Media - Html5 video / Html5 audio
and i select from there this:
there is a code:
// this will set the video as background of the div/rectangle
backgroundvideo_1 ='movie.mp4';
// put new edgehero.js variables here
4.) I go to Adobe Edge Animate CC 2014 and right click on project and select Open Actions for "Stage"
and then i click on + sign and select creationComplete
This will open Stage window
there i will copy this code:
// this will set the video as background of the div/rectangle
backgroundvideo_1 ='movie.mp4';
// put new edgehero.js variables here
5.) Then i click on ++ sign under library >> Video
and i add video from my computer SSD drive.
Video is named as video3.mp4
Now i eddit the code in Stage window (See above)
code will look after editing like this:
Then i change under left side px to %
6.) Then i copy backgroundvideo_1 from Stage Code:
Then i select Rectangle Tool and mark the area (white box) and i click on small C icon
And the box that occures i type there backgroundvideo_1_mp4 autoplay
now when i use ctrl and enter i only get gray box that does not play video.
What am i doing wrong?

Here is the html file.
Note video file that i try to add is random training video from youtube, And file format is saved using this site:
How do I download and save a YouTube video to my computer?
this is only for testing as i am not gonna put that video on background to my web page. I am only trying to understand how to add video as background.
http://www.filedropper.com/test3_5
http://www.filedropper.com/test3_6
http://www.filedropper.com/test3edge
http://www.filedropper.com/test3edgeactions
http://www.filedropper.com/test3edgepreload
Goal is to create background video like u can see here:
Adobe Muse Tutorial - Responsive Design Hack! by MuseThemes.com - YouTube
Similar possibility is available also in Edge as i understand?

Embedding Video within Adobe Edge

Hi
I am trying to embed a video within Adobe Edge Animate. We had a solution which allowed us to place a video within a page and then click the video to expand to full screen. We have tried to use the code again but now that iOS6 has been installed the aniation crashes when the expand to full screen is clciked on the player.
Does anyone know/have an edge example they can share
Thanks in advance
Andrew

You cant.
Emails are not the web and will never handle flash, scripting, videos etc.
Other platforms will not do this either because its not a system feature, it is to do with how emails work.
What you can do is have an image which links to a video on the web/page with video so people an view that.

How do I stream video in edge animate?

I am a Flash Pro convert, which means I know action script, but not html, html5 or js. I found a training video that talks about embedding youtube video through the use of a container and creationComplete coding. However, I would prefer not using embeded youtube video (since I think it still requires flash player). I also was unable to even make the youtube embeding work.
I downloaded a html5 player/converter thinking I could convert the video to html5 video and drop the associated code into my composition. But unfortunately, I don't know if this is possible or where I might "drop" the code in. I've searched for several hours for a solution to this problem and have found very little information related to my issue.
Any help on this would be greatly appreciated. I'm willing to put in the work to find answers and learn, but at this point I suspect I may not know the right questions to ask.
Thanks in advance.
bevans9908

Moved to the Edge Animate forum. They will be able to help you here.

My .MP4 video file won't "play video full screen" in Muse after I publish my .OAM out of Edge Animate.

My .MP4 video file won't "play video full screen" in Muse after I publish my .OAM out of Edge Animate. When I "Preview In Browser" through Edge it plays (I have created a shape and used the "play video full screen" snippet) in full screen mode just fine. When I "Preview Site In Browser" through Muse and click on the shape to PLAY VIDEO FULL SCREEN, it does nothing. I am new to both programs and can't figure out why it will work out of the preview window in Edge and won't work when I publish to Muse. Does anybody have an answer or a work-around for me?

Hi Watch this video,
If this is what you need, you can get it here [[zazaalaza's]].mulib - Google Drive

How to replay entire composition including video and other animation in edge animate cc 2014.1

I am working on a project but i am stuck now. The basic flow of my project is: intro slides then a video plays then next and back buttons fade in that will control the next set of slides. Another button to replay the whole thing from start. My problem is i am able to replay the slides but not the video. My slides consists of text animations. I am using the new edge animate cc 2014.1 All the slides play from the beginning but the video does not follow that lead. I also managed to replay the video but thats not the desired thing i want. I want the whole composition to play again when i click a button. Can anyone help ?

The problem is with the playReverse call for time duration in which video is there.
playReverse actually plays in timeline in revere order 5sec->4sec->...->0sec, but this won't work for video as it doesn't play the video in reverse.
what you can do is that, in the "previous" button click handler, add
     if(sym.getPosition() > 7750) {
       sym.playReverse();
     else {
       sym.$("trance6")[0].pause();
       sym.$("trance6")[0].currentTime = 0;
       sym.play(0);
Also in "start" button click handler there needs a correction as below:
     Use this sym.$("trance6")[0].play();
     instead of sym.$("trance6")[0].play("1");
hth,
Vivekuma

The best way to import video in Edge Animate project?

What is the best way to add video and audio in Edge ANimate project?
Thanks
Ares

Hi,
Can you check out the answers on this forum thread, and let us know if it helped you?
Can I import video into Edge? (http://forums.adobe.com/message/4352262)
Thanks,
Preran

Embedding edge animate video in muse don't work on firefox

I do a simple animation in Edge Animate. A video and 2 buttons: 1 to play/pause and 1 to mute on/off. It's a resizable vidéo and I import it into Muse. She perfectly run on Chrome, Safari and IE9, but I have only the sound on Firefox.
You can see my try ; http://www.paccom.fr/kfh/index.html

Hello,
URL seems to show video on both Chrome and Firefox.
Please clear cookies of the browser and then try to check the URl
Regards
Vivek

Can we capture the video and audio using cam and microphone in Edge Animate?

Hi Everyone,
I got a new requirement from the client to create a HTML5 based functionality through which one can capture the video and audio using his web-cam/camcorder and microphone. I have researched on internet and found that there is api available (not reliable) http://www.html5rocks.com/en/tutorials/getusermedia/intro/ . I am not a coder by profession and use Edge animate to create HTML 5 based animations and stuff like that. Another problem which i have found that the api only works well with Chrome and Opera and not with Mozilla, IE..
Can anybody help me out in this, please...
Thanks & Warm Regards
Vikas

Hi, Vikas-
After a brief bit of research, you're definitely hitting upon the limitation of the browsers. Not all of the browsers have implemented this part of the HTML5 standard, so you're going to either have to use Flash or be limited to these specific browsers.
Thanks,
-Elaine

Is it possible to make a video preview and export it from edge animate?

is it possible to make a video preview and export it from edge animate?

Hi Johan,
If you are looking to export video through Edge Animate.
Well, there is no direct way to do it but you could use a screen recorder to make an mp4. Then you can import the mp4 in PS and if you have the plugin for gif then you just save aa a gif.
Regards,
Devendra

Edge Animate to video format?

I have received a request to convert an Adobe Edge Animate animation output to a video format such as .mov .
Does anyone have and Idea on how to do this?

Do a video capture with a video capture software like Camtasia or other free or cheap software like frontcam.

Video texture in edge animate

Similar Messages

Maybe you are looking for