Inserting Video in Dreamweaver (Using Plugin)

inserting Video in Dreamweaver

You Want To Put Video In Your Website…

Start off with your dreamweaver html!

I don’t know your set-out but I will just use my page as an example.

This is the set out of my

‘video editing’ page.

This is where I will put my video.

This is where I will put the design brief of this task.

You need to start out with the size of your video. How big do you want yours to be?

I wanted my video to be 500 pixels wide so that it

would fit evenly on the border that I

made.

So you need to figure out how wide you want your video

to be.

Then you will need to use ratios to

figure out how long the video should

be.

500 px

Ratios are one of my most favourite things in the world. It is literally the only thing in Maths that I have learnt that I know I can use for the future.

USE Ratios To Figure Out The Height OF Video!

My original video had a ratio of 16:9. But I am

pretty sure that Mr. Andrews told you to use DV PAL or some other format when

exporting your car advertisements, for Sarah it

had a ratio of 4:3. So I will just show you how to do both calculations just in

case

16:9 Calculation!Let W = be my chosen width for my video W = 500px H = x, which I am finding

Then to solve this, you cross-multiply!

This means that I multiply 500 with 9 and 16 with x giving me an algebraic equation of:

Thus, my height for the video is 281 px.

500

X=281

4:3 Calculation!Let W = be my chosen width for my video W = 500px H = x, which I am finding

Then to solve this, you cross-multiply!

This means that I multiply 500 with 9 and 16 with x giving me an algebraic equation of:

Thus, my height for the video is 375px.

500

X=375

I know, I know it is pretty hectic. But once you practice, you get the hang of it!

Gifs don’t know what they are on about,

forget them

Compress Your Video!You need to compress your video to a file

format that is suitable for the web.

It is best for you to figure this out for yourself for your

competency.

I used MPEG Streamclip to

compress my video file because it lets you compress it by dimensions… if you know what I mean.

You can download MPEG Streamclip for free on both Mac or Windows.

MPEG Streamclip!

Once you have downloaded it,

open the program.

Then open the file that you

wish to compress.

Now you export the file, this

is how you compress it. In a way, it is sort of like Photoshop how you use it to change the file

format for images and

change the image size, etc.

I will not give away what you

export it as!!!!! Haha!!!! You are supposed to know this!!!!

You need to compress your video file by frame size. So

click on “Other” and type in the dimensions

that you have found out. My video is in 16:9 ratio so that is why my dimensions are 500 x 281 px. I’m sorry, I am not trying to be mean. But if you

don’t see this anywhere then obviously you are exporting it as the wrong file format. The

internet has a lot of wonders.

Export the File!Export your file by typing in the dimensions

needed then click on the highlighted button at the bottom right hand corner of the pop-up.

Hehe, I am so vague!!!

These Gifs Are So Mean To Me

Okay, I am so ready to declare war on gifs.

HA! Bring It On!

I Am Having WaAAY Too Much Fun With This

Insert Your Video!Go to Insert > Media > Plugin

The next thing that will

happen is that it will open a new “finder” window (I don’t know

what the term is for it). Select your compressed video and click “ok”.

You Should Get Something Like This

This weird jigsaw symbol represents ‘Plugin’. Ie. This is where you video

will be.

Parameters: I will get to this a bit later.

This is where you will input your dimensions.

You Should Get Something Like This

Notice that when you change the dimensions

the gray square expands?

Notice that I put in my dimensions like this?

Parameters!Okay so I have been pronouncing this word weirdly in class,

until I picked up on Mr. Andrews saying it differently. I was

like “Oh Shit”.

Anyway, I told you that I would get to this! Parameters are like rules… and that is all I know.

So… We need to set parameters for things such as having a

controller (letting the audience play and pause your video) and

disabling the autoplay.

We want to type in ‘autoplay’ and say FALSE. False basically means ‘no’ for computers, it is like… a basic coding term. Then type in ‘controller’ and say

TRUE. I bet you probably assumed that true means ‘yes’. Good job,

you have common sense!

Click on ‘Parameters…’ in the properties window, which should below your ‘viewer window’ (?). But I have

noticed that you like to hide that window…

PREVIEW!!!!!So uhm… save and preview your work. I know that we are not coding or anything but when you do

coding, it is good to save and preview so you know what you are actually doing. I have been told that CSS is a bitch sometimes.

It helps to do this so you don’t make any mistakes. I remember reading that a programmer makes 1 mistake per 1000 codes written (might be wrong but it is something along the lines of that). This

causes bugs in programs. Bugs are like… you know how IOS (Apple – iPhone, iPad stupid Mini, iPad, etc.) apps that always quit on start-up? Yep… that is a bug (majority of the time). In fact you should also notice that when you update your applications on your phone, that the main update is “Bugs and Fixes” or something along the lines. The programmers who make these applications and so on are constantly looking over and over their work. You see, I am actually interested in this area but my mum is not so supportive over the living standards. Like, that is long hours sitting in front of a computer! And I am not so sure about living in the city. Just… it might be too much

for me.

Anyway, I am pretty sure that human error is a major worry when it comes to coding, accounting and so on. You could be the best programmer in the world and you would still mess up somehow.

What Do You Notice?Come on, say it out loud. What do you notice?

Did you just say that? Did you say what I think you said? Come ON! Scream it out louder!

You are incredibly right!Yes! The controller is cut off! My goodness, I wonder why?

It is a good thing that we checked our work!

Dreamweaver is strange...It is a bit strange why Dreamweaver works like this… well, it is not

Dreamweaver individually, I am meant to say web design and all that stuff in general. I am not so good with

terminology.

I have never understood why the plugin option acts like this, where you basically have to manually put

the video in instead of it adjusting the frame size – think of YouTube for example and how you upload a video. The viewer for the video is the same size for every YouTube

video out there, despite the frame size.

It actually annoyed the hell out of me at the start because I had no idea what was going on. Then it

clicked!

Anyway...Okay so you just have to adjust the height of the plugin/video/etc. So just extend the height to any

random number that is bigger than 281 or whatever height your video is in. They say

that the controller is about 10px or so. So just add on

about 10px to your calculated height.

PREVIEW!!!!!Save and preview your work again!

YAYYAYAYAY! It works! I would also make sure that your video can play as well, so click on play and watch it through.

Questions?Okay so I bet you are wondering why we are not using HTML 5 Video (for the updated version of Dreamweaver). I didn’t use it because to be frank, I didn’t know how to. It does look better and all but meh. I was a bit too busy to look up a tutorial on it. I tried it but a pop-up would come up and ask me about a server, and I really didn’t know what I

was doing so I left it.

Questions?You are probably also wondering why we didn’t use FLV (Flash) or SWF (Shockwave). I am not a pure brain whizz at compression and all, but I have learnt through tutorials and research that these are a bit outdated and hardly anyone uses them. “There are much

more people using Mp4s and H.264s” www.youtube.com/watch?v=8DUOHtO_CXk (2:00).

It is good to keep it wired in your brain that the whole idea of video compression for websites is so that the video can be played on a majority of the browsers out there… like for example, no one really uses flash because Apple doesn’t support it. I know right? Why base everything on Apple? But everyone USES Apple Products, a

majority of people have iPhones, etc.

LinksCompression:• http://

www.ozzu.com/multimedia-forum/what-the-best-video-format-used-website-t89079.html

Insert Video in Dreamweaver Tutorial:• www.youtube.com/watch?v=8DUOHtO_CXk (start at 1:45)

Thank You!!!!