Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

July 06, 2008

How do i add Picture images to my web page...

It is just simple steps to follow...


1. Copy the script.

<a href="http://example.com" target="_blank"><img src="http://example.com/picture.jpg" border="0" alt="YOUR COMMENT HERE" /></a>


2. Edit the script with the reference page of ur wish and image location of your image uploaded to any web page

How do I add streaming video (using flow player) to my WEB PAGE or BLOG???

At this time, the best way to add video to a website is to use the Flash FLV video format. There are several reasons why Flash FLV is the right choice right now:
1. Flash Player is found in more browsers than any other player. Flash works on MacOS X, Windows, and Linux. Flash works in Internet Explorer, Firefox, Safari, and Opera.
2. Flash gives you excellent control over the presentation of your video; if you own Adobe's Flash product, you can design your own player user interface. There are also free and open source players you can use without buying Flash.
3. While Flash is unfortunately not a completely open format, much of the specification is available, and there are free tools to create FLV videos. 4. As of this writing, none of the widely supported alternatives are truly open in the legal sense - all of the popular video formats involve patented algorithms. Since all of the major formats have such problems, it makes sense to pick the most widely supported one, and that's Flash. Ogg Theora is a promising, truly free alternative, but it is currently too difficult for end users to install what they need to see it. And a video your users can't see is no video at all.
"I thought Flash wasn't real video!" Traditional Flash vector animations aren't. But Flash also offers Sorenson Spark and On2 VP6 full-motion video support, competitive in quality with Windows Media, RealMedia, etc. That's what I'm talking about in this article.
So how hard is it to put Flash video on your own website? Well, it takes some effort - and it also consumes bandwidth on your site. If you're looking for a quick fix for your personal "free" site, and you can't afford to pay for the bandwidth charges video can rack up, you should consider one of the free video hosting services. These services take care of all the tricky video conversions for you and host your video for you... but they do it in a way that promotes their company. If that doesn't bother you, check out YouTube, Google Video and StreamLoad. These are great services and I recommend them to beginners.
Now, the rest of this article will assume you want to do this yourself - because you don't want to promote another company on your website, because your video doesn't fit the guidelines and limits of the free services, or because you just don't want to look like an amateur.
So how do we create Flash video and put it on our website without spending hundreds of dollars? The following tutorial shows how to do it for free. This tutorial assumes you have Windows XP and are using Windows Movie Maker. We'll use the Riva FLV Encoder, a free, user-friendly converter based on the open-source FFMPEG encoder, to convert the video. And we'll use the open-source FlowPlayer Flash applet to actually embed the FLV video in our web pages.
Similar techniques can be used with other operating systems and software. Linux users will most likely use FFMPEG directly. See the encoding HOWTO on the FlowPlayer site for more information. MacOS X users, if they are brave at the Terminal prompt, can also go the ffmpeg route after exporting to "DV quality" from iMovie. Or they can spend the money for Adobe/Macromedia's Flash Studio 8 software.

This free solution doesn't take advantage of every video compression feature of Flash Video... but many users out there haven't upgraded their Flash players anyway. Also, be aware that FLV (Flash) video uses the MP3 audio format internally - and MP3 is patented. Currently the patentholders are fairly tolerant of free software that encodes MP3s, but that could change. Fraunhofer has said in the past that they will not go after end users for using open source encoder software, but don't be too shocked if your favorite free FLV encoder program suddenly disappears or becomes available only as source code for programmers. This is one of the reasons why the truly free Ogg Theora will someday be a better choice - once it is easily available for all major browsers and operating systems.

How to convert from Windows Movie Maker to Flash FLV Video

1. Download the Riva Free FLV Encoder software from Riva's website and install it. Make sure you get the free encoder, there is other software on that page.
2. Download the free FlowPlayer software. This is a simple Flash applet you'll embed in your page to actually display your FLV video on your website. See the included documentation for complete instructions.

