Add HTML5 Video support to Drupal 7

22 Jun
2012

There’s not much out there in terms of how to install video support for HTML5 video (mp4, ogv, webm, etc.) when using Drupal 7; so here’s my tutorial.

  1. Install/enable the Video.js module
  2. Add a field to content type
  3. Modify field settings
  4. Manage the content display
  5. Upload files
  6. Done!

Step 1 – Install/enable the Video.js module

Go to http://www.drupal.org/project/videojs to download the Video.js module. Install it, and then go to to Modules and enable it.

Step 2 – Add a field to content type

Create a new field in your new (or already existing) content type called “video”. Give it a data type of “file” and a form element type of “file” (this threw me off for a while).

Step 3 – Modify field settings

The next step involves setting the settings of our new field. First, make sure you allow the following file extensions: mp4, ogv, flv, webm

Next, scroll down and set the number of values to unlimited (so we can upload each video format for different browsers)

Step 4 – Manage the content display

Next, while still editing your content type, click Manage Display. Set the format of the Video field to Video.js : HTML5 Video Player and the label to “<Hidden>” (my preference).

Step 5 – Upload Files

The bulk of your work is done! Now, create a new piece of content that of that content type and upload 1 or more video formats (webm, ogv, mp4, flv). The module will pick whichever one is best fit for the browser

Step 6 – Done!

Enjoy your HTML5 video files in your Drupal 7 site!

1 Comment

Fix Modal Dialog Size in SharePoint 2010

18 Apr
2012

I’ve been using Kyle Schaeffer’s V5 Master Page as a pretty good starter template for a lot of my stuff recently. But I kept running across an issue. My modal dialog boxes weren’t being sized correctly. So upon further investigation, I realized it was just a bit of CSS that was being applied to dialogs where it shouldn’t be. I’m not sure if it was my fault, or something in the original file. So at the end of my CSS file I put the following code and everything works great!


/* fix the modal to resize correctly

********************************************************** */

.ms-dialog body #s4-workspace {padding:0px;overflow:auto !important;}

.ms-dialog body #s4-ribbonrow {position:relative;}

.ms-dialog #isb-wrapper {margin:0px;}
1 Comment

Bittersweet: a free SharePoint Master Page for blogs

5 Mar
2012

Bittersweet Master Page (SP2010)

I’ve been inspired lately to create a Master Page for a SharePoint blog. It’s based on Kyle Schaeffer’s V5 Master Page, and I’m giving it away free in return for feedback and critique. I’d love to develop this further and take it to team sites, my sites, and publishing pages, but before I go through the whole process I’d like to gauge interest.

Features:

  • CSS3 rounded corners
  • fonts: “Shadows Into Light Two” and “Open Sans” (courtesy Google Webfonts)
  • an HTML5 shiv for older browsers
  • Fixed width, centered design

So download, enjoy, and tell me what you think!

Download: Bittersweet Master Page (SharePoint 2010) (11.7KB, ZIP)

Ben

1 Comment

Sharepoint 2010 + SPServices + jQuery Mobile

21 Feb
2012

Here we will setup a SharePoint 2010 page that utilizes both jQuery Mobile as well as the jQuery SPServices library. Note: This post was updated Feb 21 to reflect an issue I’ve documented here with IE8.

Create a new page

Create a new blank .aspx page in the “Site Pages” library (using SharePoint Designer 2010). I like to use a new .aspx page like this because I can create a document from scratch, I don’t have to deal with page layouts, master pages, etc. The same principals can be applied elsewhere, but this gives me a clean page to start from (which is way easier to debug).

Setup your html

Note: I’ve created my document using html5 standards (as does jQuery Mobile).

<!DOCTYPE html>
<html>
<head>
<meta name="WebPartPageExpansion" content="full" />
<title>SharePoint, SPServices, and jQuery Mobile!</title>
	<link rel="apple-touch-icon" href="/Style Library/Images/apple-touch-icon.png"/>
	<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="/Style Library/scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" />
	<script src="/Style Library/scripts/jquery-1.6.4.min.js"></script>
	<script src="/Style Library/scripts/jquery.SPServices-0.7.0.min.js"></script>
<script type="text/javascript">
 //we'll put the SPServices functions here
 //note the placement of this script tag BEFORE the jQuery Mobile javascript link
</script>
	<script src="/Style Library/scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js"></script>

<!--[if lt IE 9]>
<script src="/Style Library/scripts/html5.js"></script>
<![endif]-->

</head>
<body>
<!--- we'll put the jQuery Mobile and HTML here --->
</body>
</html>

Create jQuery Mobile layout

Now let’s setup our html within the body tag. We’ll use the standard setup you can find in the jQuery Mobile documentation.

