I have embed Azure Media Player in WebView. Its working fine on android emulator and iOS simulator. Its also working fine on android real device in debug but its not working on android devices in release version. For iOS its not working on real devices in debug and release version.
Here is code sample...
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://amp.azure.net/libs/amp/2.3.6/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="https://amp.azure.net/libs/amp/2.3.6/azuremediaplayer.min.js"></script>
</head>
<body>
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"></video>
<script>
var myOptions = {
"nativeControlsForTouch": false,
controls: true,
autoplay: true,
width:1000,
height: "1000",
}
myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([
{
"src": "https://amssamples.streaming.mediaservices.windows.net/3b970ae0-39d5-44bd-b3a3-3136143d6435/AzureMediaServicesPromo.ism/manifest",
"type": "application/vnd.ms-sstr+xml"
}
]);
</script>
</body>
</html>;
return (
<WebView
source={{ html: htmlContent }}
/>
)
```
Your help would be greatly appreciated! Thanks!
If you are building native applications on Android, i would highly recommend that you use ExoPlayer and not AMP.
For iOS, you should also always default to use the native built in AvPlayer framework. AMP does not add much (or any) value on the iOS side, as it just hands off control to the native iOS media framework (AVPlayer) where all the processing and parsing of HLS is going to happen anyways.
Have you already tested your streams playing back in iOS in the native player? Did you pass the HLS manifest to the player and not the Smooth Streaming manifest?
Related
I have created a http stream with libvlc. See the following code:
LibVLC libVLC;
MediaPlayer mp;
libVLC = new LibVLC();
mp = new MediaPlayer(libVLC);
mp.TimeChanged += Mp_TimeChanged;
Media media = new Media(libVLC, new Uri("http://listen.technobase.fm/tunein-aac-hd-pls"));
media.AddOption(":sout=#transcode{vcodec=none,acodec=mp3,ab=128,channels=2,samplerate=44100,scodec=none}:http{dst=:8080/stream.mp3}");
media.AddOption(":sout-keep");
media.AddOption(":no-sout-all");
mp.Play(media);
If I use a html file with the follwing code the stream is working fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<audio controls="controls" runat="server" autoplay="autoplay">
<source src="http://innoszorn.ddnss.de:8080/stream.ogg" type="audio/ogg" />
Your Browser does not support this stream!
</audio>
</body>
</html>
But if I use this file as an embedded file on my IIS server with Windows Server 2019 the stream doesn't start. The Mime type installed is on the IIS and it's exact the same code.
Is there any additional option I have to activate in the IIS to start the stream?
I am trying to use a Web API to get some mapping data. To enable this I have to register my domain name with the supplier, they issue me with a unique key for the domain name and then check that calls from the domain use the key.
When the API is called to return mapping data, the supplier is expecting something like:
<please-send-maps-to www.mydomainname.com, key="whatevermykeyis">
however, I am using new Google Sites to build my website and the supplier is actually receiving something like:
<please-send-maps-to 1841824776-atari-embeds.googleusercontent.com, key="whatevermykeyis">
So my API calls are always rejected. My domain provider tells me this is because my transactions are going through Google security layers and so translate my calls to a different domain name.
Anyway, does anyone know how I can make the API calls with my true domain name and make the API work?
Here is the embed code I use to make the api call to return the mapping details:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="authenticity_token" name="csrf-param" />
<title>Navionics Web API v2</title>
<link rel="stylesheet" href="https://webapiv2.navionics.com/dist/webapi/webapi.min.css">
<script type="text/javascript" src="https://webapiv2.navionics.com/dist/webapi/webapi.min.no-dep.js"></script>
<style type="text/css">
html, body, .test_map_div {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body data-root="https://webapiv2.navionics.com/dist/webapi/images" >
<div class="test_map_div" ></div>
<script>
var webapi = new JNC.Views.BoatingNavionicsMap({
tagId: '.test_map_div',
center: [ 12.0, 46.0 ],
navKey: 'Navionics_webapi_mynavkey'
});
webapi.showSonarControl(false);
</script>
</body>
</html>
I have uploaded my MP4 files to Azure then converted them to H264 1080p Streaming format.
When I try to play it from the player, it gives me the following error:
The same for all browsers. When I download the processed MP4 files from the underlying storage account, they play just fine.
This is my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link href="//amp.azure.net/libs/amp/1.8.1/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="//amp.azure.net/libs/amp/1.8.1/azuremediaplayer.min.js"></script>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<video id="vid1" class="azuremediaplayer amp-default-skin amp-big-play-centered" autoplay controls width="640" height="400" data-setup='{"logo": { "enabled": false }, "controls": true, "autoplay": false, "nativeControlsForTouch": true}'>
<source src="https://mediatest12.streaming.mediaservices.windows.net/96fe4710-a1e2-4384-a849-93a0fceb1d40/big_buck_bunny_1280x720_30mb.ism/manifest(format=mpd-time-csf)" 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>
<video id="vid2" class="azuremediaplayer amp-default-skin amp-big-play-centered" autoplay controls width="640" height="400" data-setup='{"logo": { "enabled": false }, "controls": true, "autoplay": false, "nativeControlsForTouch": true}'>
<source src="https://igmediawe.streaming.mediaservices.windows.net/27472dba-a353-429e-b305-2879e32f65ea/wi005-packing_ecomm_pack_scan.ism/manifest(format=mpd-time-csf)"
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>
</body>
</html>
The first video works, the other doesn't.
Here is the page I'm trying to use it on: the exact same player settings work with another video:
https://opreports.azurewebsites.net/media.html
What am I doing wrong? I get the same error if I try to play it from within the Azure Portal as well.
The originally uploaded source video:
MP4
H.264/MPEG-4 AVC
1680 x 924
30fps
No audio stream
I got help from Microsoft support eventually, quoting their answer below.
"The issue is that the second video is video-only. According to the bottom of http://amp.azure.net/libs/amp/latest/docs/features.html, Azure Media Player does not support audio-only or video-only files. They must contain both audio and video. The reason for this is the support for certain features within the Media Source Extensions in most browsers and how we implement them.
Because of this we included a feature in the Azure Media Services Explorer (http://aka.ms/amse) that allows you to add a silent audio track to a video-only source file or a black screen to an audio-only file:
To get to this, right click on the video you want to encode, choose Encode → Encode asset(s) with Media Encoder Standard (MES)... → Advanced tab."
I'm trying to use an SVG file in an IMG tag. In my local environment works, but when pushing to the server it doesn't. I assume I have an issue with the type of document served, but can't figure how to fix it. Here's the code that loads the SVG:
<img src="images/icon-reputation.svg" />
Here's my DOCTYPE and header info:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>SVG</title>
</head>
Any clues? Thanks.
Make sure your web server is serving the SVG files with the correct ContentType. You can check what the type is by looking in the Net/Network section of your (desktop) browser developer tools.
The way you configure the server depends on the server of course. But, for example, for apache it is:
AddType image/svg+xml svg
How can i setup kendo ui with mvc4. I want use its themas and grid and all controls in my web application.
I have use http://demos.kendoui.com/themebuilder/web.html but how do i apply generated themas in my website. I am little bit confused with kendo, I am new with it. Please suggest me how can I configure kendo on mvc4 and use its all functionality.
Using : - MVC 4 , html 5 and c#
Thanks!!
How can i setup kendo ui with mvc4
In exactly the same way you would set it up with PHP. Or with a Java Servlet. KendoUI is a client side framework which is server side agnostic. It doesn't matter which server side technology you are using.
I want use its themas and grid and all controls in my web application.
Great, go ahead. Head over to the documentation, read it, roll up your sleeves and integrate into your application.
Create a new ASP.NET MVC 4 application using the Empty template
Add a HomeController to serve up a view:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
And of course a corresponding ~/Views/Home/Index.cshtml view:
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="//cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css" />
</head>
<body>
<input id="dropDownList" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<script type="text/javascript">
$("#dropDownList").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Item1", value: "1" },
{ text: "Item2", value: "2" }
]
});
</script>
</body>
</html>
As you can see there's absolutely nothing MVC specific here. You could have served this markup from any server side framework. All you need is pick a theme, reference it from the Kendo CDN, reference the Kendo scripts at the end of your DOM from the CDN and start playing with it.
But the most important thing if you want to have some progress is to RTFM where the guys from Telerik (and colleagues of mine) have spent a lot of time to documenting everything you need to know.
There is a tutorial on the Kendo Docs site that will walk you through it step by step.
Hello Kendo UI - Add Kendo UI
and
Kendo Music Store - Project Setup