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>
Advertisements

This blog is for exploring new models of journalism using technology and community participation.

Posted in Uncategorized

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

%d bloggers like this: