locked
Playlist clip playback in HTML5 of an Azure video stream? RRS feed

  • Question

  • Hi

    I have video files hosted in Azure. On client machines I would like to stream short clips out of those files to clients (think a compilation of clips from various files as a playlist of funny moments or whatever). The trick is that on the client side, I only want those segments available. I would prefer the client not to have access to the full stream if possible. The idea is that they can "download" those clips and cache them locally for playback from this stream. If they click on another clip, i'd like to play that clip only.

    My initial thoughts were to use some form of Generic Handler (ashx) to authorize the user's access to the "clip", and then send only that section of the stream to the user. I don't really mind how I do it, but i'd like the clip to be seen as a single standalone clip so that the browser can cache and play back again if reopened (obviously if the user clears the cache, that's another story).

    Any ideas?

    Thursday, October 10, 2013 11:23 AM

Answers

  • Hi,

    Actually, what you are asking for is a common ask in the live broadcast industry.  We have built a tool in the past called the Rough Cut Editor, to author what are called 'composite manifests' for use in smooth streaming.  This allowed complex splice-in / splice-out scenarios. 

    The smooth streaming client is able to interpret such a manifest and only present the abridged timeline to the user.  These smooth clients were used to support very large, very high-profile events such as the Olympics, where a stream could run for hours, but for which you might want to single-out a particular event, or a series of hightlights.  There was quite a bit of investment made in both the manifest format specifications, the rough-cut-editor and the client framework to support these. 

    Unfortunately, HTML5 does not have a rich client framework yet.  Simple 'video' tags are still very limited.  Some of the concepts that were conceived for smooth have started to be ported to HTML5 via the DASH-Industry Forum's open source contributions to Dash.js.  The Dash.js player utilizes the modern browser's (IE11/Chrome) media pipeline to provide adaptive bitrate streaming, download heuristics, more advanced player controls, and (for IE 11) access to digital rights management through the Encrypted Media Element (EME), notably for PlayReady decryption support (allowing for premium content distribution directly to HTML5).

    Microsoft is actively contributing to the Dash.js player through its Microsoft OpenTech division.  You are also welcome to contribute or extent the open-source player framework to support the specification of the start time on the query string.

    As for a server side solution, we are working with our partners for these next Olympics on how to build the next, protocol agnostic, mechanism for sub-clipping.  Note that any such features will require a Windows Azure Media Services account and accompanying Origin services.  That is, Azure Storage is simply a storage system, it does not offer advanced media processing scenarios on it's REST layer.

    Regards,

    -Nick
    Program Manager, Windows Azure Media Services.

    Wednesday, October 16, 2013 4:26 PM

