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.
Related
I am trying to set up a website with Svelte for the frontEnd and Sails for the backend.
My problem is that I can't display my Svelte public build as my Sails default web page.
I want to keep the organization below (or maybe something similar) and have my Svelte public build page when I go on 'http://myserver:1337' instead of having the default Sails page : file organization
PS: I am using Node: v14.4.0, Sails: v1.2.4 and Svelte: v6.14.5.
Thank you all :)
You could try something like:
Compile Svelt to build into the /public directory on Sails.js.
Open your rollup.config.js and change the path of your public/build/bundle.js and public/build.bundle.css to the public sails path, i.e. "../server/public...".
Configure /task/pipeline.js to include the compiled js and css files:
// tasks/pipeline.js
var cssFilesToInject = [
'css/**/global.css',
'css/**/bundle.css',
'css/**/*.css',
];
var jsFilesToInject = [
'js/**/bundle.js',
'js/**/*.js'
];
Create a controller to load the index file:
// router.js
'/*': { action: 'index', skipAssets: true, skipRegex: /^\/api\/.*$/ },
The excluded "/api" routes is to allow you to configure the CRUD routes.
The index controller:
module.exports = {
friendlyName: 'View homepage',
description: 'Display a compiled index page',
exits: {
success: {
statusCode: 200,
viewTemplatePath: 'pages/index'
},
},
fn: async function () {
return {};
}
};
And the index page you could include the template index.html or create your own index.ejs to load the static content, the same you configured before:
// views/templates/template.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<!--STYLES-->
<!--STYLES END-->
</head>
<body>
<!--TEMPLATES-->
<!--TEMPLATES END-->
<%- body %>
<!-- exposeLocalsToBrowser ( ) %>
<!--SCRIPTS-->
<!--SCRIPTS END-->
</body>
</html>
And the index.ejs:
// views/pages/index.ejs
<!-- Nothing here I mean -->
Thank you for your answer it helps me to understand how does it works.
I am sorry but I did not follow your tutorial exactly (because I was not able to understand what I was supposed to do ;) ).
I edit the rollup.config.js as :
import svelte from 'rollup-plugin-svelte';
import resolve from '#rollup/plugin-node-resolve';
import commonjs from '#rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
const production = !process.env.ROLLUP_WATCH;
const BUILD_PATH = '../server/assets';
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: `${BUILD_PATH}/build/bundle.js`
},
plugins: [
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file - better for performance
css: css => {
css.write(`${BUILD_PATH}/build/bundle.css`);
}
}),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration -
// consult the documentation for details:
// https://github.com/rollup/plugins/tree/master/packages/commonjs
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
// In dev mode, call `npm run start` once
// the bundle has been generated
!production && serve(),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload(BUILD_PATH),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser()
],
watch: {
clearScreen: false
}
};
function serve() {
let started = false;
return {
writeBundle() {
if (!started) {
started = true;
require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
stdio: ['ignore', 'inherit', 'inherit'],
shell: true
});
}
}
};
}
And I move my files is the assets as :
file organization
Then I deleted the homepage.ejs in server/views/pages/
And it works :) !
Thank you again for your quick answer
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 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.
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)
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/