How To Play MPEG-DASH Videos In Windows 10 UWP App

Suresh M
Oct 04, 2016
5.1k
0
1
Article

Introduction to MPEG DASH Videos

DASH content usually consists of media files encoded at the various qualities and a manifest, which provides the information on the media files to the end user.

For DASH, the actual A/V streams are called the Media Presentation, while the manifest file is called the Media Presentation Description (.mpd) files. It contains the collection of structured audio/video content. This service provides support for both Video on Demand (VoD) and live streaming.

Microsoft Edge and IE 11 supports MPEG DASH but our default Media Element Control does not support MPEG DASH.

Recently, I developed media player application but faced issue on playing MPEG DASH videos because the default media element control not supporting .mpd type videos but Microsoft Edge and IE 11 plays .mpd videos. Thus, I decided to use Web View Control to play MPEG DASH videos.

Let’s see the steps, given below-

Create new windows 10 UWP App and add one web view control using the following XAML code.

<WebView Name="WebBrowserName"/>

Now, we need to pass HTML content to load the content in Web view control and dash.js script is able to play MPEG DASH videos. Thus, we need to form HTML string, as the code, given below, which plays MPEG videos and pass the string to the Web view control.

HTML String

string urls = "<!DOCTYPE html>\r\n<html>\r\n<script src=\"http://cdn.dashjs.org/latest/dash.all.min.js\"></script>\r\n\r\n<head>\r\n r\n</head>\r\n<body>\r\n \r\n\r\n <div>\r\n <video data-dashjs-player autoplay src=\" http://rdmedia.bbc.co.uk/dash/ondemand/bbb/2/client_manifest-common_init.mpd \"></video>\r\n </div>\r\n\r\n</body>\r\n</html>";

Finally, go to the code at the backend and pass HTML string to NavigateToString method.

WebBrowserName.NavigateToString(urls);

Now, run the Application and see the output, which is given below-

Window10