DISCOVER
×

How to Embed a VLC Player in HTML

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.

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

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

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

Play

Pause

Stop

Fullscreen

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.

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

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.

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

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

Tip

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

Things You'll Need

  • Web page editor (such as Notepad, Dreamweaver or NetObjects)
Cite this Article A tool to create a citation to reference this article Cite this Article

About the Author

Jeff Grundy has been writing computer-related articles and tutorials since 1995. Since that time, Grundy has written many guides to using various applications that are published on numerous how-to and tutorial sites. Born and raised in South Georgia, Grundy holds a Master of Science degree in mathematics from the Georgia Institute of Technology.