Be sure to download flowplayer-1.6.1.zip, NOT flowplayer-1.6.1-src.zip. (The version number you see will probably be different and that's OK.)
The "src" download is the Flash programmer source code for FlowPlayer - not what most people want.
3. Create your video. You can use just about any video editing software, including Microsoft's free Windows Movie Maker.
4. Save a temporary working copy of your video in DV-AVI format. Windows Movie Maker prefers to save as WMV, but if you look carefully, it can also save DV-AVI. This is crucial because the Riva FLV Encoder software can't read the latest versions of WMV directly. To save your movie in DV-AVI format, click "Save to My Computer" under "Finish Movie," pick a name for your movie, pick "Other settings" on the "Movie Setting" page, select "DV-AVI (NTSC)" or "DV-AVI (PAL)" from the pull-down list, and click "Next" to complete the process.

Warning: DV-AVI is not a highly compressed format - the temporary file will be big. Make sure you have lots of free disk space.
5. Start the Riva FLV Encoder software: Start -> All Programs -> Riva -> Riva FLV Encoder

Riva FLV Encoder failed to start properly for me on two very different computers. However, it did work on a completely "stock" Windows XP SP2 box with the latest critical updates from Microsoft but no other optional software. If it "locks up" for you, try another computer. Riva tech support has been responsive and helpful but, so far, I still can't run it on my usual computers. Your mileage may vary.
6. In the "Input" area, click "Browse." Locate and select the temporary DV-AVI file you created in step 4.
7. In the "Output" area, pick the directory (folder) where you want to store your finished movie, and enter the name of your movie file, which should end in .flv. For instance, mymovie.flv is a reasonable choice.
8. Check the "Video" area: are you happy with the suggested movie size and bitrate? Higher bitrates take longer to download and can ring up bandwidth charges with your ISP... but the quality of the video is much better. Make choices that work for you.
9. Check the "Audio" area: is the bitrate appropriate for your content? If the original audio is high quality music, you might select a higher bitrate such as 128 (kilobits). However, most of the time, you'll be concerned about using too much bandwidth, so 56 is a more realistic setting. "Channels" will be set to stereo or mono, based on what your original movie contains. If it is set to mono, there's no point changing it - you can't really create stereo that was never there! If it is set to stereo, you have the option of reducing it to mono to save bandwidth.
10. Click "Encode" to convert your movie. Be patient. This can take a long time and Riva FLV Encoder does not display anything interesting during the conversion, the window just goes grey. This is not an error, just get a cup of coffee and wait! You should se "Encoding successful!" in the "Result" area when you are done.
11. You have an FLV video! But how do you put it on your web page correctly? Just follow the steps in the FlowPlayer HOWTO and you'll have your video up on your page in no time.
In a nutshell, the FlowPlayer SWF file - a Flash "applet" - is what you're embedding in your page. FlowPlayer then fetches and plays your FLV file. Don't try to embed the FLV file directly, that won't work!
Here's a simple example of how to successfully embed the video file mymovie.flv in a web page. Note that FlowPlayer can do quite a bit more than you see here, so read the FlowPlayer HOWTO.
For this to work as written, you MUST upload FlowPlayer.swf and mymovie.flv to the same folder the web page is in. The FlowPlayer.swf file is inside flowplayer-1.6.1.zip and you can extract it easily by double-clicking on the zip file and then dragging FlowPlayer.swf from the zip file's content listing to your desktop or another location. If you don't take time to understand this, your video will not work, so read it again.
Note: the width attribute of the object element is set to 320 to accommodate a video 320 pixels wide. No surprises there. However, the height attribute of the object element is set to 263, to accommodate a video 240 pixels wide. This is because the controls at the bottom of the window take an extra 23 pixels. Be sure to set your width and height to match your video, with an extra 23 pixels of height.

Script:


<object type="application/x-shockwave-flash" data="FlowPlayer.swf" width="320" height="263" id="FlowPlayer">
  <param name="allowScriptAccess" value="sameDomain"/>
  <param name="movie" value="FlowPlayer.swf"/>
  <param name="quality" value="high"/>
  <param name="scale" value="noScale"/>
  <param name="wmode" value="transparent"/>
  <param name="flashvars" value="videoFile=mymovie.flv"/>
</object>


12. Delete your temporary DV-AVI file! Your hard drive will fill up quickly if you keep these around.
If you want the video to start playing as it downloads instead of waiting for the user to click, you can add the autoplay option to the flashvars parameter, like this:


Script:


<param name="flashvars" value="videoFile=mymovie.flv&autoPlay=true"/>


See the FlowPlayer documentation for additional options.
"Under the hood," the Riva Free FLV Encoder uses the same open source, command-line FFMPEG software that Linux users might use to do the same conversion manually.

File Size Issues

Video files are big. Very big. Enormous. I cannot overemphasize this. If you are paying for your web space and your video becomes popular, you will exceed your bandwidth allocation and be billed extra. If you are not paying for your web space, then your file will probably get removed from the site of your free hosting provider, or performance will be unacceptable for your users. You can help to prevent these problems by keeping your videos short, keeping your video resolution (the width and height of the actual video) small, and playing videos only when users actually ask you to do so by clicking on a link. And, of course, you should use well-compressed formats like FLV, RealVideo, QuickTime, and Windows Media. Never upload a "raw" DV-AVI file straight from your mini-DV camcorder. If you have control over your web server and a reasonable degree of system administration ability consider distributing your videos in a peer-to-peer fashion via BitTorrent. But if you do, make sure your users have a standalone FLV player so that they can play an FLV that's not part of a web page. The Riva Free FLV Encoder includes such a player. As you may have inferred from this, BitTorrent is not a seamless way of embedding a video in a page. It's best for very long, very large, high quality video files that are worth the effort.
Alternatives To True Video
Video is best used when nothing else will do. If your goal is to add dynamic elements to your web page design, consider an ordinary Flash applet instead of Flash FLV or other true video. And, of course, there is always the option of creating a simple animated GIF file. Animated GIFs are supported by nearly all graphics creation programs and will play in virtually any browser, with the first frame appearing in rare environments that do not support animation.

July 05, 2008

How do I add streaming audio (using XSPF player) to my WEB PAGE or BLOG???

Hello friends.. Are you interested in creating cute web pages??? Is this your Hobby??

You can add your own collections on your page. It just simple...

Here are those simple and easy tips...

Linking Directly to Audio Files

You can invite a user to play an audio file with a simple link like code0.

Script:

<a href="mysong.mp3">Listen to my band's latest release now!</a>

Of course you must actually create mysong.mp3 in the first place, and upload it to your web hosting space, placing it in the same folder with the page. If you have not recorded or edited your sound files yet, I recommend Audacity, an excellent piece of free, open-source software that does a fine job of recording and editing audio files. It is suitable for both simple recordings and elaborate multitrack songs.

Embedding Audio Files To Play in the Background

There are many ways to do this, offering various degrees of control and compatibility. In the past I've recommended embedding the music file directly with the or

Ideally, the major embedded media players - RealPlayer, Windows Media Player, and QuickTime - would agree on a standard way to "remote-control" what's going on. Then we could use JavaScript and HTML to create our own "music player" look and feel. Or at the very least, successfully fetch the title of the currently playing song!
Unfortunately, the big players have never come to agreement on this. So right now, we simply can't do that reliably and consistently with the three major media players. While they work okay for embedding just one song, they start to disappoint the moment you get past that level. So I don't recommend them.
Does that mean we're stuck? Heck no! Fortunately, Flash Player is the most popular web browser "plug-in" of all, reaching roughly 97% of all users. Those who don't have it are usually in work environments where all plug-ins are forbidden anyway. And unlike the three players that are dedicated exclusively to playing sound and video, Flash Player was always intended to give the designer lots of control. In fact, support for MP3 music in Flash Player was originally intended to jazz up interactive Flash "applets" and games.
What does that mean for us? It means that by using Flash, we can get excellent control over the appearance and behavior of our in-page music player.

"Open-source Flash applet? How is that possible?" The SWF file format used by Flash applets is a quasi-open standard. And Adobe doesn't prevent you from redistributing your Flash applet as open source.

While it's true that Adobe/Macromedia's Flash Professional software costs a pretty penny, other people have already created free, open-source Flash-based music player "applets" that you can embed in your own page. The best of these is XSPF Web Music Player, a simple, free music player applet that gets the job done. And since that software is open source, others have extended it to support useful features like shuffle play. I'll be pointing you to the download page for one of those extended versions.

Embedding Music With Flash And XSPF Web Music Player

Ready to go? Great! Here are the steps to add music to your web page with Flash and the XSPF Web Music Player. 1. Download Web Music Player software. Just follow the instructions on that page to fetch a zip file that contains both the "extended" version, which displays a playlist, and the "slim" version, which just shows the currently playing song.
2. Open up the "compressed folder" (zip file) you've just downloaded. Extract it to your hard drive with "extract all files," then open the folder you've extracted it to. There will be two sub-folders, "Extended" and "Slim." Open the one you prefer. Now locate the file xspf_player.swf (or xspf_player_slim.swf). Windows users probably won't see the .swf part of the name - just don't use the .as or .fla file. If you're not sure which is which, right-click and pick "Properties" to show more complete information.
3. Upload xspf_player.swf (or xspf_player_slim.swf) to your website and drop it in the same folder with your MP3 files. (You could put it somewhere else, but this tutorial will assume it is in the same folder.) Usually you can do this by dragging and dropping to your favorite file transfer program.
4. With Notepad or another text editor, create a simple "playlist" file and save it with the name: test.xspf
The playlist file should look like this. Notice the title element, which should name your band and album (or any other heading you consider appropriate), the location element for each track, which should specify the name of the .mp3 file (you can use a full URL here if the .mp3 file is not in the same folder), and the annotation element for each track, which should give the name of the song so the user can see what they are listening to. You can also specify an image element, which provides a URL to an image to be displayed in the box to the left of the song (in the larger "extended" player)

Script:

<?xml version="1.0" encoding="UTF-8"?>
<playlist version="1" xmlns = "http://xspf.org/ns/0/">
  <title>My Band Rocks Your Socks</title>
  <trackList>
    <track>
      <location>a.mp3</location>
      <image>songaimage.jpg</image>
      <title>Name Of Song A</title>
    </track>
    <track>
      <location>b.mp3</location>
      <title>Name Of Song B</title>
    </track>
    <track>
      <location>c.mp3</location>
      <title>Name Of Song C</title>
    </track>
    <track>
      <location>d.mp3</location>
      <title>Name Of Song D</title>
    </track>
  </trackList>
</playlist>


5. Upload the playlist file, test.xspf, to your website as you would any other file.
6. Add the following code to your web page. This tutorial assumes your web page is in the same folder with your playlist file and xspf_player.swf:




Script:

<object type="application/x-shockwave-flash" width="400" height="170"
data="xspf_player.swf?playlist_url=test.xspf">
<param name="movie" value="xspf_player.swf?playlist_url=test.xspf" />
</object>



Note: I've set the width and height as suggested on the XSPF Web Music Player web page, but you can set them larger if you wish. If you are using the slim player, you'll set the height attribute quite a bit lower.
"The data attribute and the param name="movie" element carry the same information. Do I need both?" Yes. Flash is embedded differently in different web browsers.
7. Refresh the page in your browser. Your music player is up and running!
When you make changes to an XSPF file, clicking Reload or Refresh in your browser will not reload the XSPF file. You will not see your changes, even if you restart your browser. Yes, it's really annoying, but it seems to be a fact of life with Flash. To be sure you see the effect of your changes, rename your XSPF file and change the name under which you load it in your web page. Clearing the cache may also be sufficient.

If It Doesn't Work

1. Make sure you uploaded the .swf file. 2. Make sure you uploaded your .xspf file. You did make one, right? If not, go back and read the instructions and do a thorough job.
3. Make sure you uploaded your .mp3 files.
3. If you are sure your HTML is correct and your browser shows the player but refuses to play the songs, it is possible that your web server doesn't allow files with a .xspf extension to be served. You can work around this by renaming your .xspf file to .txt. If you do so, you must change .txt to .xspf in both places where it appears in the object element.

--------------------------------------------
Alternatively, if you have a single image that's appropriate for all of your songs, you can set one up via the main_image parameter. In this example, the file cover.jpg is fetched from the same folder where the page is located:

Script:

<object
type="application/x-shockwave-flash"
width="600" height="200"
data="xspf_player.swf?playlist_url=playlist.xspf&main_image=cover.jpg">
<param
name="movie"
value="xspf_player.swf?playlist_url=playlist.xspf&main_image=cover.jpg" />
</object>


If your image is larger than the box, it will be automatically resized to fit.

Alternate Method: For MIDI Files And Flash Haters

This is a great way to embed one or more songs in a web page. But maybe you have MIDI files, which this method can't support. Maybe you just hate Flash. And maybe you just want to know how to do it in a more generic way, without forcing the use of any particular player. This example shows how to do that. The following example accommodates browsers all the way back to Netscape 4.
Does the audio file have to be on the same site? No. Much like the src attribute of an img element, the src attribute of the EMBED element can point to any site you like with a full URL, such as http://www.example.com/examples/mysong.mp3.
Script:

<embed src="mymusic.mid" height="60" width="145" autostart="true" loop="true" width="0" height="0">

</embed>

By default, auto resume is off. To turn it on, you need to add &autoresume=1 to the end of the player URL, as shown here:

<object type="application/x-shockwave-flash" width="400" height="170" data="xspf_player.swf?playlist_url=test.xspf&autoresume=1&autoplay=1">

<param name="movie" value="xspf_player.swf?playlist_url=test.xspf&autoresume=1&autoplay=1" />
</object>

Receive all updates via Facebook. Just Click the Like Button Below

You can also receive Free Email Updates:

dgpride - Study Zone - Free Books - Tamil Lyrics

Copyright © 2008 -2012 dgpride. All rights reserved.

Subject/Topics

2 Marks (26) 8051 (1) AC Machines (7) Animations (1) Anna University Chennai (31) Arduino (4) ARM (3) Audio (1) Basic C Concepts (8) Basic Electronics (13) Basic principles (9) Book list (1) CAD (1) Chemical (2) Circuit theory (6) Civil (2) Cloud Computing (1) Communication (4) Competitive exams (2) Computer Architecture (4) Control system and components (9) CSE (40) Curriculum (4) DC Machines (9) Did you know (14) Digital (13) DLC (4) Documentation (1) DSP (1) EC 2201 (3) ECE (45) EDC (1) EEE (34) EIE (63) Electrical (35) Electronics (43) Electroplating (2) Emacs (1) Embedded basics (19) Embedded C Programming (19) Embedded Linux (5) Embedded System (22) Engineering basics (15) Environmental Science (1) Fibre Optics (1) Filters (2) FPGA (1) GATE (3) General (7) GNU (4) Handwritten (1) Hobbyist (15) How to (8) HTML (3) Humanities (2) IC Engines (7) ICE (5) Industrial Electronics (10) Industrial Instrumentatin (2) industrial process (2) Instrumentation (21) IoT (2) IT (2) Laboratory Manuals (17) LabVIEW (2) Lesson notes (2) LIC (2) Links (9) Linux (8) Magnetics (1) Management (1) Mechanical (5) Mechatronics (9) Microcontrollers (14) Microprocessors (9) Microsoft (1) Motivation (1) Must Know (11) Networks (1) NuttX (1) Objective type (1) Open Source (1) Opportunities (7) Oscillators (2) Part Time (1) Physics (1) Post Graduation (1) Power Electronics (12) Power Plant Engineering (2) Power Supplies (2) Previous GATE Papers (1) Process Control (2) Project (4) Protocol (1) R2008 (11) R2009 (1) R2013 (1) Recruitment (2) Research (2) Robotics (9) RTOS (3) Signal Processing (8) Signals and Systems (4) SMPS (1) Software tutorial (4) Stepper Motor (2) Syllabus (5) Texas Instruments (2) Thermodynamics (2) Training and Placement (6) Transducer Engineering (2) Transformer (2) Transmission (1) Tutorials (48) Two Marks (26) U-Boot (1) University Question Papers (16) Verilog (1) Video (4) Virtual Instrumentation (3) Visual Basic (21) VLSI (11) Web designing (4) Wi-Fi (3) Wireless (6)