How to Embed a VLC Player in HTML

Written by jeff grundy Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Embed a VLC Player in HTML
Embed and stream audio and video on your website with VLC Media Player. (stereo seperates image by Nicemonkey from Fotolia.com)

Streaming audio clips and videos make websites more interactive and interesting. If you have a website and want to post informative or fun videos or sound clips, there are many solutions for embedding an audio clip or video in web pages. However, some commercial applications are expensive and add considerably to the cost of developing a web site.

VLC Media Player is an Open Source media player with a built-in streaming server. With more 100 million users, VLC is one of the most popular media players available. Embedding the VLC media player in your web pages requires a few lines of HTML code.

Skill level:
Moderate

Other People Are Reading

Things you need

  • Web page editor (such as Notepad, Dreamweaver or NetObjects)

Show MoreHide

Instructions

  1. 1

    Open the HTML page you wish to edit with a text editor or web page editor (e.g., Notepad, Write Pad, Dreamweaver).

  2. 2

    Scroll to the area where you want to embed the audio clip or video file on the web page.

  3. 3

    Copy and paste the following code into the editor at the point where the VLC Media Player will display on the page:

    <embed type="application/x-vlc-plugin" name="VLC" autoplay="yes" loop="no" volume="100" width="640" height="480" target="mymovie.avi">

    <a href="JavaScript:;" onclick='document.video1.play()'>Play</a>

    <a href="JavaScript:;" onclick='document.video1.pause()'>Pause</a>

    <a href="JavaScript:;" onclick='document.video1.stop()'>Stop</a>

    <a href="JavaScript:;" onclick='document.video1.fullscreen()'>Fullscreen</a>

  4. 4

    Edit the parameters in the "embed type" section of the code. This section allows you to customise the player within your web page. Change "autoplay" to "no" if you want the user to click the "Play" button on the media player before the track or video plays. Change the "loop" parameter to "yes" if you want the media to continue to repeat until stopped by the user.

  5. 5

    Adjust the volume level in the appropriate parameter setting if needed.

  6. 6

    Replace the "mymovie.avi" file name with the file name of the track or clip to play in the media player. Ensure that you upload the file into the same folder as the web page, so the browser can reference the correct path to the file.

  7. 7

    Change the width and height parameter settings to fit your web page or as needed.

  8. 8

    Save the web page in your editor and upload the HTML page and clip or video to your website.

Tips and warnings

  • Always code your VLC HTML pages so that they are compatible with all major browsers (e.g., Chrome, Firefox, Explorer and Safari).

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.