HTML5 Video Solutions for YouTube

YouTube does not embed in HTML5 video the way regular video files do. This is annoying because HTML5 gives greater control over video playback. below are some solutions

Embedding Controls Within an iFrame
https://developers.google.com/youtube/player_parameters

YouTube has a method for embedding videos within HTML or other environments, using a combination of an <iframe> tag and properties can be set by including them in the URL. Example

Basic iFrame tag (the karats have been removed):

iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/sNAw6Cy7FkA&#8221; frameborder=”0″ allowfullscreen
/iframe

You can adjust the width and the height by changing the numbers. Here’s an iFrame tag that tells the video to autoplay, loop and remove the controls:

iframe width=”1280″ height=”720″ src=”https://www.youtube.com/embed/sNAw6Cy7FkA?autoplay=1&controls=0&loop=1&#8243; frameborder=”0″ allowfullscreen
/iframe

Here autoplay=1 controls = 0 and loop=1 appear in the text of the URL, following a ? (question mark). You will often see question marks in URLs – they pass values to a function on the source page. For example,  if you shop for new sneakers on Amazon, you might go to Amazon, select SHOES and then select ATHLETIC SHOES. You will often see a question mark in the URL of the search page, with your search criteria following. For example:

http://www.amazon.com/s/ref=nb_sb_ss_c_0_8?url=search-alias%3Dfashion&field-keywords=sneakers&sprefix=sneakers%2Caps%2C189

MediaElements.js
http://mediaelementjs.com/examples/?name=youtube
http://johndyer.name/html5-video-wrapper-for-youtube-and-vimeo-api-mediaelement-js/

MediaElements is a Javascript library (much like JQuery). You must install a link to the library, a script and a .css to make it work.

1. Download the source files at http://johndyer.name/html5-video-wrapper-for-youtube-and-vimeo-api-mediaelement-js/
2
. If you have not already, link to the JQuery Library in your tag. You can use this:

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”></script&gt;

3. Link to the mediaelement-and-player.min.js script file. (It’s in the download.) Make sure this script appears AFTER the link to the JQuery Library.

4. Add a link to the mediaelementplayer.css file to yourtag (It’s in the download):

 < link rel ="stylesheet" href = "mediaelementplayer.css" />

Style normally, using the “player1” ID:

<video width="640" height="360" id="player1" preload="none">
    <source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
video>
Posted in Uncategorized

Adding Carousel Slider and FancyBox

Carousel  Slider

  • Grab the HTML, CSS and JavaScript code from here:
    http://paulmason.name/item/simple-jquery-carousel-slider-tutorial

    • Copy and paste the HTML into your HTML
    • Copy and paste the CSS into your CSS
    • Copy the JavaScript, create a NEW Javascript file in Dreamweaver. Paste the Javascript code into the new Javascript file. Save the file in the SAME FOLDER as your HTML and CSS with extension .js. In my example, I name the file slider.js.
  • In the HTML, replace <img src=“/image-1.jpg” /> with your own image. Please note that all images in the Carousel Slider should be the same size. 
  • Inside the <head> tag, add a link to the main Javascript Library at Google:
    <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”&gt;
    </script>
  • Inside the <head> tag, add a link to the Javascript file you created from the Carousel Slider Web site:
    <script src=”slider.js”></script>
  • In the CSS, change the image height and width inside the .slider li style tag.
  • If you want to change the pace of the transition or the time the images stay on the page, you can change this in the slider.js file.

FancyBox

  • Download the FancyBox source code from here:
    http://fancyapps.com/fancybox/#license
  • Go to the FancyBox folder, go to the Source folder, open the following files, and save them to your project folder:
    • jquery.fancybox.css
    • jquery.fancybox.js
  • Add the CSS and the .js files inside your <head></head> tags:
    <script src="jquery.fancybox.js?v=2.1.5"></script>
    	<link rel="stylesheet" type="text/css" href="jquery.fancybox.css?v=2.1.5" media="screen" />
  • Add the following mini-script inside the <head></head> tags:
    <script type="text/javascript">
    $(document).ready(function() {
    $(".fancybox").fancybox();
    });
    </script>
    
  • Add the following to the HTML. Note that you need TWO images for each image: The thumbnail (smaller size) image that displays on the page, and the full-size image that displays in the fancy box.
     <div id = "gallery">
    <p>Gallery</p>
    <a class="fancybox" href="images/yourimage1.jpg" data-fancybox-group="gallery" title="Put your captain here."><img src="images/thumbnail1.jpg" alt="" /></a>
    <a class="fancybox" href="images/yourimage2.jpg" data-fancybox-group="gallery" title="Put your captain here."><img src="images/thumbnail2.jpg" alt="" /></a>
    <a class="fancybox" href="images/yourimage3.jpg" data-fancybox-group="gallery" title="Put your captain here."><img src="images/thumbnail3.jpg" alt="" /></a>
    <a class="fancybox" href="images/yourimage4.jpg" data-fancybox-group="gallery" title="Put your captain here."><img src="images/thumbnail4.jpg" alt="" /></a>
    </div>
    
  • Style the #gallery div to fit your page.
  • Please note, if you don’t already have a link to the main Javascript Library at Google you will need to add it:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
Posted in Uncategorized

Multimedia Package Examples

Snow Fall (won a Pulitzer Prize) – The New York Times
http://www.nytimes.com/projects/2012/snow-fall/

Firestorm – The Guardian
http://www.theguardian.com/world/interactive/2013/may/26/firestorm-bushfire-dunalley-holmes-family

Trials – The Wall Street Journal
http://projects.wsj.com/trials/

