Upload
galab18
View
169
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Learn how to insert video in Dreamweaver using the plugin option. HTML 5, FLV and SWF is not covered.
Citation preview
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!!!!