How to add video to your site

Juzzyman · January 22, 2012

Hi Everyone

I am pretty new to the world of osCommerce. I have learnt so much from all of you on the Forum.

I am sure there are other ways to do this but I wanted to give back to the Forum something that I struggled with for a while and I have also seen the question posted a few times.

Please I am NO expert and I cannot really help you with this if it doesn't work. I tried and tried and read and tried and eventually got it to work.

I have tried to write this a simply as I can so apologies to all the PROs out there. You probably know how to do this so I am sure you wont be reading this anyway.

This is what I did:

How to add video to your site:

I use a player called Flowplayer and you can find it here: http://flowplayer.org/download/index.html

It is an amazing product and you can install it for free. The free version plays your video with a very quick watermark that appears as the video starts. Buy the product and you will not have the watermark. You can even add your own if you buy it.

I followed the installation instructions on the site. It was really easy to install on my home page which does not involve osCommerce. The problem I had was when I was inside osCommerce and I wanted a video to play when someone clicked on a product.

What you have to do is install the player on your site and then you need to tell the player which video to play. As I said I have one player installed on my home page which plays a welcome video and then I installed another inside osCommerce which plays a video of my product.

For some reason my folder is called "store" which is my main osCommerce folder in my root directory but I think it is nomally called "Catalog" If yours is called "Catalog" then any time you see "Store" in these notes, just change it to say "Catalog"

Here goes:

1.) Inside my "Store" folder I created a folder called "flowplayer". Install flowplayer in there.

2.) I also created a folder called "video" inside my "Store" folder. Upload all your videos to this folder. Your videos need to be flash videos, so .flv

3.) Inside the "Store" folder go to the "includes" folder and look for template_top.php open this in whichever editor you use. If you copy and paste the code below, you need to edit the script line!!

Just after the <Head> tag add this:

<!--

include flowplayer JavaScript file that does

Flash embedding and provides the Flowplayer API.

-->

Obviously you can delete the " A Minimal Flowplayer..." line if you want to.

Just a reminder, my main osCommerce folder is called "store" if yours is "catalog" then you need to change that on the line above. Basically edit that line to wherever you have installed Flowplayer in your Root directory and you are pointing it to .../example/flowplayer-3.2.6.min.js

What this has done is add the Flowplayer, player, to your page.

Now...

4.) Go to your Admin panel, where you normally add products.

click on the "catalog" section on the left of the admin panel. Find the category and then the product, you want to add video to. Click on the product once. To the right you will see a button that says "edit"

This will bring you to the page where you add all the information about your product. Name, price etc.

Scroll down to where you see "Products Image" You need to add an image for the product, Which you probably already have.

You also need to add a large image. The video doesn't seem to work unless you do this. Once you have done that...

Where it says "HTML content (for Popup)" add this code:

<a

href="http://name of your website.com/store/videos/name of your video.flv"

style="display:block;width:384px;height:288px;"

id="player">

</a>

flowplayer("player", "http://name of your website.com/store/flowplayer/flowplayer-3.2.7.swf");

</script>

AGAIN, if you copy and paste it, you need to edit it to suit your site.

Also, you will notice that the Width is 384px and the height is 288px. You can change these settings to whatever size you want your video displayed.

Just to re-cap you need to add the player to your site and you then need to tell it which video to play.

You need to add the sript above to each and every product under the "product image - HTML content (for Popup)" section. You would also obviously have to edit the name of the video each time to match the product you are adding the code to. So when you click on the product the right video plays for it.

That is it. When you go back to your store and select the product you added the video for. You will be taken to the product_info page which has an image of the product and the price etc. Double click on the image and the video should start to play.

If there is a line saying the video cannot be played then you have probably not directed the player to your video properly. Just check the code in the HTML content (for Popup) section.

I hope this works for you!!

January 23, 2012

@@Juzzyman,

Version 2.3.1 has by default, the ability to play video on the product information pages. No code changes are required.

Chris

Juzzyman · January 23, 2012

How do you do that, chris?

January 23, 2012

@@Juzzyman,

On the product creation page (categories.php) you will see the area to enter images. That area allows for the insertion of HTML coding. The default example of that coding is:

This would play the video on the product information page (product_info.php) to the customer.

Chris

January 23, 2012

check this contribution http://addons.oscommerce.com/info/6272

January 23, 2012

@,

No Contribution is required for v2.3.1. That contribution was created for RC2a that did not allow for video's.

Chris

Juzzyman · January 24, 2012

Thanks Chris!

How to add video to your site

Recommended Posts

Juzzyman

Guest

Juzzyman

Guest

Guest

Guest

Juzzyman

Archived

Browse

Activity