All replies

  • Hi,

    I had this requirement of playing a video from a specific duration when there is no user activity and I used the below code. It may not match exactly to your requirement but you can try to provide the list of files and then in the script load them at specific intervals on the player. 

    	<video id="video" autoplay loop controls tabindex="0">
      		<source src="https://xyz.blob.core.windows.net/asset-231dsfs-c10b-48c6-9dab-b9cdb797bc39/video_v2.mp4?sv=2012-02-12&st=2013-06-06T21%3A45%3A31Z&se=2015-06-06T21%3A45%3A31Z&sr=c&si=30e806fb-47ae-4be1-891d-723c9f06b387&sig=teoDK%2Byxs3XydsV%2FmcuMmXLd7EEJfuJmR2oAIRNPqhk%3D" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    	</video>
    	<script>
    $(function(){
    	var vedio = document.getElementById("video");
    	var keyStriked = false;
    	var count = 0;
    
    	var timer = setInterval(function(){
    		if(keyStriked){
    			clearInterval(timer);
    			vedio.currentTime = 51;
    		}else{
    			count++;
    			if(count>20){
    				clearInterval(timer);
    			}
    
    		}
    	},1000);
    
    	$('body').bind('keydown',function(){
    		keyStriked = true;
    	});
    });
    	</script>
    
    Let me know if it helped.

    Tx,

    sahas

     

    Sahas Lad

    Friday, October 11, 2013 7:17 PM
  • Thanks Sahas. The problem is that I don't want to make several short clips as this requires transcoding, and the duplicate storage of many clips (that can be created at any time by a number of users) when I really just want to store the source video. I'm not even sure azure allows me to do that? 

    After reading up on streams, azure, playerframework etc, I am starting to redefine my requirements (I didn't realise what I am trying to do wasn't very easy).

    I would like to effectively do what you can with youtube when you play from a specific point in the stream.

    http://www.youtube.com/v/Z_zxRAfAWug&hl=en&fs=1&start=20

    I would also like and end time so that the control stops playing.

    A bonus would be to hide this form the user entirely and just show the user the timeline of the specific clip. For this I was hoping that something on the server side could only serve part of the stream... but I think I might be barking up the wrong tree.

    Monday, October 14, 2013 6:06 AM
  • Hi,

    Actually, what you are asking for is a common ask in the live broadcast industry.  We have built a tool in the past called the Rough Cut Editor, to author what are called 'composite manifests' for use in smooth streaming.  This allowed complex splice-in / splice-out scenarios. 

    The smooth streaming client is able to interpret such a manifest and only present the abridged timeline to the user.  These smooth clients were used to support very large, very high-profile events such as the Olympics, where a stream could run for hours, but for which you might want to single-out a particular event, or a series of hightlights.  There was quite a bit of investment made in both the manifest format specifications, the rough-cut-editor and the client framework to support these. 

    Unfortunately, HTML5 does not have a rich client framework yet.  Simple 'video' tags are still very limited.  Some of the concepts that were conceived for smooth have started to be ported to HTML5 via the DASH-Industry Forum's open source contributions to Dash.js.  The Dash.js player utilizes the modern browser's (IE11/Chrome) media pipeline to provide adaptive bitrate streaming, download heuristics, more advanced player controls, and (for IE 11) access to digital rights management through the Encrypted Media Element (EME), notably for PlayReady decryption support (allowing for premium content distribution directly to HTML5).

    Microsoft is actively contributing to the Dash.js player through its Microsoft OpenTech division.  You are also welcome to contribute or extent the open-source player framework to support the specification of the start time on the query string.

    As for a server side solution, we are working with our partners for these next Olympics on how to build the next, protocol agnostic, mechanism for sub-clipping.  Note that any such features will require a Windows Azure Media Services account and accompanying Origin services.  That is, Azure Storage is simply a storage system, it does not offer advanced media processing scenarios on it's REST layer.

    Regards,

    -Nick
    Program Manager, Windows Azure Media Services.

    Wednesday, October 16, 2013 4:26 PM
  • Nick, thanks for taking the time to reply. I really appreciate it.

    Streaming (or progressive download) of media has been a new avenue for us recently, and as we've begun moving all our services over to Azure, using Media Services was the next logical step as it takes much of the processing burden away from our clients.

    For now I've settled on using progressive mp4 download. I'm building a tool that our clients can use to upload their original content to azure storage. From there we run some encoding jobs to provide both HD and SD mp4 files that are available for progressive download. It was a pleasant surprise to find out this week that firefox now supports mp4 as well (i'm still new to developing media driven software so I hadn't followed this much and it was news to me), meaning that using <video> elements is now possible in all the bigger browsers with just the mp4 encoded files.

    As for clipping... I found a blog post on the video tag (http://my.opera.com/core/blog/2010/03/03/everything-you-need-to-know-about-html5-video-and-audio-2) that explained how to create a custom slider for the built in video tag. This allowed me to only show a slider for the duration of the clip.

    While this isn't smooth streaming, for now this is going to have to do for us. I'd really like to be able to limit client access to certain parts of the stream from the server's side, but for now it's not the end of the world... hey I have a solution today, where all I had where brick walls in front of me the other day.

    I'm eagerly awaiting proper DASH adoption. I've been reading up on it recently (I've had to read up on everything media related recently to try find my way) and a streaming option without the use of flash or Silverlight would be a fantastic tool!

    Overall I am so thoroughly impressed with Azure in general, and Media Services in particular. Being able to transcode our source video on the server and push it out to clients is a huge bonus. I have two suggested improvements that would really help:

    1. Allow users to transcode sections of video on the server (i.e. set a start time and end offset for the encoding jobs). This would open up a lot of doors. Also, merging clips would be awesome (even if they have to be transcoded to the same format first.

    2. Build an upload tool for the management portal (manage.windowsazure.com) so that we can upload bigger test videos (> 200MB). Also, supporting resume would be idea. I'm building my own tool for this at the moment, but it would be awesome if I didn't have to do all this.

    Wednesday, October 16, 2013 9:00 PM