Category Archives: making it work

Bengal Server and .ogv files

So we have run into an additional issue with embedding video into our html5 pages.  The problem is that a .ogv file is not recognized as a video file by our school’s servers and if you load your page in firefox from the web (NOT locally, because it works fine locally), firefox will still not play your video and give a mime error.

If you are using bengal space, we have to tell the server that .ogv is a video filetype.  To do this we have to interact with the server by creating a disappearing file.  Disappearing, you might ask?  Yes.  Why?  Well, because servers are rather mysterious things.

So, here we go, (and please follow this exactly step-by-step):
1.  Connect to Bengal.
2.  Open TextWrangler and create a new file.
3.  Copy this code into TextWrangler:

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/webm .webm
AddType audio/webm .weba

AddType video/mp4 .mp4
AddType video/x-m4v .m4v

4.  Go File -> Save As and navigate the directory to the folder in your bengal space that has your html page for your video.

5.  Name the file .htaccess and click save.

6.  A warning that says “Names that begin with a dot “.” are reserved for the system.” will pop up.  Click on the Use “.” button.

7.  Reload your webpage (not locally) in firefox and your page should play fine now.

Video tag in HTML5

Alright, so we’ve made it through working with audio in html5 and have moved onto video.  Though we went over this in lab today, I figured it would be useful to have the code out there on our blog.

So video in html5 is handled much like audio.  In order to make as many browsers happy as possible, we need to create both a .mp4 and a .ogv copy of our video.  You can get a .mp4 straight out of Final Cut, just remember to watch file size.  For the .ogv file we use firefogg – one of the few free ways to get the .ogv we need.  Firefogg is a plugin for firefox and can be found at: http://www.firefogg.org/

Why is all of this necessary you may ask.  Basically, firefox (mozilla) uses the .ogg/.ogv because the codecs involved are open source and therefore has no copyrights, whereas Safari, IE 9+, Chrome, and Opera have opted for more widely used/accessible codecs which are copyrighted and therefore may not always be free to use.

Once you have both files (remember to watch file size), its time to create your video webpage.  Step 1: make sure your page is html5, this will not work if its not. Step 2: use the <video> tag and if you want the browser to include controls, use the controls attribute.  Step 3: point to your video with the source command and use the type attribute – it tells the browser which file to access.  It should look like this:

<video controls width=”videowidth” height=”videoheight”>

<source src=”videoname.ogv” type=”video/ogg” />
<source src=”videoname.mp4″ type=”video/mp4″ />

</video>

html5 Audio embedding

Ok. So, here is the long awaited audio embedding post. Because html5 is still in the development/implementation stage there are a few things that are still not standardized thoroughly. Audio is one of these. As is video, but that comes in the next few weeks. What does this mean? Basically we have to jump through some hoops to make all (or, as many as possible) browsers happy.

Things that make things unhappy:
1. Embedding a .wav file – this makes your user unhappy because they have to wait for your 40mb audio file to buffer. Don’t do this. Just don’t do it.Record in wav – great, edit in wave cool, just don’t use the wav in your site.
2. Embedding only an .mp3 – this makes Firefox browsers unhappy because it won’t work correctly all the time.
3. Embedding only an .ogg – this makes chrome and safari unhappy because it won’t work correctly all the time.

So the hoop we must jump through to keep as many happy as possible is to export both an .mp3 and an .ogg of the audio story and embed both. Whichever browser in use will automatically select the one that it likes and all will be great rejoicing.

Here’s how we do that in html5 (and you must make it an html5 page for this work this way):

<!DOCTYPE HTML>     <!-- declaring this an html5 page (see previous post) -->
<html>

<head>
<meta charset=”utf-8″>
<title>Page title here!</title>
</head>

<body>
<audio controls>    <!-- html5 command, controls places the player and then you reference the audio files through <source src=”(file location)” -->
<!-- Firefox will not play mp3  -->
<source src=”(file location)” type=”audio/mp3″ />
<!-- Safari and Chrome will not play .ogg -->
<source src=”(file location)” type=”audio/ogg” />
<!-- By having both file types embedded here you cover all browsers, just like video -->
</audio>

</body>
</html>

HTML Document types and such

Hey all,
There have been a few repeated issues and confusion over the document types that you want to be using for your webpages. Remember, if you are using Dreamweaver, when you create a new page you have have to select HTML5 from the list.
If you don’t, Dreamweaver defaults to XHTML 1.0 Transitional.  What does this mean?  It means you will not be able to use all of the super-cool new html5 tags (like <nav> and <audio> and <video>) and your pages will throw fits with browsers where some may work but most will probably not.
So, this is what you want the top of every page to look like for HTML5:

