Mediaelements: Add a share button to video elements using jQuery

Here is a quick tutorial in how to add a share button to video elements using jQuery and Mediaelements.js.

HTML5 Video tag

First, here is an example as how the video html5 tags should look like. The tag show the minimum attributes required, additional attributes still can be added. Notice the data-url attribute, the attributes contains the url that will be provided to the social media sites.

<video src="http://source-file-url" controls="controls" title="Video tile for display" data-url="full-share-video-url" height="385" width="640"></video>

The JavaScript file

Let’s start by creating the JavaScript file, we will call it share-links.js. We will create the function that will be called when the video element is successfully created.

add_video_share_tools = function( me, video ){
}

Now, we are going to verify that the element is a video element and there is no conflicts with jQuery

add_video_share_tools = function( me, video ){
if( video.tagName != 'VIDEO' )
return;
$ = jQuery.noConflict( );
if( $inner = $( video ).parents( '.mejs-video' ) ){
}
}

Once the video is validated we will need to get some values from the video tag.

add_video_share_tools = function( me, video ){
if( video.tagName != 'VIDEO' )
return;
$ = jQuery.noConflict( );
if( $inner = $( video ).parents( '.mejs-video' ) ){
$video		= $( video );
title 		= $video.attr( 'title' );
share_url 	= $video.attr( 'data-url' );
embed_url 	= $video.attr( 'data-url' ); // Change if embed url is different 
}
}

Next, we’ll create a list of the social media urls. The URLs will link to the social service to where we want to share the videos. Add as many as needed.

add_video_share_tools = function( me, video ){
if( video.tagName != 'VIDEO' )
return;
$ = jQuery.noConflict( );
if( $inner = $( video ).parents( '.mejs-video' ) ){
$video		= $( video );
$title 		= $video.attr( 'title' );
share_url 	= $video.attr( 'data-url' );
embed_url 	= $video.attr( 'data-url' ); // Change if embed url is different 
// share urls
sharelinks = {
tw: 	'http://twitter.com/share?text=Video: ' + $title + '&url=' + share_url, // twitter
fb: 	'https://www.facebook.com/sharer/sharer.php?u=' + share_url,	// facebook
su: 	'http://www.stumbleupon.com/submit?title=' + $title + '&url=' + share_url, //stumble upon
gp: 	'https://plus.google.com/share?url=' + share_url, //google plus
em: 	'http://api.addthis.com/oexchange/0.8/forward/email/offer?url=' + share_url //email
}
}
}

In this step, we will create the share video form and attach it to video frame.

add_video_share_tools = function( me, video ){
if( video.tagName != 'VIDEO' )
return;
$ = jQuery.noConflict( );
if( $inner = $( video ).parents( '.mejs-video' ) ){
$video		= $( video );
$title 		= $video.attr( 'title' );
share_url	= $video.attr( 'data-url' );
embed_url	= $video.attr( 'data-url' ); // Change if embed url is different 
// share urls
sharelinks = {
tw: 	'http://twitter.com/share?text=Video: ' + $title + '&url=' + share_url, // twitter
fb: 	'https://www.facebook.com/sharer/sharer.php?u=' + share_url,	// facebook
su: 	'http://www.stumbleupon.com/submit?title=' + $title + '&url=' + share_url, //stumble upon
gp: 	'https://plus.google.com/share?url=' + share_url, //google plus
em: 	'http://api.addthis.com/oexchange/0.8/forward/email/offer?url=' + share_url, //email
}
//create share links
var links = '';
for ( var key in sharelinks) {
links += '<a href="#" rel="nofollow" class="'+key+'">';
}
$inner.prepend( '<div class="media-content-title">' + $title + '</div>' );
$inner.prepend( '<a her="#" rel="nofollow" class="share-video-link">' + 'Share' + '</a>' );
html  = '<div class="share-video-form">';
html += '<em class="share-video-close">x</em><h4>' + 'share video' + '</h4>';
html += '<em>'+ 'link' +'</em><input type="text" class="share-video-lnk share-data" value="' + share_url + '" />' ;
//embed
html += '<em>'+ 'embed'  +'</em><textarea class="share-video-embed share-data">';
html += '&lt;iframe src=&quot;' + embed_url + '&quot; height=&quot;373&quot; width=&quot;640&quot; ';
html += 'scrolling=&quot;no&quot; frameborder=&quot;0&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot;&gt;&lt;/iframe&gt;</textarea>';
html += '<div class="video-social-share">' + links + '</div>' ;
$inner.prepend( html + '</div>'  ); 
}
}

