I have a requirement to integrate azure media player in an android app.
All I can see in the documentation is sample and information on how to add this in an HTML file.
I have a "...mainfest" file, and I need to play it from the android app.
I need to know if there is any SDK available for android, or do i need to host a page on server, which can play these videos?
Edited
I checked sample player here, when I pass my video URL to it, it loads video fine with or without "(format=m3u8-aapl-v3)"
But I am still unable to play it from android app.
I also tried to create an HTML page, but its also not playing the video.
This is what I did in HTML file.
<head>
</head>
<body>
<video id="vid1" autoplay controls width="640" height="400" >
<source src=".....ism/manifest(format=m3u8-aapl-v3)" />
</video>
</body>
UPDATE
If you want play it in HTML, I recommend you use official sample code, like below.
For more details, you can refer to the code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Azure Media Player</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--*****START OF Azure Media Player Scripts*****-->
<!--Note: DO NOT USE the "latest" folder in production. Replace "latest" with a version number like "1.0.0"-->
<!--EX:<script src="//amp.azure.net/libs/amp/1.0.0/azuremediaplayer.min.js"></script>-->
<!--Azure Media Player versions can be queried from //amp.azure.net/libs/amp/latest/docs/changelog.html-->
<script src="https://amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>
<link href="https://amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<!--*****END OF Azure Media Player Scripts*****-->
<!--Add Plugins-->
<!-- <script src="hotkeys.js"></script> -->
</head>
<body>
<h1>Plugin - Hot Keys</h1>
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"> </video>
<script>
var myOptions = {
autoplay: true,
controls: true,
width: "640",
height: "400",
poster: ""//,
// plugins: {
// hotkeys: {
// //optional settings
// "volumeStep": 0.1,
// "seekStep": 5,
// "enableMute": true,
// "enableFullscreen": true,
// "enableNumbers": true,
// "enableJogStyle": false
// }
// }
};
var myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([{ src: "https://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" }, ]);
</script>
<footer>
<br />
<p>© Microsoft Corporation 2016</p>
</footer>
</body>
</html>
PRIVIOUS
You can concatenate (format=m3u8-aapl-v3) at the end of the URL, can play this url with any video player.
For more details, you can refer to this post.
Related
I am trying to build an offline web application using openlayers as shown in the sample code below. However the map does not load with the error (as shown in the firebug):
Error: "https://c.tile.openstreetmap.org/4/6/6.png"
I read through other Q/As on this and found that I need to download some of the map layers (image/tile/vector) and refer it locally. But I guess there are other sub steps to it. Anyone who has already tried doing this and know exactly the steps to be done for it?
I came across this question in SO Offline Geographical Maps in Web Application after converting .osm to .map but it doen't have a detailed answer to how to set the offline map repository.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="myOfflineWebAppWebContent/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="myOfflineWebAppWebContent/js/ol.js" type="text/javascript"></script>
<title>Hello Open Layers</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
</body>
</html>
hi I am trying to get an instagram feed onto my website showing my user photos. I have put the javascript at the top of my page as follows:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>tomsaxby.com</title>
<!-- CSS ------------------------------------------------------------------------------------------- -->
<!-- Bootstrap --><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- EDITS -->
<link rel="stylesheet" href="css/style.css">
<!-- Fonts -->
<link rel="stylesheet" href="fonts/neuzeit/MyFontsWebfontsKit.css" type="text/css" />
<!-- CSS ------------------------------------------------------------------------------------------- -->
<script type="text/javascript" src="path/to/instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed({
get: 'user',
userId: 904401907,
accessToken: '904401907.1677ed0.27d4a579f194430cbe77c28af165aae1'
});
userFeed.run();
</script>
</head>
I have then put a div with he id of "instafeed" into the body of my page. but nothing displays either locally or when i upload my files? Does anyone know why this is?
The most likely cause of your problem, is that instafeed.js is trying to run before your page has been completely loaded.
To resolve this, make sure you have put <div id="instafeed"></div> on your page, and that you are loading instafeed.js after the page has been completely loaded:
$(document).ready(function() {
var feed = new Instafeed({
get: 'tagged',
tagName: 'awesome',
clientId: clientId
});
feed.run();
});
One other thing...something the instafeed page does NOT seem to mention...is to add a "limit"...this tells instagram how many images to drop in.. otherwise i suppose the default is zero...
I made mine: limit: '4'
would be a pretty helpful piece of info to put into the instructions!
see below:
<script type="text/javascript">
var feed = new Instafeed({
get: 'tagged',
tagName: 'cool',
clientId: '916c01b8624d43c7b4b76369aruc86a0',
limit: '4'
});
feed.run(); </script>
Your instafeed.js file is not properly being called up.
You have put this:
<script type="text/javascript" src="path/to/instafeed.min.js"></script>
The path/to/ before the instafeed.min.js needs to actually be a working path with your website info.
I have two meta tag in _Layout.cshtml master page and now i want to add meta tags in someone.cshtml view page.
and i also try with this code
put in _layout.cshtml master page #RenderSection("metatags",false);
put in someone.cshtml like #section metatags { <meta ... /> }
but not get success.
and also try with add meta tag jquery but not worked fine.
It should work.
Here's my master page _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
#RenderSection("metatags", false)
<title>My ASP.NET Application</title>
</head>
<body>
#RenderBody()
</body>
</html>
Here's the index.cshtml file
#section metatags
{
<meta name="test" content="test"/>
<meta name="test2" content="test"/>
}
<div>Page content</div>
The result
<html>
<head>
<meta charset="utf-8">
<meta name="test" content="test">
<meta name="test2" content="test">
<title>My ASP.NET Application</title>
</head>
<body>
<div>Page content</div>
</body>
</html>
I found a way that works for now.
This solution mostly use when multiple master page.
In the controllers / action assign whatever meta info you need for that view.
ViewBag.Title = "some title";
ViewBag.MetaDescription = "some description";
In the View or master page get whatever meta info you need for that view.
#if(ViewBag.MetaDescription != null)
{
<meta name="description" content="#ViewBag.MetaDescription" />
}
#if(ViewBag.MetaKeywords != null)
{
<meta name="keywords" content="#ViewBag.MetaKeywords" />
}
If are using nested layouts you'll need to follow this guideline:
#RenderSection in nested razor templates
The technique you're using should work, if it is not, maybe that's the reason.
But looking at the intended use in your own answer, if you only need to modify the keywords and description tags there are apis in NopCommrece for that.
In your master layout:
<meta name="description" content="#(Html.NopMetaDescription())" />
<meta name="keywords" content="#(Html.NopMetaKeywords())" />
and in the client cshtml files
#{
Html.AddMetaDescriptionParts(Model.MetaDescription);
Html.AddMetaKeywordParts(Model.MetaKeywords);
}
There are plenty of samples for this in the NopCommerce code.
here is a good sample on how to dynamically creating meta tags in asp.net mvc:
public string HomeMetaTags()
{
var strMetaTag = new StringBuilder();
strMetaTag.AppendFormat(#"<meta content='{0}' name='Keywords'/>","Home Action Keyword");
strMetaTag.AppendFormat(#"<meta content='{0}' name='Descption'/>", "Home Description Keyword");
return strMetaTag.ToString();
}
public ActionResult Index()
{
ViewBag.Message = "Welcome to ASP.NET MVC!";
ViewBag.MetaTag = HomeMetaTags();
return View();
}
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
#Html.Raw(ViewBag.MetaTag)
</head>
TL; DR: why is the location of the image different?
There seems to be some difference in the coordinate system between 1.3.0 and 1.3.12. Here are the HTML file test.html, working with the newly cloned and built fabric.js by myself ():
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="./fabric.js/dist/all.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<canvas id="c"></canvas>
</body>
</html>
and the JavaScript file test.js:
$(function(){
var canvas = new fabric.Canvas('c');
canvas.setWidth(window.innerWidth);
canvas.setHeight(window.innerHeight);
fabric.Image.fromURL('test.png', function(img) {
var group = new fabric.Group([img],
{
hasBorders: false,
hasControls: false,
selectable: true,
evented: true,
})
canvas.add(group);
});
});
The web page looks like
But if I change fabric.js to the version on the CDN, which is 1.3.0:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.3.0/fabric.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<canvas id="c"></canvas>
</body>
</html>
The web page will look like
The second case makes more sense for me. It puts the center of the image to (0,0). But in the first case it seems to put the image center to (image_width, image_height). So is this a bug? Or a feature of coordinate system for groups?
UPDATE: if simply using
$(function(){
var canvas = new fabric.Canvas('c');
canvas.setWidth(window.innerWidth);
canvas.setHeight(window.innerHeight);
fabric.Image.fromURL('test.png', function(img) {
canvas.add(img);
});
});
, the top left corner of the image will be attached to (0,0).
UPDATE 2: OK, I need to manually set {left: 0, top:0} for the group. But why?
What you're seeing is that originX/originY default values were changed to "left"/"top" from "center"/"center".
This was a very confusing behavior to almost anyone starting with Fabric and we finally got rid of it. You can see this breaking change in a changelog (between unreleased edge/dev version and latest stable 1.3.0)
https://github.com/kangax/fabric.js/blob/master/CHANGELOG.md
originX/originY represent what left/top values of an object are relative to. All objects' left/top used to be relative to their centers; now we're using more common system of left/top corner.
I have a view that should not be using a layout.
This is the controller action used :
def last
#video = Video.last
render layout: false
end
When I call the "show" view directly, it works, no layout are used.
Nonetheless, when I call that view by following a link then it actually loads the default layout with my view.
the link is present in a layout :
<%= link_to "last video", last_video_path %>
and the view :
<body marginwidth="0" marginheight="0">
<iframe type="text/html" width="100%" height="100%" frameborder="0"
src="http://www.youtube.com/embed/<%= #video %>" >
</iframe>
</body>
Any idea what I might be doing wrong ??
I finally found what was not working. In my layout, I have in the header :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= content_for?(:title) ? yield(:title) : "NBATopOfTheNight" %></title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
</head>
<body>
...
the line <%= javascript_include_tag "application" %> is added by twitter bootstrap and is responsible for rendering my views even when I specify no rendering.
Deleting this line make my project works :-)