<!DOCTYPE HTML>  <!--This is declaring an HTML5 page -->
<html>
<head>
<meta charset=”UTF-8″>    <!--Character encoding declaration-->
<link href=” (where ever your css page is located) ” rel=”stylesheet” type=”text/css”>

<title>Title goes here</title>
</head>

<!-- NOTHING goes here, in between the close of the head and the opening of the body -->

<body>

<!-- page content here -->

</body>
</html>

And what is the difference you may ask.  Here’s what the page looks link in XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head>
<!--Character encoding declaration-->
<meta http-equiv=”content-type” content=”text/html;charset=utf-8″ />
<link href=” (where ever your css page is located) ” rel=”stylesheet” type=”text/css”>

<title>Title goes here!</title>

</head>

<!-- NOTHING goes here, in between the close of the head and the opening of the body -->

<body>

<!-- page content here -->

</body>
</html>

So there you go.  If you don’t see <!DOCTYPE HTML> at the top of your page you are not working in HTML5.

Perfectly proper

After going through the first assignment, I wanted to give you a few pointers:

Example of a perfect img src:

<img src=”_MG_5013_web.jpg”  width=”800″ height=”533″ alt=”The streets of San Cristobal.”/>

Order inside doesn’t matter but remember to open and close everything and everything in the img src needs “…”

Secondly, coding structure:

<head>

*Think of the head has formatting and preparing your webpage but NOT what goes near the top of your actual page*

<title>Title goes here and is what appears at the top of the browser window</title>

</head>

*Nothing should be between the head and body, this is no-man’s land and things here are just floating*

<body>

*THIS is where your actual page begins.  This is what actually appears within the browser window.  Everything at the top goes first in the body, everything at the bottom goes last*

</body>

Making your own controls for flv playback

The skins that come with the FLVPlayback Component are workable, but sometimes you want something a little more attractive. If you’re wanting to make your video and your soundslides component look consistent, you can use some simple ActionScript (2) to control your video.

1) Put the FLVPlayback component on the stage. Give the file path as you usually would, but tell the component that you don’t want any skins.

2) Give the component an instance name (in this example, we’re using the name: myVideo). You can name it whatever you want, as long as you use the same name (case sensitive) and you don’t repeat names within the project.

3) Just make a play and stop button like you usually would (or use the play and stop buttons from your soundslides) and then put this code on them:

For the play button:

on (release) {
_root.myVideo.play();
}

And for the stop button:

on (release) {
_root.myVideo.stop();
}

4) Go ahead and try it out!

HOW IT WORKS    When the user clicks on the button, the player/browser is told to look for the instance name of the component in the root folder in your library (_root). Then the play or stop action is associated with only the objects with that instance name.

Have fun!

Doctype declaration

Every html page should start with a doctype declaration. It’s what explains to the browser which version of html you’re typing in. Your page won’t validate if you don’t have this.

We’re teaching you to use xhtml transitional. This is a more flexible version of the updated html language. You can also code in strict, but, as the name implies, it’s much less forgiving. Copy and paste this into the top of your document before the html tag:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

Dreamweaver will insert this for you when you open a new html document–just make sure that you have html transitional selected.

 

 

Doctype is only one of the elements that the validator requires you to have in an html document. It’s all already there when you create a new document in Dreamweaver. Otherwise, here’s what you’ll need:

You’ll need to add the xmlns attribute to the html tag. This is basically an absolute link that informs the browser which xml namespace is associated with your document. It’s an xhtml thing:

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

 

The meta tag isn’t required, but it helps the browser determine what kind of character encoding to use. This tag goes in the head section along with your title:

<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=ISO-8859-1″ />
</head>

Let’s talk Bengal Space

When connecting to the server, the address is “smb://bengal.missouri.edu”. In the dialogue box, make sure that you type in “tigers\pawprint”. After you sign in, you’ll be able to see the your bengal space in the finder window. You can use this space for storage, but anything you want to post online needs to be put in the “www” folder. At this stage, it’s just like moving documents between any other folders or drives on your computer–just drag and drop. If you used relative links everything should work fine.

When you’re turning in the index.html page, make sure that you’re posting a web url to blackboard, not a local file path. What’s the difference you ask?

A local url starts with “file:///…..”

Your bengal space url should be something akin to “http://web.missouri.edu/~yourpawprint/index.html&#8221;

Good luck and DON’T FORGET TO VALIDATE!

-Meg