How to Embed a VLC Player in HTML

Written by jeff grundy

Share

Tweet

Share

Pin

Email

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

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

2

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

3

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

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

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

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

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

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).