Flowplayer Multiple Bitrate Streaming Error - javascript

I am using the free version of Flowplayer and within that I am trying to incorporate the Youtube style resolution picker. I am getting the error mentioned below, when I hit play.
200, Stream not found, NetStream.Play.StreamNotFound, clip: '[Clip] 'video-800-old_1080'
New to this so cant really figure out what is wrong. Somehow I believe it has something to do with the URL as all the videos mentioned in the bitrate array are present on my local machine.
Below is my code for trying to do stream with different bitrates
<html>
<head>
<style type="text/css">
.container{
margin: 0 auto;
width: 700px;
height: 450px;
border: 1px solid black;
}
</style>
<script type="text/javascript" src="../flowplayer-3.2.12.min.js"></script>
<!-- some minimal styling, can be removed -->
<link rel="stylesheet" type="text/css" href="style.css">
<title></title>
</head>
<body>
<div class="container">
<a
href="http://localhost/shivam/admin/uploads/videos/video-800-old_1080.mp4"
style="display:block;width:100%;height:100%;"
id="player">
<img src="flow_eye.jpg" width="100%" height="100%" alt="Search engine friendly content" />
</a>
<script>
flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", {
clip: {
autoPlay: true,
provider: 'rtmp',
// urlResolvers is needed here to point to the bitrate select plugin
urlResolvers: 'brselect',
bitrates: [
{ url: "mp4:video-800-old_1080", bitrate: 1080, isDefault: true,label: "1080 k"},
{ url: "mp4:video-800-old_420", bitrate: 420, label: "420 k" },
{ url: "mp4:video-800-old_320", bitrate: 320, label: "320 k" }
]
},
plugins: {
menu: {
url: "http://releases.flowplayer.org/swf/flowplayer.menu-3.2.12.swf",
items: [
// you can have an optional label as the first item
// the bitrate specific items are filled here based on the clip's bitrates
{ label: "select bitrate:", enabled: false }
]
},
brselect: {
url: "http://releases.flowplayer.org/swf/flowplayer.bitrateselect-3.2.13.swf",
// enable the bitrate menu
menu: true,
},
// RTMP streaming plugin
rtmp: {
url: "http://releases.flowplayer.org/swf/flowplayer.rtmp-3.2.12.swf",
netConnectionUrl: 'rtmp://s3b78u0kbtx79q.cloudfront.net/cfx/st'
},
// a content box so that we can see the selected bitrate. (for demonstation
// purposes only)
content: {
url: "http://releases.flowplayer.org/swf/flowplayer.content-3.2.8.swf",
top: 0,
left: 0,
width: 400,
height: 150,
backgroundColor: 'transparent',
backgroundGradient: 'none',
border: 0,
textDecoration: 'outline',
style: {
body: {
fontSize: 14,
fontFamily: 'Arial',
textAlign: 'center',
color: '#ffffff'
}
}
},
controls: {
tooltips: { buttons: true }
}
}
});
</script>
</div>
</body>
</html>

First, you getting error because you dont have RTMP Server, try using lighttpd.
Try the below code,
flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.16.swf", {
clip: {
autoPlay: true,
provider: 'lighttpd',
// urlResolvers is needed here to point to the bitrate select plugin
urlResolvers: 'brselect',
bitrates: [
{ url: "http://localhost/flowplayer/example/gangnam.flv", bitrate: 885, isDefault: true,label: "1080 k"},
{ url: "http://localhost/flowplayer/example/gangnam_1080.flv", bitrate: 885, label: "320 k" }
]
},
plugins: {
menu: {
url: "http://releases.flowplayer.org/swf/flowplayer.menu-3.2.12.swf",
items: [
{ label: "select bitrate:", enabled: false }
]
},
brselect: {
url: "http://releases.flowplayer.org/swf/flowplayer.bitrateselect-3.2.13.swf",
menu: true,
},
lighttpd: {
url: "flowplayer.pseudostreaming-3.2.12.swf"
},
content: {
url: "http://releases.flowplayer.org/swf/flowplayer.content-3.2.8.swf",
top: 0,
left: 0,
width: 400,
height: 150,
backgroundColor: 'transparent',
backgroundGradient: 'none',
border: 0,
textDecoration: 'outline',
style: {
body: {
fontSize: 14,
fontFamily: 'Arial',
textAlign: 'center',
color: '#ffffff'
}
}
},
controls: {
tooltips: { buttons: true }
}
}
});
When you give the URL of file, use proper bitrates else when you'll switch the resolution the video will start playing again.
Good luck!!!

