azure


Azure Media Services Player invoked via Javascript fails with URL.createObjectURL is not a function


I'm trying to do a simple POC using the Azure Media Player in my application using Alternative Setup for dynamically loaded HTML using JavaScript from this blog post. I'm getting an error when trying to load via javascript as described below.
If I simply include the javascript files and follow the example "Step 2: Add the HTML video tag to your page" it works:
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls autoplay width="640" height="400" poster="" data-setup='{"nativeControlsForTouch": false}' tabindex="0">
<source src="http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest" type="application/vnd.ms-sstr+xml" />
<p class="amp-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
But I try to load it dynamically via javascript as described in "Alternative Setup for dynamically loaded HTML using JavaScript" I get an error
Uncaught Error: Error: TypeError: URL.createObjectURL is not a function azuremediaplayer.min.js:2
What I'm trying:
To keep it real simple I'm just trying to get it to load a video in response to a button click.
I have this code in place which is just a direct copy of the example provided.
HTML:
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered">
</video>
<button id="amsbutton" type="button">Load</button>
Javascript:
$("#amsbutton").on("click", function () {
AMSVideo();
});
function AMSVideo() {
var myOptions = {
"nativeControlsForTouch": false,
autoplay: true,
controls: true,
width: "640",
height: "400",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([
{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" },
]);
}
I tried your code with one minor tweak to not use jQuery and it seems to work fine. Also, if you are ever having trouble, please check out our samples page which has several working examples of loading Azure Media Player using the <video> tag method or dynamically loading using JavaScript
in the <head> of the HTML page, add the Azure Media Player scripts:
<script src="//amp.azure.net/libs/amp/1.1.0/azuremediaplayer.min.js"></script>
<link href="//amp.azure.net/libs/amp/1.1.0/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<!-- Set the location of the fallback techs -->
<script>
amp.options.flashSS.swf = "//amp.azure.net/libs/amp/1.1.0/techs/StrobeMediaPlayback.2.0.swf"
amp.options.flashSS.plugin = "//amp.azure.net/libs/amp/1.1.0/techs/MSAdaptiveStreamingPlugin-osmf2.0.swf"
amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/1.1.0/techs/SmoothStreamingPlayer.xap"
</script>
In the <body> of the HTML Page:
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered"></video>
<button id="amsbutton" type="button" onclick="AMSVideo()">Load</button>
JavaScript:
function AMSVideo() {
var myOptions = {
"nativeControlsForTouch": false,
autoplay: true,
controls: true,
width: "640",
height: "400",
poster: ""
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([
{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" },
]);
}
If you are still having difficulty, please reach out to ampinfo#microsoft.com for more assistance.
I never found out exactly what the conflict was, but this turned out to be an incompatibility with CKEDITOR 4.3.1. When I commented out my ckeditor code:
CKEDITOR.replace('text-content', {
toolbar: 'Basic',
uiColor: '#9AB8F3',
});
the problem went away. Fortunately, whatever it was is addressed in later version of ckeditor. I dropped in ckeditor from their cdn //cdn.ckeditor.com/4.4.7/standard/ckeditor.js" and the problem seems to be gone. Since this points to the "standard" version of ckeditor, I will update this if it turns out to be more specific like a particular ckeditor plugin for instance.

Related Links

Azure AD Token Issuing Endpoint doesn't return “scope” parameter
Azure Fuctions not visible on Dashboard
Azure Storage Account Metrics only visible for Classic Storage Account
UWP MapControl.MapServiceToken from Microsoft Azure
Hosting a web application in Azure that consumes on premise web services and ActiveMQ
How do you pin the menu in Azure portal?
Team Foundation Server API using Oauth provided by Azure Active Directory
I keep getting this in my azure site log tail command
Azure traffic manager to use custom request header
Azure: size 0 and encoding error while downloading the file uploaded to azure blob storage [duplicate]
Swagger for Azure Service Fabric Stateless Web API application
Dynamics CRM daemon app with Client Assertion Certificate (Azure AD) gives 401
how do you add diagnostics to an azure cloud service using just the Microsoft.WindowsAzure.Management libraries?
Azure SQL Database Error, but works in localhost debug mode
Can Azure Point-To-Site client see default Azure DNS?
MS Azure AD Connect: Download on a Mac for VM?

Categories

HOME
validation
dom
tags
apt-get
linear-programming
restsharp
light-inject
obiee
eloqua
luci
numericupdown
condor
javers
silk-performer
nsmutableattributedstring
lexikjwtauthbundle
azure-ad-graph-api
dsc
polynomials
jcrop
precision
instance
dlopen
imagemapster
google-domain-api
google-crawlers
fipy
nav
p4-lang
ubuntu-server
confirm
qweb
qmake
hostname
hostapd
canopen
g-wan
python-module
jawr
hipi
a-star
tastypie
surroundscm
mit-scheme
business-logic
turnjs
tealeaf
submission
flotr2
blpapi
ctakes
hypervisor
esky
perfview
translucency
translate3d
stringr
abort
getuikit
reactive-cocoa-3
modern-ui
iscroll4
imaging
private-methods
notifydatasetchanged
serverside-javascript
keymapping
asciiencoding
acts-as-taggable-on
cfile
onejar
angularjs-module
uptime
google-goggles
osmf
jmdns
gigaspaces
oncreate
documentviewer
ms-access-97
stumbleupon
ladon
demoscene
blackberry-os-v5
jtemplates
measure
nstreecontroller
renderaction
syncml
apache-config
automapping
drupal-gmap
drwatson
templatebinding
database-dump

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App