Unfit for Work – NPR
http://apps.npr.org/unfit-for-work/

Watchdogs: Invasion – Polygon
http://www.polygon.com/features/2013/10/16/4817988/watch-dogs-invasion

A Game of Shark and Minnow – The New York Times
http://www.nytimes.com/newsgraphics/2013/10/27/south-china-sea/

Six:01 – The Last Hours of Dr. Martin Luther King – Memphis Commercial Appeal
http://media.commercialappeal.com/mlk/

His Saving Grace – Chicago Tribune
http://graphics.chicagotribune.com/grace/

The Prophets of Oak Ridge – The Washington Post
http://www.washingtonpost.com/sf/wp-style/2013/09/13/the-prophets-of-oak-ridge/

Out in the Great Alone – ESPN Grantland
http://sports.espn.go.com/espn/grantland/story/_/id/9175394/out-great-alone

America’s First Climate Refugees – The Guardian
http://www.theguardian.com/environment/interactive/2013/may/13/newtok-alaska-climate-change-refugees

Your Meat Addiction is Killing the Planet, But We Can Fix It – Verge
http://www.theverge.com/2013/8/13/4605528/your-meat-addiction-is-destroying-the-planet-but-we-can-fix-it

A Race to Save the Orange by Altering Its DNA – The New York Times
http://www.nytimes.com/2013/07/28/science/a-race-to-save-the-orange-by-altering-its-dna.html

Tomato Can Blues – The New York Times
http://www.nytimes.com/projects/2013/tomato-can-blues/

NSA Files: Decoded – The Guardian
http://www.theguardian.com/world/interactive/2013/nov/01/snowden-nsa-files-surveillance-revelations-decoded

The Dream Boat – The New York Times
http://www.nytimes.com/2013/11/17/magazine/the-impossible-refugee-boat-lift-to-christmas-island.html

Fame in a Flash – The Ft. Lauderdale Sun-Sentinel
http://interactive.sun-sentinel.com/bostoncarlos/index.html

Posted in Uncategorized

Fun with Javascript

.JS BUILDING BLOCKS

  • Objects – documents, html tags, images, strings, functions, console – everything!
  • An object is just a special kind of data, with properties and methods.
  • Properties – values associated with an object – color, length, substring
  • Methods – (functions) – VERBS – write, confirm, alert, prompt, log
  • Events – tell Javascript when to execute the code – onclick, onlaod, onmouseover

DOT SYNTAX

  • Javascript is written in dot syntax (sometimes called dot notation).
  • A dot separates the objects, properties and methods within a statement. Here console is the object and log is a method; document is the object and write is the method; document is the object, getElementById is a method and innerHTML is a property:
    • console.log(“Javascript is not so hard!”);
    • document.write(“Boo! You are NOT the only sentence!”);
    • document.getElementById(“demo”).innerHTML = “Hello Dolly”;
  • You can use the Javascript Console in Chrome to test out javascript statements! Go to VIEW-DEVELOPER-JAVASCRIPT CONSOLE

MORE JAVASCRIPT RESOURCES

W3Schools is an excellent introductory Javascript resource, with lots of examples and a complete reference
http://www.w3schools.com/js/js_intro.asp

A series of pretty good beginner’s exercises:
http://htmldog.com/guides/javascript/beginner/

Posted in Uncategorized

Rock-Paper-Scissors

The New York Times
http://www.nytimes.com/interactive/science/rock-paper-scissors.html

Addicting Games
http://www.addictinggames.com/funny-games/rockpaperscissors.jsp

Play RPS
http://www.playrps.com/

Posted in Uncategorized

Using FancyBox

FancyBox

  • Download the FancyBox source code from here:
    http://fancyapps.com/fancybox/#license
  • Go to the FancyBox folder, go to the Source folder, open the following files, and save them to your project folder:
    • jquery.fancybox.css
    • jquery.fancybox.js
  • Add the CSS and the .js files inside your <head></head> tags:
    • <script src=”jquery.fancybox.js?v=2.1.5″></script>
    • <link rel=”stylesheet” type=”text/css” href=”jquery.fancybox.css?v=2.1.5″ media=”screen” />
  • Add the following mini-script inside the <head></head> tags:
    • <script type=”text/javascript”>
      $(document).ready(function() {
      $(“.fancybox”).fancybox();
      });
      </script>
  • Add the following to the HTML. Note that you need TWO images for each image: The thumbnail (smaller size) image that displays on the page, and the full-size image that displays in the fancy box.
    • <div id = “gallery”>
      <p>Gallery</p>
      <a class=”fancybox” href=”images/yourimage1.jpg” data-fancybox-group=”gallery” title=”Put your captain here.”><img src=”images/thumbnail1.jpg” alt=”” /></a>
      <a class=”fancybox” href=”images/yourimage2.jpg” data-fancybox-group=”gallery” title=”Put your captain here.”><img src=”images/thumbnail2.jpg” alt=”” /></a>
      <a class=”fancybox” href=”images/yourimage3.jpg” data-fancybox-group=”gallery” title=”Put your captain here.”><img src=”images/thumbnail3.jpg” alt=”” /></a>
      <a class=”fancybox” href=”images/yourimage4.jpg” data-fancybox-group=”gallery” title=”Put your captain here.”><img src=”images/thumbnail4.jpg” alt=”” /></a>
      </div>
  • Style the #gallery div to fit your page.
  • Please note, if you don’t already have a link to the main Javascript Library at Google you will need to add it:
    <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”&gt;
    </script>
Posted in Uncategorized

Cool Easy CSS Animation Instruction Site

http://www.justinaguilar.com/animations/index.html#

Posted in Uncategorized