Custom Video Player
Added a new feature today that you can use to create your own custom video player. Sure you can use YouTube or something similar, but then the video player is branded to YouTube and only allows you up to 10 minutes of video. If you have a need for something a bit more personal, now you can design your own frame for your video, design your own controls, and all the code is written for you. All you have to do is name the layers right.
As with any psd2css Online feature, the trick is in how you name the layers of your Photoshop design. For this feature, there are 4 new Layer Naming Conventions. The most important is _video. Draw a rectangle somewhere in your web page design for the actual video and name that layer with the _video Layer Naming Convention. So 'myvid_video' for example. Really that's all you need to do. But if you want your users to be able to pause, rewind or play your video again, then you'll want controls too. Just draw the controls and name them with the _play, _pause or _rewind Layer Naming Conventions. Make sure the first part of the _video layer name matches the first part of the _play, _pause and _rewind layer names. So for our example if you had a myvid_video layer, then the controls for it would be myvid_play and myvid_rewind, etc.
As with most psd2css Online features you can mix and match too. So if you want a mouse over effect for your controls just use the _link and _linkover features as well. So for the example above you might have a myvid_play_link and myvid_play_linkover pair that work as the 'play' button for your video.
Here is the page generated in the video (I added the text by hand):
Here is a link to the PSD file used in the video:
The video file itself has to be a Flash FLV video file. That is the standard format that Adobe Flash videos are in. The name of the FLV file needs to match what you used in the layer name. For our example above, the layer we called myvid_video will get code generated that will play a video file called myvid.flv. We supply a place holder video that is already named correctly in the page we host for you and in the zip file with all the other generated code. You'll certainly want to replace that FLV file with your own.
Converting pretty much any other video file to FLV is very simple anymore. There are lots of online tools that you can use for free to convert all sorts of video formatted files to FLV. Just google 'convert FLV online' or something. There are open source tools that you can download and use too. mencoder and ffmpeg are very good and have tons of options. There are lots of GUI conversion tools made from them as well. Of course Adobe Flash comes with a utility to convert any video file to FLV.
In the video I made above I used this website: