Inserting Video in Dreamweaver (Using Plugin)
Download as PPTX, PDF0 likes605 views
The document provides a detailed guide on how to insert and compress videos in Dreamweaver, using a specific example to illustrate width and height ratios based on 16:9 and 4:3 formats. It explains the process of compressing video files using MPEG Streamclip, setting parameters like autoplay and camera controls, and highlights the importance of testing and adjusting video settings for proper display. Additionally, it discusses the relevance of using modern video formats such as MP4 and H.264 for web compatibility, while expressing some frustrations with the Dreamweaver interface and terminology.
Inserting Video in Dreamweaver (Using Plugin)
- 1. inserting Video in Dreamwea ver
- 2. You Want To Put Video In Your Website…
- 3. 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.
- 4. 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.
- 5. 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
- 6. 16:9 Calculation! 16 푊 : 9 퐻 Let W = be my chosen width for my video W = 500px H = x, which I am finding 16 500 : 9 푥 Then to solve this, you cross-multiply! 16 500 : 9 푥 This means that I multiply 500 with 9 and 16 with x giving me an algebraic equation of: 16푥 = 500 × 9 500 × 9 푥 = 16 푥 = 281 Thus, my height for the video is 281 px. 500 X=281
- 7. 4:3 Calculation! 4 푊 : 3 퐻 Let W = be my chosen width for my video W = 500px H = x, which I am finding 4 500 : 3 푥 Then to solve this, you cross-multiply! 4 500 : 3 푥 This means that I multiply 500 with 9 and 16 with x giving me an algebraic equation of: 4푥 = 500 × 3 500 × 3 푥 = 4 푥 = 375 Thus, my height for the video is 375px. 500 X=375
- 8. I know, I know it is pretty hectic. But once you practice, you get the hang of it!
- 9. Gifs don’t know what they are on about, forget them
- 10. 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.
- 11. MPEG Streamclip! Once you have downloaded it, open the program. Then open the file that you wish to compress.
- 12. 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!!!!
- 13. 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.
- 14. 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!!!
- 15. These Gifs Are So Mean To Me Okay, I am so ready to declare war on gifs.
- 16. HA! Bring It On!
- 17. I Am Having WaAAY Too Much Fun With This
- 18. Insert Your Video! Go to Insert > Media > Plugin
- 19. 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”.
- 20. You Should Get Something Like This This weird jigsaw symbol represents ‘Plugin’. Ie. This is where you video will be. This is where you will input your dimensions. Parameters: I will get to this a bit later.
- 21. 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?
- 22. 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…
- 23. 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.
- 24. What Do You Notice? Come on, say it out loud. What do you notice?
- 25. Did you just say that? Did you say what I think you said? Come ON! Scream it out louder!
- 26. 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!
- 27. 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!
- 28. 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.
- 29. 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.
- 30. 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.
- 31. 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.
- 32. Links Compression: • 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)
- 33. Thank You!!!!