Related

Whenever I use "ellipsis" for text wrapping, random characters show up? (Is it a charset problem?)

I am trying to wrap a text and put '...' after some length on my Cytoscape graph labels. I have this code:
style: [{
selector: 'node',
css: {
'label': 'data(id)',
'text-wrap': 'ellipsis',
'text-max-width': 10,
'text-justification': 'left',
'font-family': 'serif',
'color': 'red'
}
}]
However when I do this, random characters show up instead of the original text.
There was a similar question on Stack Overflow: text-overflow: ellipsis is displaying different character
In here, the accepted answer tells that the charset has to be utf-8 and the font should be supported by U+2026.
Thus I put this tag in my HTML:
<meta charset="UTF-8">
And my font family is serif, so I do not know what can solve the problem.
PS: This is the documentation that tells how to use Cytoscape text wrapping: https://js.cytoscape.org/#style/labels And I was able to wrap the text using the wrap option instead of ellipsis thus I do not think the code structure is wrong.
You can prevent this by using a function to calculate your labels. In the cytoscape.js stylesheet, you can do something like this:
style: [
{
selector: "node",
css: {
'label': function(node) {
if (node.data("name").length > 20) {
return `${node.data("name").substring(0, 20)}...`;
else {
return ${node.data("name");
}
},
height: "60px",
width: "60px"
}
},
...
In the code snippet, I used the ellipsis property and got no errors:
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
boxSelectionEnabled: false,
autounselectify: true,
style: [{
selector: "node",
css: {
content: "data(name)",
height: "60px",
width: "60px"
}
},
{
selector: "edge",
css: {
"target-arrow-shape": "triangle"
}
},
{
selector: ".multiline-manual",
style: {
"text-wrap": "wrap"
}
},
{
selector: ".multiline-auto",
style: {
"text-wrap": "ellipsis",
"text-max-width": 120
}
}
],
elements: {
nodes: [{
data: {
id: "n0",
name: "This is a very long name and all I have to do is to add a class!"
},
classes: "multiline-auto"
},
{
data: {
id: "n1",
name: "Shorter Text----------"
},
classes: "multiline-auto"
},
{
data: {
id: "n2",
name: "This shouldn't wrap"
},
classes: "multiline-manual"
},
{
data: {
id: "n3",
name: "This should\nwrap"
},
classes: "multiline-manual"
}
],
edges: [{
data: {
source: "n0",
target: "n1"
}
},
{
data: {
source: "n1",
target: "n2"
}
},
{
data: {
source: "n1",
target: "n3"
}
}
]
},
layout: {
name: "dagre",
padding: 5
}
}));
console.log(cy.nodes())
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
left: 0;
top: 0;
float: left;
position: absolute;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://unpkg.com/cytoscape#3.3.0/dist/cytoscape.min.js">
</script>
<script src="https://unpkg.com/jquery#3.3.1/dist/jquery.js"></script>
<!-- cyposcape dagre -->
<script src="https://unpkg.com/dagre#0.7.4/dist/dagre.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>

Particles.js not working properly in .NET Core

