In a previous blog post , I highlighted that it is possible to use a Dash.js player with Microsoft Azure Media Services. In this post, I will take the learnings from that tutorial a step further to show how you might also create a cross platform app using a Dash.js player. Using Dash.js is a good alternative/solution for displaying a streaming video within a Cordova Application. It is easy to use, and doesn’t need any plug in, just dash.js source file in your project.
Follow along with the steps outlined below to learn how you may be able to leverage this open source code to create a cross-platform media player that streams video hosted from Azure Media Services.
Creating a Video Player
First, you will need to create a Cordova Application ‘as usual’: cordova create VideoPlayer com.fum.em VideoPlayer
Once completed, replace the index.html code within your app with the following:
<video class="dashjs-player" autoplay preload="none" controls="true">
<source src="http://YourService.origin.mediaservices.windows.net/GUID/AppName/Manifest(format=mpd-time-csf)" type="application/dash+xml" />
</video>
Next, add this (debugged version) script:
<script src="js/dash.debug.js"></script>
Here is a sample of what the HTML code should look like: (I used here a sample)
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<!--<link rel="stylesheet" type="text/css" href="css/index.css" />-->
<script type="text/javascript" src="cordova.js"></script>
<script src="js/dash.debug.js"></script>
<title>Hello Dash World</title>
</head>
<body onload="Dash.createAll()">
<div class="app">
<h1>Dash Player in Cordova</h1>
<video class="dashjs-player" autoplay preload="none" controls="true" oninvalid="invldSrc" onerror="onError">
<source src="http://ericmittmediasvc.origin.mediaservices.windows.net/eeba74f6-5f16-477a-b469-32a03732ebf5/Wikipedia%20Office%20App.ism/Manifest(format=mpd-time-csf)"
type="application/dash+xml" />
</video>
<div id="deviceready" class="blink">
<p class="event listening">Connected to Device</p>
<p class="event received">http://ericmittmediasvc.origin.mediaservices.windows.net/eeba74f6-5f16-477a-b469-32a03732ebf5/Wikipedia%20Office%20App.ism/Manifest(format=mpd-time-csf)</p>
</div>
</div>
</body>
Configuring and Testing Apps Across Platforms
At this point, the application should be ready for testing. For this example, I specified Windows 8.1 as the primary target within the cordova config file:
<preference name='windows-target-version' value='8.1' />
NOTE: The app should run on Windows 8.1 or Windows 10. Yet, you will need to adjust the security manifest by a valid one see this blog post for more info about Cordova certificate for Windows platform.
Create the application: cordova create DashForFun com.test.cordova DashForFun and then, add the HTML file created above within the www directory of the solution.
Add the Windows platform: cordova platform add windows and then execute: Cordova run Windows -- --win to create and start the windows application.
NOTE: In the example below, I tested the application in Win10 preview, in window mode.
![clip_image002[4]](http://msopentech.com/wp-content/uploads/clip_image0024_thumb4.jpg "clip_image002[4]")
If you add the Browser platform: Cordova platform add browser
And run it with this command: Cordova run browser
You will also be able to view your application running in Chrome:
![clip_image004[4]](http://msopentech.com/wp-content/uploads/clip_image0044_thumb5.jpg "clip_image004[4]")
The process is similar for phones/devices; run this command: cordova run -- --phone --device
Here is a screen capture taken with the ProjectMyScreen application:
![clip_image006[4]](http://msopentech.com/wp-content/uploads/clip_image0064_thumb3.jpg "clip_image006[4]")
We hope you have fun with these tools! Feel free to share your feedback about issues or cool projects you are working with Dash.js, Cordova and Azure Media Services.
A bientôt,
Eric