Week 6 – HTML5 Media tags and JavaScript object creation

Standard

In my group meeting this week I focused on teaching my team about HTML5 media tags, and I focused on video and auto tags to start off. I touched briefly on camera as well, but needed to do more research about how to integrate it more fully.

Below are my notes with a few interesting tidbits:

Video

Example code:

<video width=”400″ controls>

 <source src=”/test-run.mp4″ type=”video/mp4″>

 Your browser does not support HTML5 video.

</video>

<p><a href=”https://youtu.be/gv2w5A5rno8&#8243; target=”_blank”>Test Run on Youtube</a></p>

  • You can and probably should add height/width
  • Controls gives you the bar, but can be other things (ex: autoplay)
  • There can be multiple sources listed, and it will play the first valid option
  • If the browser doesn’t support video tags, then it will just show the text

Audio

File Format Media Type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

Resources

http://www.w3schools.com/html/html5_video.asp

http://www.w3schools.com/html/html5_audio.asp


I also decided to do a review on JavaScript objects and to start to wrap my head around JSON. It ended up being much more straight forward than I initially expected.

Java Script Object Creation, Properties, Methods, Instantiation

How to make objects, assign properties and methods

JavaScript objects are containers for named values (called properties) and methods!

Making a JavaScript Variable

An example would be: var book = “Atlas”; The example below is also using javascript to define the variable and then access it, printing it here:

Atlas

Making a JavaScript Object

Javascript objects can have multiple properties, for example: var book = {type:”Atlas”, genre:”resource”, section:”D8″}

The example below is using these definitions and accessing book.genre and printing it out here:

resource

Make an Object literal

An object literal is a comma-separated list of name-value pairs wrapped in curly braces. They are used to make things tidy and avoid using globals.

An example would be var book = {type:”Atlas”, genre:”resource”, section:”D8″};

Accesscing JavaScript Objects

Note that there are 2 different ways, using property.propertyvalue or property[“propertyvalue”].

Ex: book.genre or book[“genre”]

Actions, or Methods, can be done on objects

These are stored inside of properties as function definitions.

Take for example, D8-C is actually a function that is combining two properties together. The function is then going to return them as one.

var book = {type:”Atlas”, genre:”resource”, section:”D8″, row:”C”, location:function() {return this.section + “-” + this.row;}};

The JavaScript is working below:

An Atlas is a part of the resource collection, found in D8-C.

It is important to note that the function needs to include () otherwise it won’t work. Ex: location.function()

JavaScript Instantiation

There are 4 types of instantiation:

  1. Functional Instantiation
  2. Functional-shared instantiation
  3. Prototypal instantiation
  4. Pseudoclassical instantiation

More about these coming soon…

Advertisements

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s