Search code examples
javascripthtmlvideo

current playback position doesn't change on html video


I have an html5 video player residing on a mvc3 razor view. I have had the video playing just fine, but weirdly I can't seem to change the playback position(time) with the slider control of the video element. I make my move to change the playback position with mouse but it just goes back to where it's left.

I thought I should have written some extra javascript to handle video seeking, but it's just nonsense isn't it? What am I missing here?

Below is the html I have.

<video id="presentedFile" width="780" height="510" controls>
    <source src="/Folder/GetVideoStream?videoId=3" type="video/mp4">
</video>

Edit: I have figured that when I have the source as an actionlink in my mvc controller this problem occurs. If I get the file directly from the file system it works as I expected. So there must be something wrong with my controller.

public FileResult GetVideoStream( string videoId )
{
    /// create my stream
    return File(myStream, MimeMapping.GetMimeMapping(myVideo));
}

Solution

  • Starting with this answer, I managed overcome this problem. Figured it is the missing http headers accept-ranges and content-range on the response which causes undraggable videos.

    Just for the simplification of the mentioned solution on above link, they have used an http handler to solve the problem. But I would like to state that using/implementing an http handler is not a part of the required solution. The solution is that you have to put necessary headers to the response like below:

    public FileResult GetVideoStream( string videoId )
    {
        /// create the stream
    
        /// if request contains range details
        if ( !String.IsNullOrEmpty(HttpContext.Request.ServerVariables["HTTP_RANGE"]) )
            SetHeadersForRangedRequests(stream, HttpContext);
    
        return File(myStream, MimeMapping.GetMimeMapping(myVideo));
    }
    

    Following method is quoted from the link above, I just removed the using around the StreamReader since I need the stream to be left open after the operation is done.

    void SetHeadersForRangedRequests ( Stream stream, HttpContextBase context )
    {
        long size, start, end, length, fp = 0;
        StreamReader reader = new StreamReader(stream);
    
        size = reader.BaseStream.Length;
        start = 0;
        end = size - 1;
        length = size;
    
        context.Response.AddHeader("Accept-Ranges", "0-" + size);
            
        if ( !String.IsNullOrEmpty(context.Request.ServerVariables["HTTP_RANGE"]) )
        {
            long anotherStart = start;
            long anotherEnd = end;
            string[] arr_split = context.Request.ServerVariables["HTTP_RANGE"].Split(new char[] { Convert.ToChar("=") });
            string range = arr_split[1];
    
            // Make sure the client hasn't sent us a multibyte range
            if ( range.IndexOf(",") > -1 )
            {
                // (?) Shoud this be issued here, or should the first
                // range be used? Or should the header be ignored and
                // we output the whole content?
                context.Response.AddHeader("Content-Range", "bytes " + start + "-" + end + "/" + size);
                throw new HttpException(416, "Requested Range Not Satisfiable");
            }
    
            // If the range starts with an '-' we start from the beginning
            // If not, we forward the file pointer
            // And make sure to get the end byte if spesified
            if ( range.StartsWith("-") )
            {
                // The n-number of the last bytes is requested
                anotherStart = size - Convert.ToInt64(range.Substring(1));
            }
            else
            {
                arr_split = range.Split(new char[] { Convert.ToChar("-") });
                anotherStart = Convert.ToInt64(arr_split[0]);
                long temp = 0;
                anotherEnd = ( arr_split.Length > 1 && Int64.TryParse(arr_split[1].ToString(), out temp) ) ? Convert.ToInt64(arr_split[1]) : size;
            }
            /* Check the range and make sure it's treated according to the specs.
                * http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html
                */
            // End bytes can not be larger than $end.
            anotherEnd = ( anotherEnd > end ) ? end : anotherEnd;
            // Validate the requested range and return an error if it's not correct.
            if ( anotherStart > anotherEnd || anotherStart > size - 1 || anotherEnd >= size )
            {
    
                context.Response.AddHeader("Content-Range", "bytes " + start + "-" + end + "/" + size);
                throw new HttpException(416, "Requested Range Not Satisfiable");
            }
            start = anotherStart;
            end = anotherEnd;
    
            length = end - start + 1; // Calculate new content length
            fp = reader.BaseStream.Seek(start, SeekOrigin.Begin);
            context.Response.StatusCode = 206;
        }
    
        // Notify the client the byte range we'll be outputting
        context.Response.AddHeader("Content-Range", "bytes " + start + "-" + end + "/" + size);
        context.Response.AddHeader("Content-Length", length.ToString());
    }