OK, now that we have the markup created is time to start creating some event listeners to interact with the form. These functions will show and hide the form.

add_video_share_tools = function( me, video ){
if( video.tagName != 'VIDEO' )
return;
$ = jQuery.noConflict( );
if( $inner = $( video ).parents( '.mejs-video' ) ){
$video		= $( video );
$title 		= $video.attr( 'title' );
share_url	= $video.attr( 'data-url' );
embed_url	= $video.attr( 'data-url' ); // Change if embed url is different 
// share urls
sharelinks = {
tw: 	'http://twitter.com/share?text=Video: ' + $title + '&url=' + share_url, // twitter
fb: 	'https://www.facebook.com/sharer/sharer.php?url=' + share_url,	// facebook
su: 	'http://www.stumbleupon.com/submit?title=' + $title + '&url=' + share_url, //stumble upon
gp: 	'https://plus.google.com/share?url=' + share_url, //google plus
em: 	'http://api.addthis.com/oexchange/0.8/forward/email/offer?url=' + share_url, //email
}
//create share links
var links = '';
for ( var key in sharelinks) {
links += '<a href="#" rel="nofollow" class="'+key+'">';
}
$inner.prepend( '<div class="media-content-title">' + $title + '</div>' );
$inner.prepend( '<a her="#" rel="nofollow" class="share-video-link">' + 'Share' + '</a>' );
html  = '<div class="share-video-form">';
html += '<em class="share-video-close">x</em><h4>' + 'share video' + '</h4>';
html += '<em>'+ 'link' +'</em><input type="text" class="share-video-lnk share-data" value="' + share_url + '" />' ;
//embed
html += '<em>'+ 'embed'  +'</em><textarea class="share-video-embed share-data">';
html += '&lt;iframe src=&quot;' + embed_url + '&quot; height=&quot;373&quot; width=&quot;640&quot; ';
html += 'scrolling=&quot;no&quot; frameborder=&quot;0&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot;&gt;&lt;/iframe&gt;</textarea>';
html += '<div class="video-social-share">' + links + '</div>' ;
$inner.prepend( html + '</div>'  ); 
// start listeners
$sharelink 		= $inner.find( '.share-video-link' );
$sharefrom 	= $inner.find( '.share-video-form' );
$closelink 		= $inner.find( '.share-video-close' );
$videotitle	 	= $inner.find( '.media-content-title' );
// hide form when video is playing
me.addEventListener( 'play', function(e) {
$sharelink.hide( ); $sharefrom.hide( ); videotitle.hide( );
}, false );
// show form when video is paused
me.addEventListener( 'pause', function(e) {
$sharelink.removeClass( 'video-active' );
$inner.find( '.mejs-overlay-button' ).show( );
$videotitle.show( ); $sharelink.show( );
}, false );
// close video form
video_close_share_form = function( ){
$sharefrom.hide( ); 
$sharelink.removeClass( 'video-active' );
$inner.find( '.mejs-overlay-play' )
.removeClass( 'share-overlay' );
};
// show / hide video form
$closelink.bind( 'click', video_close_share_form );
$sharelink.bind( 'click', function( ){
if( $sharefrom.is( ':hidden' ) ) {
$sharefrom.show( );
$sharelink.addClass( 'video-active' );
$inner.find( '.mejs-overlay-play' )
.addClass( 'share-overlay' ).show( );
} else video_close_share_form( );
});
}
}

The last step on our javascript file is to add the listeners for the share links.

