Synote Media Fragment Player

Use W3C Media Fragment with Ease!

Download v1.0View Demo

Why Synote Media Fragment Player?

Temporal fragment in W3C Media Fragment URI 1.0 has been applied in Firefox, Google Chrome when you use HTML5 <video> and <audio> tags. Media fragments are also supported in many online media sharing platforms such as YouTube. However, many other browsers or applications on various platforms and devices are still lack of support for media fragment. In addition, the spatial fragment has yet to be implemented in major browsers. So we implemented Synote Media Fragment player as a polyfill.

Synote Media Fragment player parses the media fragment URI and automatically highlights the temporal and spatial fragments by using the APIs provided by cross-browser HTML5 MediaElement.js player. By doing so, you can play the media fragments not only from online multimedia files, but also online video sharing platforms, such as YouTube and Dailymotion.


How to use:

Import Javascript and CSS

Download the latest release, the put the following references on the <head> of the webpage.

		      		<link rel="stylesheet" type="text/css" href="mediaelementplayer.min.css" />
		      		<link rel="stylesheet" type="text/css" href="smfplayer.css" />
		      		<script type="text/javascript" src="path_to_jquery"></script>
		      		<script type="text/javascript" src="mediaelement-and-player.min.js"></script>
		      		<script type="text/javascript" src="smfplayer.min.js"></script>	      		

Note: The source code mediaelementplayer.min.css and mediaelement-and-player.min.js have been modified compared with the original code from MediaElement.js. The jQuery library is not provided by smfplayer package.

Initialise the player

Create an <div> and specify the media fragment URI using mfURI option when initialising smfplayer.

		      		<div id="player_div"></div>
		      		<script type="text/javascript">
						var uriStr = "http://path/to/file.mp4#t=11,19&xywh=120,120,120,120";
							var mfuri = uriStr;
							var player = $("#player_div").smfplayer(
							/*smfplayer options*/

The height and width options indicate the height and width of the video. The autoStart option indicates if the media fragment should be played automatically when the player is initialised. If autoStart is set to false, the media fragment will be played only when the user clicks the play button.

Add the following code into smfplayer options if you want to add subtitles. We support both SRT and WebVTT.

		      				{srclang:"en", kind:"subtitles", type:"text/plain", src:"resources/"},
    						{srclang:"ja", kind:"subtitles", type:"text/plain", src:"resources/"},
    						{srclang:"zh", kind:"subtitles", type:"text/vtt", src:"resources/zh.vtt"}
    					//other options...
Destroy the player

You can remove the player by calling the destroy method:


See document for more information.

Known issues:

  • The spatial highlighting doesn't work on full-screen mode.
  • The spatial highlighting sometimes overlays the play button on the player.
  • Auto-start doesn't work if the embedded flash player plays ads first. This is the case for Dailymotion.