NET MVC Core and I am trying to use Particles.js. I have already tried referencing a few tutorials, but am unable to solve this issue. This is how it normally looks like. https://vincentgarreau.com/particles.js/#default
I got this however, with big and super laggy buttons and also it does not occupy full screen nor does it have the hover action (whereby the circle moves away as the mouse approaches). The onclick circle works though. And the configuration shouldn't be wrong, as I downloaded the default one.
Update: Just before posting I managed to make it full screen. However, the big buttons and lagginess remains.
The following is my codes so far. I tried to search the id or class but due to the lack of documentation it is quite hard to find. Hope someone who knows it can help! Thank you very much :)
#{
ViewData["Title"] = "Home Page";
}
<div id="particles-js" style="background-color: rgb(0, 0, 0); background-image: url(""); background-size: cover; background-repeat: no-repeat; ba">
<canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;"></canvas>
</div>
<script src="~/js/particles.js" data-turbolinks-track="reload" asp-append-version="true"></script>
<script>
particlesJS("particles-js", {
particles: {
number: {
value: 400,
density: {
enable: true,
value_area: 800
}
},
color: {
value: '#fff'
},
shape: {
type: 'circle',
stroke: {
width: 0,
color: '#ff0000'
},
polygon: {
nb_sides: 5
},
image: {
src: '',
width: 100,
height: 100
}
},
opacity: {
value: 1,
random: false,
anim: {
enable: false,
speed: 2,
opacity_min: 0,
sync: false
}
},
size: {
value: 20,
random: false,
anim: {
enable: false,
speed: 20,
size_min: 0,
sync: false
}
},
line_linked: {
enable: true,
distance: 100,
color: '#fff',
opacity: 1,
width: 1
},
move: {
enable: true,
speed: 2,
direction: 'none',
random: false,
straight: false,
out_mode: 'out',
bounce: false,
attract: {
enable: false,
rotateX: 3000,
rotateY: 3000
}
},
array: []
},
interactivity: {
detect_on: 'canvas',
events: {
onhover: {
enable: true,
mode: 'grab'
},
onclick: {
enable: true,
mode: 'push'
},
resize: true
},
modes: {
grab: {
distance: 100,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 200,
size: 80,
duration: 0.4
},
repulse: {
distance: 200,
duration: 0.4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
},
mouse: {}
},
retina_detect: false,
});
//var count_particles, stats, update;
//stats = new Stats;
//stats.setMode(0);
//stats.domElement.style.position = 'absolute';
//stats.domElement.style.left = '0px';
//stats.domElement.style.top = '0px';
//document.body.appendChild(stats.domElement);
//count_particles = document.querySelector('.js-count-particles');
//update = function () {
// stats.begin();
// stats.end();
// if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
// count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
// }
// requestAnimationFrame(update);
//};
//requestAnimationFrame(update);;
</script>
Update: I finally found the answer. To facilitate people who working on this in the future, make sure to use the download from the sidebar and not the one in the center.
Not this (the download in the center):
But this (the one at the bottom right side, "Download current config(json)"):

jwplayer 8 with pre-roll video and xml file

I try to configure the JW Player 8, make video + ads (pre-rolls). I also have key for JW Player which includes support for viewing advertising (pre-rolls) in the video. Please, help me to create video + ads(pre-roll) in JW Player 8?
<script type="text/javascript" src="https://www.x-art.com/members/player/v8/jwplayer.js?v=86"></script>
<script type="text/javascript">jwplayer.key="Rj7tDuYSCqZdNKNAqsjWoMDBdHhp1THggDFOUhr0Zj8=";</script>
<div id="ekcdnplayer"></div>
<script type="text/javascript">
var playerInstance = jwplayer("ekcdnplayer");
playerInstance.setup({
id:'ekcdnplayer',
sources: <?php echo $x; ?>,
aspectratio: "16:9",
startparam: "start",
primary: "html5",
preload: "auto",
image: "https://1.bp.blogspot.com/-G4MV85oRMc8/Wxq6x5dl3DI/AAAAAAAAEPE/d7YLJ3VY_Sc-Z3pp5KTtZdafUP_G4186QCLcBGAs/s1600/wait.jpg",
captions: {
color: "#f3f368",
fontSize: 16,
backgroundOpacity: 0,
fontfamily: "Helvetica",
edgeStyle: "raised"
},
logo : {
file: "",
link: "",
over: '1',
out: '1',
timeout: '7',
position:'top-left',
width: '60',
margin: '10',
hide: true,
},
tracks: [{
file: '/api/getsub.php?linksub=<?php echo $suben; ?>',
label: "English",
kind: "captions",
"default": true
}],
captions: {
color: '#FFFFFF',
fontSize: 20,
backgroundOpacity: 20
},
advertising: {
client:"vast",
admessage:"This is an ad pod. This ad ends in xx seconds.",
schedule:{
adbreak1: {
offset:'pre',
skipoffset: "5",
tag: '/api/vast1.xml'
},
adbreak2: {
offset:'1',
tag: ''
},
}
}
});

Plotly.js modebar, download as png, give png a name

I have a Plotly on my webpage and you can download it as a png by clicking the picture icon in the modebar. However when I click it, it downloads it as a png with the name new-plot, how can I give it a custom name?
My current code (var data is just data, so left it out) :
var layout = {
showlegend: true,
legend: {
x: 0,
y: 1
},
xaxis: {
title: 'Date',
titlefont: {
family: 'Courier New, monospace',
size: 18,
color: '#7f7f7f'
}
},
yaxis: {
title: 'Sales',
titlefont: {
family: 'Courier New, monospace',
size: 18,
color: '#7f7f7f'
}
}
};
var options = {
scrollZoom: true,
showLink: false,
modeBarButtonsToRemove: ['zoom2d', 'pan', 'pan2d', 'sendDataToCloud', 'hoverClosestCartesian', 'autoScale2d'],
displaylogo: false,
displayModeBar: true,
};
Plotly.newPlot('tester', data, layout, options);
Use Plotly.downloadImage
https://plot.ly/javascript/plotlyjs-function-reference/#plotlydownloadimage
Add this to your modebar setup for the button callback:
Plotly.downloadImage({
filename: 'customNamedImage',
format: 'png', //also can use 'jpeg', 'webp', 'svg'
height: 500,
width: 500
});
Edit:
I ran a custom example and I think you will want to custimze your own download button in the modebar, like so:
Plotly.newPlot(gd, [{
y: [1, 2, 1],
line: { shape: 'spline' }
}], {
title: 'custom modebar button',
width: 400,
height: 700
}, {
showTips: false,
displayModeBar: true,
modeBarButtons: [[{
name: 'custom download button',
icon: Plotly.Icons.camera,
click: function (gd) {
Plotly.downloadImage(gd, {
filename: 'your_custom_name',
format: 'jpeg',
width: gd._fullLayout.width,
height: gd._fullLayout.height
})
}
}, 'toImage'
], []]
})
There's an easier way to do this in newer versions of Plotly (v1.38+). Use the toImageButtonOptions parameter in the config like this:
Plotly.newPlot(graphDiv, data, layout, {
toImageButtonOptions: {
filename: 'image_filename',
width: 800,
height: 600,
format: 'png'
}
});
You can leave out options you don't need to use the defaults.

Putting Twitter Widget's Javascript within <Head> tags, but have it rendered in <Body>

I'm working with the Twitter search widget and currently I have the javascript embedded in the within the body tags of the HTML, something like this:
<body>
<script charset="utf-8" src="https://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'faves',
rpp: 1,
interval: 7200000,
title: '',
subject: '',
width: 500,
height: 65,
theme: {
shell: {
background: '#a4c9b9',
color: '#ffffff'
},
tweets: {
background: '#a4c9b9',
color: '#ffffff',
links: '#444444'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('exampleuser').start();
</script>
</body>
Instead though, I'd rather move all that javascript to the header (or maybe the footer?) tag, then simply have it rendered in the body without the tags. Is there a simple way to do this?
You can use one of either native JS...
window.onload = function() {
// your code here
};
or jQuery...
$(document).ready(function() {
// your code here
});
...to ensure the code will not run until the document has finished loading.
This explains the slight difference between window.onload and $(document).ready().
Another option would be to wrap your code in a named function and call it in the body somewhere but you would still have to put it in <script> tags.
EDIT: Using window.onload...
<html>
<head>
<script>
window.onload = function() {
new TWTR.Widget({
version: 2,
type: 'faves',
rpp: 1,
interval: 7200000,
title: '',
subject: '',
width: 500,
height: 65,
theme: {
shell: {
background: '#a4c9b9',
color: '#ffffff'
},
tweets: {
background: '#a4c9b9',
color: '#ffffff',
links: '#444444'
}
},
features: {
scrollbar: true,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('exampleuser').start();
};
</script>
</head>
<body></body></html>

Categories