Serve different format video to different browsers

[Bob]

Hello,

When using the standard HTML5 <video> tag, one can list various formats of the same video e.g. .webm, .mp4 and the browser will work down the list and take the first one it supports or render the text line following the files if nothing is supported.

<video controls width="640" height="360">
  <source src="~/Content/video/intro_20170825.webm" type="video/webm"></source>
  <source src="~/Content/video/intro_20170825.mp4" type="video/mp4"></source>
  <p>Your browser doesn't support video. Please use IE9+, Firefox, Chrome, Opera or Safari.</p>
</video>

 

How can I achieve the same result with Media Player control?

I can serve up files in various qualities (e.g. 480p, 720p) but it always takes the first file in the list no matter what (and does not display in IE11).

@(Html.Kendo().MediaPlayer()
    .Name("mediaplayer1")
    .AutoPlay(true)
    .HtmlAttributes(new { style = "height:360px; width:640px" })
    .Media(m => m
        .Title("Power Vision Mobile Platform")
        .Source(new[] {
            new { quality = "720p", url = "../Content/Video/intro_20170825.webm" }
        })
    )
    .Media(m => m
        .Title("Power Vision Mobile Platform")
        .Source(new[] {
            new { quality = "720p", url = "../Content/Video/intro_20170825.mp4" }
        })
    )
)

 

I've also tried having one .Media block with both files listed in the .Source array, but still it only takes the first one. We prefer to serve up .webm file as default and keep the .mp4 around for Internet Explorer users.

Thanks in advance for any suggestions,

Rob

[Georgi]

Hello Bob,

Possible solution is to append all the sources to the generated video tag using jQuery when document is ready.

e.g.

$(function () {
var vid = $('video');
vid.removeAttr('src')
vid.append('<source src="http://techslides.com/demos/sample-videos/small.webm" />')
vid.append('<source src="http://techslides.com/demos/sample-videos/small.mp4" />')

  })

I have assembled small sample (multiplayer-multi-sources.zip) which illustrates the aforementioned approach.


Regards,
Georgi
Progress Telerik

[Bob]

Georgi,

Thanks for that solution. I implemented it and it works fine for this limited solution. The issue of which browser supports which video format and which format plays best is a big hassle. Any improvements Telerik can make to the MediaPlayer to support this functionality directly would be much appreciated.

Also, many of the video players (YouTube, Vimeo, Sharefile) also support some type of caching - you can see the video downloading happening independently of the video playback, that would be nice too.

Thanks again,

Bob

[Georgi]

Hi Bob,

Thank you for the provided feedback. I will discuss your suggestions for improving our Kendo MediaPlayer with my colleagues.


Regards,
Georgi
Progress Telerik