Mediaelements: Add a share button to video elements using jQuery

media elements share button

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

10 Comments on “Mediaelements: Add a share button to video elements using jQuery

  1. Dee says:

    YES I DID DOWNLOAD THE FILE . DO I HAVE TO REPLACE THEM WITH THE FILES IN THE MEDIA ELEMENT ROOT FOLDER.. I’M REALLY SORRY TO BOTHER YOU AS I’M NEW TO THIS..
    THANKS ALOT

  2. Xpark Media says:

    @dee,

    All you have to do is link to all files in the header tag and the following code in html file.

    <script>$('video').mediaelementplayer({ success: add_video_share_tools });</script>

    See the “The HTML FILE” section.

  3. Steven says:

    This doesn’t work for Mediaelement module of Drupal (7.x-1.x-dev version).

    I just see a black div with inside “Download File” ­čÖü

  4. Xpark Media says:

    @ Johan,

    It should work with all videos, It is all base on your jQuery selection. This tutorial assumes that you are selecting all video tags $('video')

  5. Johan says:

    @ XM

    When I click the Share button in a video prior to the last video, the share form is displaying for the last video. Please check http://bit.ly/1TgmYho
    Looks like it’s binding all share buttons for just the last video. This is my selection $(‘video’).mediaelementplayer({ success: add_video_share_tools });

  6. Xpark Media says:

    @Johan,

    We clicked all videos and every time the share box display the correct video, the share link is going to the mp4 file and not a page that has metadata associated with the video.

    This is the code that you want to modify to make the share work better. You can add a new data attribute to link to the embed page url.

    embed_url = $video.attr( 'data-url' ); // Change if embed url is different

    See HTML5 Video tag


Leave a Reply

Your email address will not be published. Required fields are marked *