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/
Related
I am trying to take pictures from an Ionic 4 PWA application.
I read this docs from Ionic team and implemented all the proposed steps... (https://capacitor.ionicframework.com/docs/guides/ionic-framework-app/)
The (weird) result can be seen in the picture below:
When the camera prompt seen in this picture is shown, Chrome console prints out an object called MediaStreamTrack with this values:
kind: "video"
id: "6250dfa4-d9aa-4a87-ab9f-ae085f929c3f"
label: "screen-capture-recorder"
enabled: true
muted: false
onmute: null
onunmute: null
readyState: "live"
onended: null
contentHint: ""
proto: MediaStreamTrack
When I click in the button to take picture, I can see this message:
Unable to take photo! DOMException: setOptions failed - pwa-camera.entry.js:259
I have used the sample code the Ionic team presented in the docs:
export class Tab2Page {
photo: SafeResourceUrl;
constructor(
private sanitizer: DomSanitizer
) { }
async takePicture() {
const image = await Plugins.Camera.getPhoto({
quality: 100,
allowEditing: false,
resultType: CameraResultType.DataUrl,
source: CameraSource.Camera
});
this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
}
}
And...
<ion-content>
<img [src]="photo">
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
<ion-fab-button (click)="takePicture()">
<ion-icon name="camera"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-content>
I changed everything in this code trying to figure out what is going wrong, but nothing seem to fix this behavyour.
Can anyone point me in the right direction?
My Chrome version is 79.0.3945.79
Thanks in advance.
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'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)
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.