<section id="page1" data-role="page">
 <header data-role="header" data-position="fixed">
  <h1>First Page</h1>
 </header>
  <div data-role="content">
   Here's your first name: <span class="first-name" style="font-weight:bold;"></span><br/>
   <a href="#page2">Click here</a> to see your last name
  </div>
</section>

Here’s our first pagelet. It has an ID of “page1″, and a title of “First page”. If you have everything setup right so far, you should see an image like this:

Now let’s setup page 2. You’ll notice above that we’ve used a link tag with a href=”#page2″. jQuery Mobile takes this and navigates us to “page” 2, even though it is simply another section on the same aspx page. Here’s what you’ll have, and the image follows:

<section id="page2" data-role="page">
 <header data-role="header" data-position="fixed">
  <h1>Second Page</h1>
 </header>
  <div data-role="content">
   Here's your last name: <span class="last-name" style="font-weight:bold;"></span><br/>
   <a href="#page1">Go back</a> to see your first name
  </div>
</section>

Create functions

Now that we’ve created our pages, it’s time to create the functions. We’re going to create two functions. One will call the first name of the user, and one will call the last name. Once it gets the first/last name, it appends the value of that variable to the empty ‘span’ tags we created in the step above. This is a basic example, but you’ll get the point at least.

So the first thing we need to do is create the functions on document ready. But note that we won’t CALL the functions just yet.

First function (to get first name of the logged in user):

function getFirstName() {
  firstname = $().SPServices.SPGetCurrentUser({fieldName: "FirstName"})
  $(".first-name").append(firstname);
}

Second function (to get last name of the logged in user):

function getLastName() {
  lastname = $().SPServices.SPGetCurrentUser({fieldName: "LastName"})
  $(".last-name").append(lastname);
}

Call functions on page change

Right now these two functions are just sitting in the script tag, but we want to call them. You can do one of two things:

  1. call the functions right away
  2. call whenever the new pagelet loads

Because of the functions I am calling in one of my other projects, I’ve decided to call the function each time each pagelet loads. That means that even though jQuery Mobile loads the new pagelet without reloading the url, my data will still load in asynchronously. So when we click on “click here to see your last name”, it will then call the function when that pagelet comes into view.

The other way is fine as well, it just means that while you are using your new web app, the data only loads when the document is ready. This means if data changes while you are navigating, you won’t see the change until you refresh the page.

Note: If you call the functions each time the page is loaded, your script must remain above the jquery mobile js reference (see step 2). This because you need to tweak the DOM before jQuery Mobile applies its classes and functionality to the page.

So onto the code! We’re going to use the jQuery function “on” and pass the event “pagecreate”. Like I mentioned above, this means the function will only run when the page is created (every time).

$("section#page1").live("pagecreate", function(event){
  getFirstName();
});
$("section#page2").live("pagecreate", function(event){
  getLastName();
});

Now you should see the following when you load each page:

Full Code

And for your copying and pasting pleasure, here’s the full code!

<!DOCTYPE html>
<html>
<head>
<meta name="WebPartPageExpansion" content="full" />
<title>SharePoint, SPServices, and jQuery Mobile!</title>
	<link rel="apple-touch-icon" href="/Style Library/Images/apple-touch-icon.jpg"/>
	<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="/Style Library/scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" />
	<script src="/Style Library/scripts/jquery-1.6.4.min.js"></script>
	<script src="/Style Library/scripts/jquery.SPServices-0.7.0.min.js"></script>

<!--[if lt IE 9]>
<script src="/Style Library/scripts/html5.js"></script>
<![endif]-->

	<script type="text/javascript">
		$(document).ready(function(){
			
function getFirstName() {
	firstname = $().SPServices.SPGetCurrentUser({fieldName: "FirstName"})
	$(".first-name").append(firstname);
}		
function getLastName() {
	lastname = $().SPServices.SPGetCurrentUser({fieldName: "LastName"})
	$(".last-name").append(lastname);
}
			
$("section#page1").live("pagecreate", function(event){
  getFirstName();
});
$("section#page2").live("pagecreate", function(event){
  getLastName();
});		})
	</script>
	<script src="/Style Library/scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>

<section id="page1" data-role="page">
 <header data-role="header" data-position="fixed">
  <h1>First Page</h1>
 </header>
  <div data-role="content">
   Here's your first name: <span class="first-name" style="font-weight:bold;"></span><br/>
   <a href="#page2">Click here</a> to see your last name
  </div>
</section>

<section id="page2" data-role="page">
 <header data-role="header" data-position="fixed">
  <h1>Second Page</h1>
 </header>
  <div data-role="content">
   Here's your last name: <span class="last-name" style="font-weight:bold;"></span><br/>
   <a href="#page1">Go back</a> to see your first name
  </div>
