Serve different format video to different browsers

4 posts, 1 answers
  1. Bob
    Bob avatar
    11 posts
    Member since:
    May 2008

    Posted 29 Aug Link to this post

    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

  2. Answer
    Georgi
    Admin
    Georgi avatar
    184 posts

    Posted 31 Aug Link to this post

    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')
     
      })

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


    Regards,
    Georgi
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Bob
    Bob avatar
    11 posts
    Member since:
    May 2008

    Posted 31 Aug Link to this post

    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

  4. Georgi
    Admin
    Georgi avatar
    184 posts

    Posted 04 Sep Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top