i have a problem when i try use the playlist plugin of video js like that example:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Playlist Tester Perform</title>
<style type="text/css">
.video-js {
float: left;
margin: 15px;
width: 440px;
height: 280px;
}
.vjs-playlist {
width: 250px;
float: left;
margin: 15px;
}
</style>
</head>
<body>
<video id="myPlayerID"
data-account="3676484087001"
data-player="04ac0699-ca6b-449b-a2b6-0f14b4a7893b"
data-embed="default"
class="video-js" controls></video>
<ol class="vjs-playlist"></ol>
<script src="//players.brightcove.net/3676484087001/04ac0699-ca6b-449b-a2b6-0f14b4a7893b_default/index.min.js"></script>
<script type="text/javascript">
videojs('myPlayerID').ready(function () {
var myPlayer = this;
myPlayer.playlist([{
"sources": [{
"src": "http://solutions.brightcove.com/bcls/assets/videos/Sea_SeaHorse.mp4", "type": "video/mp4"
}],
"name": "Seahorse",
"thumbnail": "http://solutions.brightcove.com/bcls/assets/images/Sea_Seahorse_poster.png",
"poster": "http://solutions.brightcove.com/bcls/assets/images/Sea_Seahorse_poster.png"
}, {
"sources": [{
"src": "http://solutions.brightcove.com/bcls/assets/videos/Sea_Anemone.mp4", "type": "video/mp4"
}],
"name": "Sea Anemone",
"thumbnail": "http://solutions.brightcove.com/bcls/assets/images/Sea_Anemone_poster.png",
"poster": "http://solutions.brightcove.com/bcls/assets/images/Sea_Anemone_poster.png"
}, {
"sources": [{
"src": "http://solutions.brightcove.com/bcls/assets/videos/Tiger.mp4", "type": "video/mp4"
}],
"name": "Tiger",
"thumbnail": "http://solutions.brightcove.com/bcls/assets/images/Tiger_poster.png",
"poster": "http://solutions.brightcove.com/bcls/assets/images/Tiger_poster.png"
}, {
"sources": [{
"src": "http://solutions.brightcove.com/bcls/assets/videos/Sea_ClownFish.mp4", "type": "video/mp4"
}],
"name": "Clownfish",
"thumbnail": "http://solutions.brightcove.com/bcls/assets/images/Sea_ClownFish_poster.png",
"poster": "http://solutions.brightcove.com/bcls/assets/images/Sea_ClownFish_poster.png"
}, {
"sources": [{
"src": "http://solutions.brightcove.com/bcls/assets/videos/Sea_LionFish.mp4", "type": "video/mp4"
}],
"name": "Lionfish",
"thumbnail": "http://solutions.brightcove.com/bcls/assets/images/Sea_LionFish_poster.png",
"poster": "http://solutions.brightcove.com/bcls/assets/images/Sea_LionFish_poster.png"
}]);
});
</script>
</body>
</html>
When i change the videos links to my local folder ("src": "/files/convert/videos/38472531Test.mp4", "type": "video/mp4"), the playlist doesn't advance to the next video. I think it is a problem of ffmpeg conversion but i'm not sure of that.
PD:The problem is only in the playlist not in the playing
i have just been having this same issue. I worked out on mine that if i set the url for the video file to http://myip/path to video file instead of giving it a local link to the file mine starts to auto play. Is this the case on yours?
I assume that this is a bug in the playlist plugin but it seems to work as a workaround in my case.
Related
let styleJson = JSON.parse(`
[{
"selector": "node",
"style": {
"label": "data(id)",
"height": "data(height)",
"width": "data(width)",
"text-valign": "center",
"text-halign": "center"
}
}, {
"selector": "node.begin-end",
"style": {
"shape": "ellipse",
"width": "70",
"height": "30"
}
}, {
"selector": "node.if",
"style": {
"shape": "diamond"
}
}, {
"selector": "edge",
"style": {
"width": 2,
"label": "data(id)",
"curve-style": "taxi"
}
}, {
"selector": "edge.true",
"style": {
"taxi-direction": "rightward"
}
}, {
"selector": "edge.false",
"style": {
"taxi-direction": "leftward"
}
}]
`);
let cy = cytoscape({
container: document.getElementById('cy'),
style: styleJson,
elements: {
nodes: [{
data: {
id: 'begin'
},
classes: 'begin-end'
},
{
data: {
id: 'if',
width: "70",
height: "30"
},
classes: 'if'
},
{
data: {
id: 'end',
width: "70",
height: "30"
},
classes: 'begin-end'
}
],
edges: [{
data: {
id: 'n1',
source: 'begin',
target: 'if'
}
},
{
data: {
id: 'n2',
source: 'if',
target: 'end'
},
classes: 'true'
},
{
data: {
id: 'n3',
source: 'if',
target: 'end'
},
classes: 'false'
}
]
}
});
doLayout();
function doLayout() {
let layoutOpts = {
name: 'breadthfirst',
directed: true
};
cy.layout(layoutOpts).run();
}
#cy {
width: 400px;
height: 400px;
display: block;
border: 1px solid black;
margin: 0 auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cytoscape</title>
</head>
<body>
<div id="cy"></div>
<script src="https://cdn.jsdelivr.net/npm/cytoscape#3.17.1/dist/cytoscape.min.js"></script>
</body>
</html>
I just want to split the 2 edges coming from IF node.
The direction is specified (leftward/rightward), but I don't know how to make it working...
I have a label which is painted inline with edge and by this is not rendered well.
Is there a way to add something like background shape to the edge text, so that edge line is not visible at the label area?
You can add classes to labels when initializing the cytoscape stylesheet:
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
boxSelectionEnabled: false,
autounselectify: true,
style: [{
selector: "node",
css: {
"label": "data(label)",
"text-valign": "center",
"text-halign": "center",
"height": "60px",
"width": "60px"
}
},
{
selector: "edge",
css: {
"target-arrow-shape": "triangle"
}
},
{
selector: "edge[label]",
css: {
"label": "data(label)",
"text-rotation": "autorotate",
"text-margin-x": "0px",
"text-margin-y": "0px"
}
},
{
selector: ".background",
css: {
"text-background-opacity": 1,
"color": "#fff",
"text-background-color": "#000"
}
},
{
selector: ".outline",
css: {
"color": "#fff",
"text-outline-color": "#000",
"text-outline-width": 3
}
},
{
selector: ".top-center",
style: {
"text-valign": "top",
"text-halign": "center"
}
}
],
elements: {
nodes: [{
data: {
id: '1',
label: 'outline'
},
classes: 'outline'
},
{
data: {
id: '2',
label: 'background'
},
classes: 'background'
},
{
data: {
id: '3',
label: 'top-center'
},
classes: 'top-center'
},
{
data: {
id: '4',
label: 'none'
}
}
],
edges: [{
data: {
source: "1",
target: "2",
label: "outline"
},
classes: "outline"
},
{
data: {
source: "2",
target: "3",
label: "background"
},
classes: "background"
},
{
data: {
source: "3",
target: "4",
label: "top-center"
},
classes: "top-center"
},
{
data: {
source: "4",
target: "1",
label: "none"
}
}
]
},
layout: {
name: "circle"
}
}));
cy.ready(function() {
cy.layout({
name: "circle"
}).run();
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 75%;
position: absolute;
left: 0;
top: 0;
float: left;
}
<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://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script>
<script src="https://unpkg.com/jquery#3.3.1/dist/jquery.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
I have a table that is coming from plugin called dataTables and the corresponding data is coming from external json 'members.json'.Everything is working fine but I want to put a search icon inside search textbox just before placeholder and when I key up it should hide and again it should visible when key down completion same as like placeholder.Can anyone please help me on it.Below is my code.
HTML
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
</head>
<body>
<div class="col-md-12">
</div>
<div id="div">
<div>
<table id="example">
<thead>
<tr>
<th>name</th>
<th>stargazerscount</th>
<th>forkscount</th>
<th>description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript" charset="utf8" src="js/script.js"></script>
</div>
</div>
</body>
script.js
$('#example').DataTable( {
language: {
searchPlaceholder: "Search records"
},
"ajax": {
"type" : "POST",
"url": "http://localhost/js/members.json",
"dataSrc": function (json) {
var return_data = new Array();
for(var i=0;i< json.length; i++){
return_data.push({
'name': json[i].name,
'stargazerscount' : '<span onclick="f()">'+json[i].stargazerscount+'</span>',
'forkscount' : json[i].forkscount,
'description' : json[i].description
})
}
return return_data;
}
},
"columns": [
{ "data": "name" },
{ "data": "stargazerscount" },
{ "data": "forkscount" },
{ "data": "description" }
]
});
members.json
[{
"name": "mango",
"stargazerscount": 526,
"forkscount": "critical",
"description": "fruits"
},
{
"name": "brinjal",
"stargazerscount": 526,
"forkscount": "critical",
"description": "vagetables"
},
{
"name": "grapes",
"stargazerscount": 526,
"forkscount": "major",
"description": "fruits"
},
{
"name": "soap",
"stargazerscount": 526,
"forkscount": "major",
"description": "groceries"
},
{
"name": "dates",
"stargazerscount": 526,
"forkscount": "critical",
"description": "dryfruits"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "shirt",
"stargazerscount": 526,
"forkscount": "critical",
"description": "clothes"
},
{
"name": "dates",
"stargazerscount": 526,
"forkscount": "critical",
"description": "dryfruits"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "shirt",
"stargazerscount": 526,
"forkscount": "critical",
"description": "clothes"
},
{
"name": "shirt",
"stargazerscount": 526,
"forkscount": "critical",
"description": "clothes"
},
{
"name": "dates",
"stargazerscount": 526,
"forkscount": "critical",
"description": "dryfruits"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "shirt",
"stargazerscount": 526,
"forkscount": "critical",
"description": "clothes"
},
{
"name": "dates",
"stargazerscount": 526,
"forkscount": "critical",
"description": "dryfruits"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "mobiles",
"stargazerscount": 526,
"forkscount": "major",
"description": "electronics"
},
{
"name": "shirt",
"stargazerscount": 526,
"forkscount": "critical",
"description": "clothes"
}
]
You can actually, manipulate the DOM of Datatables and add an id or class. Basically, you assign an id to the filter DOM then use css.
For example:
$(document).ready( function () {
var table = $('#example').DataTable({
language: {
searchPlaceholder: "Search records"
},
"dom": "<'#searchid'f>trip"
});
} );
$( window ).on( "load", function(){
$("#searchid :input").addClass('empty');
} );
$(document).on('keyup','#searchid :input', function() {
var input = $("#searchid :input");
if(input.val().length === 0) {
input.removeClass('no-icon');
input.addClass('empty');
} else {
input.removeClass('empty');
input.addClass('no-icon')
}
});
You can manipulate the CSS below:
input.empty {
background-image: url(https://cdn4.iconfinder.com/data/icons/iconic/raster/16/magnifying_glass_alt.png);
background-position: 10px center;
background-repeat: no-repeat;
border: 1px solid #ccc;
padding: 5px 5px 5px 10px;
text-indent: 20px;
width: 200px;
}
input.no-icon{
padding: 5px 5px 5px 10px;
width: 200px;
}
Take a look at this example I made.
I have following code in Vega lite. I want to change transform filter 1850 to 2000. Please suggest how I can Change transform filter of schema. If possible is there any sample example for dynamic data change and update view.
Data for population took from
https://vega.github.io/editor/data/population.json
var yourVlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"data": {
"url": "https://vega.github.io/editor/data/population.json",
"format": {
"type": "json"
}
},
"transform": [
{
"filter": "datum.year == 1850"
}
],
"mark": "bar",
"encoding": {
"x": {
"aggregate": "sum",
"field": "people",
"type": "quantitative",
"axis": {
"title": "population"
}
}
},
"config": {
"scale": {
"rangeStep": 21
}
}
}
vegaEmbed('#vis', yourVlSpec).then(function (result) {
result.spec.transform[0] = '{filter: "datum.year == 2000"}';
}).catch(console.error);
<html>
<head>
<title>Embedding Vega-Lite</title>
<script src="https://cdn.jsdelivr.net/npm/vega#3.0.10"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite#2.1.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed#3.0.0"></script>
</head>
<body>
<div id="vis"></div>
<div id="view"></div>
</body>
</html>
You can achieve that with selections (https://vega.github.io/vega-lite/docs/selection.html) and a filter based on that selection (https://vega.github.io/vega-lite/docs/filter.html#selection-predicate). If that's not an option, you will need to use Vega Signals and the Vega View API.
I can't find proper answer for two questions concerning grid (lot of different answers, no one good):
how can I center texts in grid cells vertically;
how can I display vertical lines as well as horizontal.
Be so kind as to prompt me, please.
Apply custom css to your grid. Something like this:
#GridId div.x-grid-cell-inner { text-align: center; }
To center the text in the center of the column use the align property, this way align: 'center'. Notice that the email column is centralized.
In the case of vertical lines it is more complicated.
ExtJS has a setting to show the lines of the column columnLines: true, but doesn’t have a property to show line rows. So we should use a CSS class and set the bottom border, in this way border-bottom-color: red !important;
To test in other versions of ExtJS access this fiddle.
var Grid1Store = new Ext.data.JsonStore({
fields: ['id', 'name', 'email'],
autoLoad: true,
data: [{
"id": 1,
"name": "John Smith",
"email": "jsmith#example.com"
}, {
"id": 2,
"name": "Anna Smith",
"email": "asmith#example.com"
}, {
"id": 3,
"name": "Peter Smith",
"email": "psmith#example.com"
}, {
"id": 4,
"name": "Tom Smith",
"email": "tsmith#example.com"
}, {
"id": 5,
"name": "Andy Smith",
"email": "asmith#example.com"
}, {
"id": 6,
"name": "Nick Smith",
"email": "nsmith#example.com"
}]
});
var onReadyFunction = function() {
var grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
frame: true,
title: 'Example',
width: 450,
height: 200,
store: Grid1Store,
columns: [{
header: "Id",
dataIndex: 'id',
width: '50px'
}, {
header: "Name",
dataIndex: 'name',
width: '150px'
}, {
header: "Email",
dataIndex: 'email',
width: '200px',
align: 'center'
}]
});
}
Ext.onReady(onReadyFunction);
.x-grid-cell {
border-bottom-color: red !important;
}
<script src="http://cdn.sencha.com/ext/gpl/4.2.0/ext-all.js"></script>
<link type="text/css" rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css")/>