MP4 File

[artfulweb]

Hi all,
Is it possible to use MP4 video files in the product image section or imbed in the description to illustrate a product? I have not found a way to upload them. Any ideas?

[ecartz]

1. Upload with FTP. Find out what the HTML should be and paste it into the product description.
2. Upload to YouTube and get YouTube to tell you the HTML to paste into the product description.
3. Pay one of the certified developers to automate one or the other of those solutions.

There is no reason why Phoenix can't upload MP4 files. But the upload class can upload any extension. We deliberately tell it to only allow image format extensions to avoid certain issues with some uploads (e.g. store logo). So this is something that a certified developer could make.

The advantage of using YouTube is that then they handle the bandwidth, etc.

If you do it on your own, the HTML would look something like

Code: Select all

<video width="320" height="240" controls>
<source src="videos/movie_name.mp4" type="video/mp4">
</video>

That would embed a video movie_name.mp4 located under a videos directory in your catalog directory. Change name, width, and height as necessary.

[artfulweb]

Thank you so much§ I vaguely remember having a way to do it in oscommerce but just could not make it work. Did not know about the Youtube solution. Thanks again.

[ecartz]

There's probably a hack to do it, but it would involve overriding the Image class. Something like

Code: Select all

if (pathinfo($this->parameters['src'], PATHINFO_EXTENSION) === 'mp4') {
  return <<<"EOHTML"
<video width="{$this->parameters['width']}" height="{$this->parameters['height']}" controls>
  <source src="{$this->parameters['src']}" type="video/mp4">
</video>
EOHTML;
}

around line 169 of image.php

[heatherbell]

Did not know about the Youtube solution.

We think Youtube is easiest if you upload the video there - click Share and choose Embed option.
Copy the code into the product description.
The video is not responsive but you can make it so.
Here is standard embed code for a placeholder video:

Code: Select all

<iframe width="560" height="315" src="https://www.youtube.com/embed/ScMzIvxBSi4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Change

Code: Select all

width="560" height="315"

to

Code: Select all

class="video"

and to your user.css add:

Code: Select all

.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Now displays well on all devices.
Of course, you could go further and then wrap the iframe with a div of any size to suit yourself.
You can even embed a 'playlist' of videos and there are other options for the embed code - see https://support.google.com/youtube/answer/171780
Alternatively, you could make a Child Module for Videos if you use the Product Tabs System - app.php/addons/supporters_code/s02e11_tab_system/

[artfulweb]

Thanks Hetherbell,
But if you do not have the right to upload to YouTube (videos belong to a supplier) how to embed it directly to the product description?

[heatherbell]

how to embed it directly to the product description?

I think ecartz has already answered that in previous posts.