</section>

</body>

</html>

Enjoy!

Ben

1 Comment

HTML5 video tag formats

14 Feb
2012

If you’ve played with the new video element in HTML5, you’re probably noticing the power it has to release you of the flash-based bonds you’ve been held captive by. But if you’re running an older browser (anything prior to IE 9 according to this site), you’ll see a supreme lack of video playing in your browser. You’ll need to provide a flash fallback using something like MediaElement.js or Video for Everybody.

Assuming you have fixed your video tag for older browsers, here’s a breakdown of the 3 different video formats you can use with the HTML5 video element.

WebM/VP8

Quoting the WebM Project site, “The WebM project is dedicated to developing a high-quality, open video format for the web that is freely available to everyone.” Nothing more really needs to be said about which direction we should heading for video on the web. And again from their site, “WebM is supported by Mozilla, Opera, Adobe, Google and more than seventy other publishers and software and hardware vendors.” I wonder which video format will rise to the top?!

Ogg/Theora

This format is also an open source codec designed to compete with MPEG-4 and other proprietary codecs (Windows Media, Realmedia, etc.). I don’t have tons of experience with it, but it only seems to have a couple of percentage points up on the WebM format in terms of current usage support. Right now it supports all the same browsers. So I put it in just for the heck of it, but you might be able to get by without it.

MPEG-4/H.264

The licensing on MPEG-4 is not royalty-free, so many browsers won’t support this format. Keep in mind that if you’re using all 3 formats (suggested), you need to list this one first because of a bug with the iPad. Also, Firefox and Opera have both stated they won’t support this format. Chrome currently does, but it seems it won’t in upcoming versions. This format is a ticking clock because of its closed door policy. Yes, it’s nice. But its days are numbered.

If you need software to be able to convert quickly and easily to all of these formats, check out Miro Video Converter. It’s an awesome (lightweight) tool.

ps. Have you tried the YouTube HTML5 version? They’ll let you sign up for a trial to see how it’s working for you.

4 Comments

Create your first jQuery Mobile “App”

21 Jan
2012

Update: I’ve since released 2 screencasts on this issue.

  1. Screencast: Create a Basic jQuery Mobile application
  2. jQuery Mobile – List Views (Screencast)

Let’s setup our first jQuery Mobile site/app (whatever you want to call it). This tutorial just covers basic setup and a first page. No links or buttons, we’ll cover that soon. But it’s a lot more straightforward than you might think. You need three things:

  1. jQuery Mobile CSS (default theme, or roll your own at jquerymobile.com)
  2. jQuery.js (download from jquery.com)
  3. jQuery-mobile.js (download from jquerymobile.com)

Let’s create our basic html structure:

<!DOCTYPE html>
<html>
<head>
 <title>My First jQuery Mobile "App"</title>
 <link rel="stylesheet" href="jquery.mobile-1.0.css"/>
 <script src="jquery.js"></script>
 <script src="jquery.mobile-1.0.js"></script>
</head>
<body>
 …
</body>
</html>

Next we’ll create our first “page”. Note that we’ll be using HTML5 markup. Put the following inside the body tag:

<section id="page1">
<header><h1>This is my first page!</h1></header>
  <div class="main">
   And here's my content!
  </div>
<footer><h1>And here's my footer</h1></footer>
</section>

You should wind up with something boring like this:

Now we’ll add in the “data-role” attributes that tell jQuery Mobile what styles and actions to apply. We’ll use the following attributes:

  • data-role=”page” (for each page of the app)
  • data-role=”header” (for the styled header toolbar)
  • data-role=”content” (to contain the main page content)
  • data-role=”footer” (for the styled footer toolbar)

So now let’s add it into our code:

<section id="page1" data-role="page">
<header data-role="header"><h1>This is my first page!</h1></header>
  <div class="main" data-role="content">
   And here's my content!
  </div>
<footer data-role="footer"><h1>And here's my footer</h1></footer>
</section>

And you should end up with something like this: (much better!)

It’s that simple. Keep watching for more in-depth tutorials on working with jQuery Mobile.

1 Comment

HTML5 Master Page in Sharepoint

11 Oct
2011

Unfortunately I haven’t gotten around to customizing my own, because instead I ran across Kyle Schaeffer’s HTML5-ready Master Page for Sharepoint 2010. So far it seems to work pretty well, but had a bit of trouble up front on a mac. Seems to be working now.

Time will tell how well the replacement of Sharepoint’s ribbon-controlling javascript with using custom CSS & javascript to control it will work well for all situations. I’m really hoping it will though!

So shout-out to Kyle for awesome work. Go to his site, download it and try it out!

1 Comment