add_video_share_tools = function( me, video ){
if( video.tagName != 'VIDEO' )
return;
$ = jQuery.noConflict( );
if( $inner = $( video ).parents( '.mejs-video' ) ){
$video		= $( video );
$title 		= $video.attr( 'title' );
share_url	= $video.attr( 'data-url' );
embed_url	= $video.attr( 'data-url' ); // Change if embed url is different 
// share urls
sharelinks = {
tw: 	'http://twitter.com/share?text=Video: ' + $title + '&url=' + share_url, // twitter
fb: 	'https://www.facebook.com/sharer/sharer.php?url=' + share_url,	// facebook
su: 	'http://www.stumbleupon.com/submit?title=' + $title + '&url=' + share_url, //stumble upon
gp: 	'https://plus.google.com/share?url=' + share_url, //google plus
em: 	'http://api.addthis.com/oexchange/0.8/forward/email/offer?url=' + share_url, //email
}
//create share links
var links = '';
for ( var key in sharelinks) {
links += '<a href="#" rel="nofollow" class="'+key+'">';
}
$inner.prepend( '<div class="media-content-title">' + $title + '</div>' );
$inner.prepend( '<a her="#" rel="nofollow" class="share-video-link">' + 'Share' + '</a>' );
html  = '<div class="share-video-form">';
html += '<em class="share-video-close">x</em><h4>' + 'share video' + '</h4>';
html += '<em>'+ 'link' +'</em><input type="text" class="share-video-lnk share-data" value="' + share_url + '" />' ;
//embed
html += '<em>'+ 'embed'  +'</em><textarea class="share-video-embed share-data">';
html += '&lt;iframe src=&quot;' + embed_url + '&quot; height=&quot;373&quot; width=&quot;640&quot; ';
html += 'scrolling=&quot;no&quot; frameborder=&quot;0&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot;&gt;&lt;/iframe&gt;</textarea>';
html += '<div class="video-social-share">' + links + '</div>' ;
$inner.prepend( html + '</div>'  ); 
// start listeners
$sharelink 		= $inner.find( '.share-video-link' );
$sharefrom 	= $inner.find( '.share-video-form' );
$closelink 		= $inner.find( '.share-video-close' );
$videotitle	 	= $inner.find( '.media-content-title' );
// hide form when video is playing
me.addEventListener( 'play', function(e) {
$sharelink.hide( ); $sharefrom.hide( ); videotitle.hide( );
}, false );
// show form when video is paused
me.addEventListener( 'pause', function(e) {
$sharelink.removeClass( 'video-active' );
$inner.find( '.mejs-overlay-button' ).show( );
$videotitle.show( ); $sharelink.show( );
}, false );
// close video form
video_close_share_form = function( ){
$sharefrom.hide( );	
$sharelink.removeClass( 'video-active' );
$inner.find( '.mejs-overlay-play' )
.removeClass( 'share-overlay' );
};
// show / hide video form
$closelink.bind( 'click', video_close_share_form );
$sharelink.bind( 'click', function( ){
if( $sharefrom.is( ':hidden' ) ) {
$sharefrom.show( );
$sharelink.addClass( 'video-active' );
$inner.find( '.mejs-overlay-play' )
.addClass( 'share-overlay' ).show( );
} else video_close_share_form( );
});
// add share links listener
$inner.find( '.video-social-share a' ).click( function(){
key = $( this ).attr( 'class' );
if( sharelinks[key] )
window.open( sharelinks[key]  );
});
}
}

The HTML FILE

Now is time to put everything together. We have to add all the required script and styles to the page header tag. We have also provided a stylesheet to go along with this tutorial.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="mediaelement-and-player.min.js"></script>
<script type="text/javascript" src="share-links.js"></script>
<link rel="stylesheet" href="mediaelementplayer.min.css" media="all" />
<link rel="stylesheet" href="share-links.css" media="all" />

Finally we have to call the mediaelement call in the footer. Add as many options options as needed, the important part here is to add the “add_video_share_tools” function to the success option.

<script> 
$('video').mediaelementplayer({ 
features: ['playpause','progress','volume','sourcechooser'], success: add_video_share_tools 
}); 
</script>

Download all the files for this tutorial