Embedding Multimedia

Originally published 4/14/09 on Amandarama! LIBR 240 blog:

This week’s assignment for LIBR 240 required me to embed multimedia resources into a website. We looked at resources for audio, video, and still images from Flickr, but for the assignment focused on images and video. Here are my experiences:

  1. Flickr. Since I already have a Flickr account, I decided to start with this. Flickr allows you to share slideshows of your images by embedding the slideshow into your webpage. They create the slideshow and provide the code, all you need to do is copy and paste it into your site. You can even customize your slideshow easily by inputting the dimensions you want, or selecting a preset size, and Flickr lets you preview the results and creates the customized code for you. This was very easy to use. I did need to do some prep work because I hadn’t tagged my photos or wrote descriptions when I originally uploaded them. I also had the permissions set to “all rights reserved” so I changed them to a creative commons license for the set that I was using for the slideshow. I made a slideshow using a set I had created of my photos from an exhibit I co-designed for SJSU Special Collections last year. It can be found on my miniwebsite (site taken down at end of class Spring 09).
    I also made a Flickr badge that I posted here on this blog (note 10/5/09: this was on my LIBR240 blog). You can see that in the sidebar. I decided to have the badge show my pictures tagged with “library”, which right now only includes the exhibit photos from the set described above. These photos seemed most appropriate to this blog since most of my other pictures are of my pet birds. The badge is just as easy to create as the slideshow. You can set preferences to show particular pictures (based on tag or set) or show all your pictures. You can also show selections from everyone’s public photos if you want. The badge creator tool also lets you customize your badge so it fits in with your website’s color scheme and so it’s an appropriate size. Then you just cut and paste the code it creates for you!
  2. Embedded video: Vimeo. The hardest part here was making my video! I had a bunch of footage of my birds on the computer but hadn’t put it together in a video yet. I used final cut pro to put this all together. I’m a little bit disappointed that the deinterlacing I did on the quicktime video didn’t seem to work when it went up on Vimeo. However, embedding this on the website was easy. Take a look at the finished product (originally on miniwebsite – taken off server after class ended Spring 09).
  3. Embedded video: Seesmic. This site seems more designed for creating vlog posts than short movies, because it lets you use your computer’s audio and video to record videos directly to the site. People record their videos and then other people can record their video responses, like a conversation. The previous post on this blog (note 10/5/09 – this appeared on my LIBR240 blog and has since disappeared from Seesmic) is the result of my experiment with video creation on Seesmic. Again, Seesmic makes it simple to grab the code to embed the video on your site.

One thing I noticed on all these sites is the use of the deprecated <embed> element nested within the <object> element to ensure it works with both Internet Explorer and other browsers. Apparently, as discussed by Castro in our class text, IE uses <object>  in a non-standard way that other browsers ignore. Using <embed> is the usual workaround but it means the page won’t validate. Fortunately, there is a way to get around this by nesting <object> elements, but I guess most sites haven’t started using this technique since <embed> is still widely supported. I did experiment with Castro’s way and it does work and does validate, however, for this assignment I’m using the code provided by the three multimedia sites: Flickr, Vimeo, and Seesmic.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s