In a SolidWorks Composer interactive
technical illustration output.
You can link to an MP4 or web page
such as YouTube.
This is great because you can
then send people to animations or ads
you have created, either
locally or on the web.
However, what is sometimes a shame
is that once you have selected
one of these buttons
to go to these locations,
you are no longer in your SVG
and therefore you don't have the aesthetics
or navigation
you created in your interactive SVGs,
such as the next or previous buttons.
This isn't composer's fault.
The format of SVG doesn't
have native support for adding videos,
and therefore it is beyond the scope
of the software to be able to do this.
Therefore,
I sought a method for editing the code.
I'm definitely not a coder,
but I found a fairly simple method
for achieving my desired result,
so I thought I'd share it.
First,
I put an image down where
I want the video to go.
It is best to keep the aspect
ratio ticked on for this and just ensure
the image is at the same aspect
ratio as your video.
In this case, 16 by 9.
Next, I output this as normal.
Using the Technical Illustration workshop
this will create the SVG
under linked folder
with all the raster images that were used.
I go into this folder, find the image
I imported and copy its name.
I can then go back and edit the SVG code.
I personally use the free program Notepad
Plus Plus to be able to do this.
If I search this code for the image name
I just copied.
It will bring up the code
that then links to the image.
To make this bit clearer, I'm going to
isolate this code on its own line.
So to get
videos embedded directly into the SVG,
we have to wrap them in a foreign object
element.
With the video being a child element,
the child
element can be a video tag
or it can be an iframe.
We're going to use
an iframe in this instance.
So first change image to foreign object
and then delete the link to the image.
We will keep the x, y and the size values.
So we are simply replacing the image
with the foreign object.
Next start the iframe
with the iframe tag
and input the attribute.
xmlns
Next, copy
and paste the height and width values
so the iframe will take up
the entire foreign object.
Next, pointing to the video
you actually want to show.
I will show you the YouTube
version after this.
But first a video that is local
and in the same folder as the SVG.
Simply write SRC equals
a source equals then your video name.
In this case, bed
assembly instructions.mp4.
Although not necessary, I will also ensure
there is no border around the video.
By putting frame border equals zero
and then close the iframe
and foreign object tags.
If I now show the SVG,
the video is playable and pausable.
And what about if you want
a link to the YouTube video?
You can use the same code,
but you need to change the source.
However, you can't just drop the regular
URL of the YouTube link in there.
You must get the special embedded version.
To get this, go to YouTube.
Share, embed and copy the URL instead.
Paste this in.
Save the document
and you should now be linking to YouTube.
Say I want to now
get back to the individual
step slides
to walk through the assembly instructions.
I can do this
really easily by clicking my steps here.