I'm reading the docs for the new Azure Media Player (https://aka.ms/ampdocs) but I still can't figure out how to turn the AMS logo off. Should I be setting
amp.Player.LogoConfig.enabled = false
? That doesn't work for me. Do I set something on the <video> tag? I can't find a sample that shows me how.
I faced this problem today as well. And here is solution
<video id="azuremediaplayer"
class="azuremediaplayer amp-default-skin amp-big-play-centered"
controls autoplay
width="640"
height="360"
poster="<Your poster>"
data-setup='{"logo": { "enabled": false }, "techOrder": ["azureHtml5JS", "flashSS", "silverlightSS", "html5"], "nativeControlsForTouch": false}' tabindex="0">
<source src="<Your movie>" />
<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>
Hope that help :)
To turn off the logo when setting things up with js you can use the following example.
<script>
var myPlayer = null;
if (!!myPlayer) {
myPlayer.dispose();
}
var myOptions = {
"nativeControlsForTouch": false,
"logo": { "enabled": false },
autoplay: true,
controls: true,
width: "640",
height: "400",
poster: ""
};
myPlayer = amp("vid1", myOptions);
myPlayer.currentTime(30);
myPlayer.src([{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" }, ]);
</script>
Using the following scripts
<link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>
<script>
amp.options.flashSS.swf = "//amp.azure.net/libs/amp/latest/techs/StrobeMediaPlayback.2.0.swf"
amp.options.flashSS.plugin = "//amp.azure.net/libs/amp/latest/techs/MSAdaptiveStreamingPlugin-osmf2.0.swf"
amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/latest/techs/SmoothStreamingPlayer.xap"
</script>
and HTML tag looking like this.
<video id="vid1" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"> </video>
Using "logo": { "enabled": false } won't work when using Azure Media Player v2.0,
So, this CSS hack will do the trick.
.amp-content-title {
display: none;
}
-- Update --
Or as mentioned in this comment, just upgrade to the version 2.1.2 where this issue was fixed (and the "logo": { "enabled": false } should be working fine again)
Related
I am using JW player 7.8. I am trying to set the player to play my live stream inside JW player, and it should be playable on iPhone.
To my understanding, I have to use HTML5 version of JW Player. I have a HLS source: http://server-ip:1935/live/mystream/playlist.m3u8 and my javascript code looks something like this:
jwplayer('my-stream').setup({
width: '100%',
height: '100%',
stretching: 'uniform',
playlist: [{
sources: [{
file: 'http://server-ip:1935/live/mystream/playlist.m3u8'
}}]
}],
primary: 'html5',
modes: [
{ type: "html5" },
{ type: "flash", src: "player.swf" }
]
});
And I am getting an error on my iPhone:
Error loading media: File could not be played
I have found how to test it with site: http://demo.jwplayer.com/developer-tools/http-stream-tester/ but still no luck in playing the m3u8 file on iPhone. (Should I change the file type?)
I am not sure what I am missing?
<script src="CLOUD_HOSTED_PLAYER.js"></script>
// It should be 7.8.7 at the time of writing
<div id="container">Loading Video...</div>
<script>
var playerone = jwplayer("container");
playerone.setup({
file: "http://server-ip:1935/live/mystream/playlist.m3u8",
width:"80%",
aspectratio:"16:9"
});
</script>
I am completely new to Angularjs and haven’t been doing any code for ages. I started setting up my website again with Angularjs. I have a main page and an about page, to which the user gets via ngRoute on ng-click (or hitting space). Once on the about page, the user can go back by clicking somewhere on the page and so on.
App.js
var app = angular.module("MyApp", ["ngRoute"]);
app.config(function($locationProvider, $routeProvider) {
$routeProvider
.when("/teaser", {
controller:"teaserCtrl",
templateUrl:'teaser.html'
})
.when("/about", {
controller:"aboutCtrl",
templateUrl: "about.html"
})
.otherwise({
redirectTo:"/teaser"
})
});
app.controller("mainCtrl", function($scope, $http, $location) {
$scope.v = {
inverted: false,
display: true,
offwhite: true,
}
$scope.$on("space", function() {
if ($scope.v.teaser) {
$location.path("/about")
$scope.v.teaser = false
} else {
$location.path("/teaser")
$scope.v.teaser = true
}
$scope.$apply()
})
$scope.goHome = function(){
$scope.$broadcast("goHome")
}
});
app.directive("ngMobileClick", [function () {
return function (scope, clickElement, attrs) {
clickElement.bind("touchstart click", function (e) {
e.preventDefault();
e.stopPropagation();
scope.$apply(attrs["ngMobileClick"]);
});
}
}])
HTML
<body ng-controller="mainCtrl as main" ng-mobile-click="goHome()" ng-class="{inverted: v.inverted, bg: v.offwhite}" space>
<div class="content" ng-view ng-hide="v.display"></div>
//My body code
<script ng-init="sw = 'some website'; id="about.html" type="text/ng-template">
<div class="about">
<p class="text" ng-click="next(); $event.stopPropagation()">
<p>some text</p>
<br>
<a ng-href="{{mail}}" ng-click="$event.stopPropagation()">some address</a>
</p>
</div>
</script>
</body>
The code for the about page is written into a script and it has hyperlinks (ng-href). Now my issue: As you can see, I changed my ng-click to ng-mobile-click for the body-section. If I also change it in the script for the hyperlinks, something weird is happening which I can’t really figure out (links change to hover color, but still no redirection to the ng-href.
For the desktop version, the click is triggering ngRoute, but I can also click the links. For the mobile version this is not possible any more. Any ideas how I can fix this? I know, there is no hovering possible, but somehow I need to detect the hyperlinks also on mobile devices without being redirected to the main-page.
As I said: this is my first try with Angularjs and I haven’t done any code for a while, please be as clear as possible!
There is another controller for teaser/about which I haven’t put here, as well as the directive for the keyup.
Any ideas or suggestions? Thank you so much in advance!
I have a problem I do not know how to solve, I do not know if it's a bug of 'azure media player' but when I view a streaming video shows me this error "'Uncaught Error: cannot find the request in the request queue azuremediaplayer.min.js (2,338210)' but if I see a local video as a mp4 does not give me any problems. What could be the problem? Excuse my English.
By the way, I'm using Ripple to emulate Android, if I visualize from a physical device does not give me problems.
Thanks
(function () {
"use strict";
document.addEventListener('deviceready', onDeviceReady.bind(this), false);
var myOptions = {
"nativeControlsForTouch": false,
controls: false,
autoplay: false,
width: "640px",
height: "360px",
poster: "",
logo: {
enabled: false
}
}
var myPlayer = amp("azuremediaplayer", myOptions);
function onDeviceReady() {
// Handle the Cordova pause and resume events
document.addEventListener( 'pause', onPause.bind( this ), false );
document.addEventListener( 'resume', onResume.bind( this ), false );
// TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
//var element = document.getElementById("deviceready");
//element.innerHTML = 'Device Ready';
//element.className += ' ready';
myPlayer.src([
{
//"src": "movie/Rutina.mp4",
//"type": "video/mp4"
"src": "http://amssamples.streaming.mediaservices.windows.net/830584f8-f0c8-4e41-968b-6538b9380aa5/TearsOfSteelTeaser.ism/manifest",
"type": "application/vnd.ms-sstr+xml",
"protectionInfo": [
{
"type": "AES",
"authenticationToken": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cm46bWljcm9zb2Z0OmF6dXJlOm1lZGlhc2VydmljZXM6Y29udGVudGtleWlkZW50aWZpZXIiOiI5ZGRhMGJjYy01NmZiLTQxNDMtOWQzMi0zYWI5Y2M2ZWE4MGIiLCJpc3MiOiJodHRwOi8vdGVzdGFjcy5jb20vIiwiYXVkIjoidXJuOnRlc3QiLCJleHAiOjE3MTA4MDczODl9.lJXm5hmkp5ArRIAHqVJGefW2bcTzd91iZphoKDwa6w8"
}
]
}
]);
myPlayer.autoplay(true);
};
function onPause() {
// TODO: This application has been suspended. Save application state here.
};
function onResume() {
// TODO: This application has been reactivated. Restore application state here.
};
} )();
<!DOCTYPE html>
<html>
<head>
<!--
Customize the content security policy in the meta tag below as needed. Add 'unsafe-inline' to default-src to enable inline JavaScript.
For details, see http://go.microsoft.com/fwlink/?LinkID=617521
-->
<meta http-equiv="Content-Security-Policy" content="default-src http://amp.azure.net 'self' data: gap: blob: https://ssl.gstatic.com http://amssamples.streaming.mediaservices.windows.net 'unsafe-eval'; style-src 'self' 'unsafe-inline'; connect-src 'self'; media-src http://localhost:4400/ blob:">
<title>Mobile</title>
<link href="lib/ionic/release/css/ionic.css" rel="stylesheet" />
<link href="http://amp.azure.net/libs/amp/1.6.3/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet" />
<script src="http://amp.azure.net/libs/amp/1.6.3/azuremediaplayer.min.js"></script>
</head>
<body>
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered"></video>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script src="lib/ionic/release/js/ionic.bundle.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
Unfortunately, using an emulator for video playback can be an unreliable testing scenario. The issue you're seeing could very well be unique to the emulator itself, which can be dependent on the performance of the machine your emulator is running on as well as the capabilities of the emulator.
You are better of testing your code on a physical device, especially if the issue is not occurring on it.
Use this code..first time it is play rtmp live streaimg.but now,This Player is loaded only.No play
flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
clip: {
url: 'livestream',
provider: 'rtmp',
live: true
},
plugins: {
// RTMP streaming plugin
rtmp: {
url: 'flowplayer.rtmp-3.2.3.swf',
netConnectionUrl: 'rtmp://domain.com/hiox'
}
}
});
Please help me
I think your URL is wrong as well as check out your streaming server, In my case it is red5.
Nowadays android and ios not supporting flash. So use HLS or Dash instead.
<!doctype html>
<html>
<head>
<title>Basic RTMP with red5 : Flowplayer</title>
</head>
<body>
<div id="wowza" style="width:644px;height:276px;margin:0 auto;text-align:center; background-color: red;">
</div>
<script src="http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js"></script>
<script>
$f("wowza", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
clip: {
//here the url is the link on which streaming is on
url: 'rtmp://000.00.208.207/live/141769?key=141769',
scaling: 'fit',
provider: 'red5'
},
plugins: {
red5: {
// here red5 is the streaming server, change if your server name is other
url: "flowplayer.rtmp-3.2.13.swf",
// netConnectionUrl defines where the streams are found
netConnectionUrl: 'rtmp://000.00.208.207/live/'
}
},
});
</script>
</body>
</html>
I had the same issue, according to the Edgecast documentation you should use the subscribe parameter:
flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
clip: {
url: 'livestream',
provider: 'rtmp',
live: true
},
plugins: {
rtmp: {
url: 'flowplayer.rtmp-3.2.3.swf',
netConnectionUrl: 'rtmp://domain.com/hiox',
subscribe: true
}
}
});
EDIT: Fixed typo.
Have a read of the RTMP docs.
I have used flowplayer successfully for live streaming in the past. The difference between my config and yours is I have "subscribe: true" in my rtmp section. This was with EdgeCast as my rtmp server but other providers expect it as well.
I just setup flowplayer to play rtmp streams, but for some reason I need to click on the splash screen (Play stream text) to start the video even though I have autoPlay: true.
Is this a bug, or am I missing some configuration settings?
<!-- video -->
<div id="stream" class="stream" style="width: 1000px; height: 650px; display: block;">
Play stream text
</div>
<script type="text/javascript">
flowplayer("stream", "/flowplayer/flowplayer-3.2.7.swf", {
clip: {
url: 'mystream',
live: 'true',
provider: 'rtmp',
scaling: 'orig',
autoPlay: true
},
plugins: {
rtmp: {
url: '/flowplayer/flowplayer.rtmp-3.2.3.swf',
netConnectionUrl: 'rtmp://mms.mysite.com/live/'
}
},
canvas: {
backgroundGradient: 'none'
}
});
</script>
I guess the reason is that the so called splash screen should not be used as the way you suggest. If you put anything between the div, or as the documents to use , it always becomes a click-able area and the autoPlay true will come into place only when the player being really loaded (after you clicked).
I think the better way to go for the splashscreen would to use the recommended way in the document: http://flowplayer.org/documentation/skinning/