playlist: [{
"sources": [{"type": "video/mp4", "label": "SD", "file": "src.mp4"}]
}],
how can use js variable to assign video file src like
playlist: [{
"sources": [{"type": "video/mp4", "label": "SD", "file": myvariable }]
}],
The value of file is a string representing the location of the file. It's usually an absolute url. The demo doesn't function on SO for some reason✎, but it functions as a PLUNKER
Note: I used ES6 Template Literal instead of the usual String Literal. If you intend to cater to IE users, you'll have to use String Literal
Demo PLUNKER
Demo STACK (Does not function✎, review PLUNKER instead)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://p.jwpcdn.com/6/12/jwplayer.js"></script>
</head>
<body>
<div id="x">...</div>
<script>
var file = '023642.mp4';
var jwp = jwplayer('x');
jwp.setup({
playlist: [{
file: `http://media6000.dropshots.com/photos/1381926/20170326/${file}`
}],
width: 320,
height: 180
});
</script>
</body>
</html>
✎ Unrelated to OP, but in regards to this Stack's functionality, see #TinyGiant detailed answer
Related
Сan't generate an pure HTML file from current JSON data.
I tried to generate pure HTML file from angular generated module JSON:
{"surveyTitle":"ddasdas","surveyType":"Training","surveyQuestions":[{"questionTitle":"dasda","questionType":"Single choice","questionGroup":{"options":[{"optionText":"dsadsa"},{"optionText":"dasdsa"}],"showRemarksBox":false}}],"IsAnonymous":false}
To solve it I used this source below
from here surveyjs.io :
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>One choice - Radio Group question, jQuery Survey Library Example</title><meta name="viewport" content="width=device-width"/>
<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/survey-jquery#1.8.75/survey.jquery.min.js"></script>
<link href="https://unpkg.com/survey-core#1.8.75/modern.min.css" type="text/css" rel="stylesheet"/>
<link rel="stylesheet" href="./index.css"></head>
<body>
<div id="surveyElement" style="display:inline-block;width:100%;"></div>
<div id="surveyResult"></div>
<script type="text/javascript" src="./index.js"></script>
</body>
</html>
JS:
Survey
.StylesManager
.applyTheme("modern");
var json = {
questions: [
{
"type": "radiogroup",
"name": "car",
"title": "What car are you driving?",
"isRequired": true,
"hasNone": true,
"colCount": 4,
"choices": [
"Ford",
"Vauxhall",
"Volkswagen",
"Nissan",
"Audi",
"Mercedes-Benz",
"BMW",
"Peugeot",
"Toyota",
"Citroen"
]
}
]
};
window.survey = new Survey.Model(json);
survey
.onComplete
.add(function (sender) {
document
.querySelector('#surveyResult')
.textContent = "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
});
$("#surveyElement").Survey({model: survey});
But I getting errors for my current JSON.
My Code Here: Stackblitz - by clicking Add New Survey JSON has generates.
I created a project and I'm trying to add gogocartoJs in it.
The project works but the map is not showing.
I tried with the guides I found in the site, it looks plain and easy, but there is an step that I'm not understanding (please dont just copy/paste a piece of the site like it was obvious what it is the mistake, because it is not for me)
<html lang="en">
<head>
<link
rel="stylesheet"
href="https://gogocarto.fr/assets/css/gogocarto.min.css"
/>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script type="text/javascript" src="./jquery.js"></script>
<script src="https://gogocarto.fr/js/gogocarto.min.js"></script>
<title>Hello Webpack</title>
</head>
<body>
<div>
<h1>Hello Webpack</h1>
<div id="gogocarto"></div>
</div>
<script>
$(document).ready(function() {
carto = goGoCarto("#gogocarto", {
data: {
taxonomy: taxonomy,
elements: elements
}
});
});
</script>
<script src="./bundle.js"></script>
</body>
</html>
I expect the map to show, and it doesnt
I added the project to github to show better
https://github.com/Aredros/testGogo/tree/master/dist
elements & taxonomy are js variables containing data you must provide according to the format described in the documentation.
// taxonomy
let taxonomy = {
"options":[
{
"id": "eu1",
"name":"Belgium",
"color":"#9acd32",
"icon":"fa-solid fa-building"
},
{
"id": "eu2",
"name": "Netherland",
"color": "#ffa500",
"icon": "fa-solid fa-fan"
},
{
"id": "eu3",
"name": "Luxembourg",
"color": "#a52a2a",
"icon": "fa-solid fa-money-bill-1"
}
]
}
The only missing info in the documentation is the id key in the taxonomy which must be referenced in your elements source dataset.
// elements
let elements = [
{
"title": "Brussels",
"geo": {
"latitude":50.84,
"longitude":4.34
},
"taxonomy": [ "eu1" ],
},
{
"title": "Namur",
"geo": {
"latitude":50.45,
"longitude":4.88
},
"taxonomy": [ "eu1" ],
},
{
"title": "Liege",
"geo": {
"latitude":50.62,
"longitude":5.60
},
"taxonomy": [ "eu1" ],
},
{
"title": "Rotterdam",
"geo": {
"latitude":51.88,
"longitude":4.51
},
"taxonomy": [ "eu2" ],
},
{
"title": "Amsterdam",
"geo": {
"latitude":52.07,
"longitude":5.12
},
"taxonomy": [ "eu2" ],
},
]
Idealy you should build an API returning taxonomy classification & elements data. Then perform ajax call in your html page.
$.ajax({
type: 'GET',
url: '/ajax/url_to_get_elements',
dataType: 'json',
success: function(elements, status) {
build_map(elements);
}
});
// build map = function with 1 arguments (elements) where you put the call to goGoCarto and options...
You can define more than 1 taxonomy group (Example above is about English countries) with the name you want => Cfr. Advanced Taxonomy with Categories. Your elements can then have multiple taxonomy reference listed [ "eu1", "week22", 14 ]. Items in the list can be Integer or String. The only important thing is the ID key and the taxonomy order! Keep the same order in your taxonomy than in your key "taxonomy": in your elements data sources!
Point of attention
Because the library is highly configurable with options, colors and icons it is important to put all your <scripts> tags inside <head> tags of your html page!
I'm using the D3PlUS JS library (http://d3plus.org/) and I need to implement a treemap chart with a json recursive structure. I could just to do a first level treemap chart, but I couldn't do mack my code to be multilevel.
example.json
[
{
"id":"First cell",
"value": 10,
"child":
[
{
"id":"Child first cel",
"value": 10,
"child":[]
}
]
},
{
"id":"Second cell",
"value": 90,
"child":
[
{
"id":"Child second cell 1",
"value": 10,
"child":[]
},
{
"id":"Child second cell 2",
"value": 20,
"child":[]
},{
"id":"Child second cell 3",
"value": 10,
"child":[]
}
]
}
]
<!doctype html>
<meta charset="utf-8">
<link href="http://d3plus.org/css/d3plus.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://d3plus.org/js/d3.js"></script>
<script src="http://d3plus.org/js/d3.geo.tile.js"></script>
<script src="http://d3plus.org/js/topojson.js"></script>
<script src="http://d3plus.org/js/modernizr.js"></script>
<script src="http://d3plus.org/js/d3plus.js"></script>
<!-- create container element for visualization -->
<div id="viz"></div>
<script>
// instantiate d3plus
var visualization = d3plus.viz()
.container("#viz") // container DIV to hold the visualization
.data("data/exemple.json")
.type("tree_map") // visualization type
.id("id") // key for which our data is unique on
.size("value") // sizing of blocks
.draw() // finally, draw the visualization!
</script>
Anybody can help me?
Two modifications were necessary:
changing the data to what is expected by the chart, paying special attention to getting the IDs right (see docs). This was the trickiest part.
nesting the ids in the config param, in accordance with the data: .id(["id","cid"])
Here is a complete working PLUNK.
EDIT: Per OP request, I added one more level to the treemap. It is important to keep the id hierarchy, so now the config param is: .id(["id","cid","gid"]). Also, make sure to remove the value field in the json file for all records that have children...otherwise, D3plus will consider that as part of the values to display with the children.
Just learning javascript & html.
I am trying to get a value from some jsonp. This is what is being returned
detail( {
"StatusCode": 0,
"StatusInfo": "Processed and Logged OK",
"PageNumber": 1,
"TotalPageCount": 1,
"TotalProductCount": 1,
"PageProductCount": 1,
"Products":
[
{
"BaseProductId": "57543094",
"EANBarcode": "5010204736716",
"CheaperAlternativeProductId": "",
"HealthierAlternativeProductId": "",
"ImagePath": "http://img.tesco.com/Groceries/pi/716/5010204736716/IDShot_90x90.jpg",
"MaximumPurchaseQuantity": 99,
"Name": "Tesco Bacon Leek Quiche 400G",
"OfferPromotion": "Any 2 for £4.00",
"OfferValidity": "valid from 2/1/2014 until 21/1/2014",
"OfferLabelImagePath": "http://www.tesco.com/Groceries/UIAssets/I/Sites/Retail/Superstore/Online/Product/pos/2for.png",
"ShelfCategory": "134",
"ShelfCategoryName": "Pies Quiche & Pasties",
"Price": 2.3,
"PriceDescription": "£0.58 each",
"ProductId": "255163145",
"ProductType": "QuantityOnlyProduct",
"UnitPrice": 0.575,
"UnitType": "100g"
}
]
} )
My code is as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tesco JSONP</title>
</head>
<body>
<button id="detail">detail</button>
<script type="text/javascript">
function detail(data) {
document.getElementById('name').innerHTML = (data.Products.Name)
}
function data() {
var script_elem = document.createElement('script'),
url = "http://www.techfortesco.com/groceryapi_b1/restservice.aspx?command=PRODUCTSEARCH&JSONP=detail&searchtext=5010204736716&page=1&sessionkey=123456789"
script_elem.setAttribute('src', url);
document.head.appendChild(script_elem);
}
document.getElementById('detail').addEventListener('click', data, false);
</script>
<div id="name"></div>
</body>
</html>
When run I am getting undefined. I'm guessing that my syntax (data.Products.Name) is incorrect. If I try (data.StatusCode) then I get the correct result.
Can someone please advise.
Best wishes.
data.Products is an array.
You need to specify which element you want to acess in the array.
In this case you only have one element, so the correct syntax would be data.Products[0].name
This is My JSonSctipt file code:
var data = [
{
"SearchResult": {
"assets": [
{
"agent": "6.1.0",
"id": 1,
"model": "Gateway1",
"modelId": 2,
"name": "Name",
"serialNumber": "Serial01"
},
{
"agent": "M2M",
"id": 2,
"model": "Gateway1",
"modelId": 3,
"name": "Name",
"serialNumber": "Serial02"
}
],
"searchCriteria": {
"paginationEnabled": false,
"rowsPerPage": -1,
"startRow": -1,
"totalAvailableRows": -1,
"alternateId": {
"#xsi.nil": "true"
},
"modelNumber": {
"#xsi.nil": "true"
},
"name": "*",
"serialNumber": {
"#xsi.nil": "true"
}
}
}
}
];
$("#grid").kendoGrid({
dataSource: {
data: data,
schema: {
data: function(rawData) {
return rawData[0].SearchResult.assets;
}
}
}
});
Thsi is My Index.html file
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="scripts/hello-world.js"></script>
<script src="kendo/js/kendo.dataviz.min.js"></script>
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
</head>
<body>
<div id="grid"></div>
</body>
</html>
when i run this code uncaught typeerror object object object has no method 'kendoUi' Error I m getting so am Unable to Display data In Grid please tell me how i will fix it or can any one Please tell me how i will Json parsing In Kendo UI
It looks like you are trying to use Kendo Grid, which is a part of Kendo Web, but only have a reference to Kendo Mobile (i.e. kendo.mobile.min.js). You need to add a script reference to either kendo.web.min.js or kendo.all.min.js. Take a look at this jsfiddle, paying particular attention to the External Resource (i.e. kendo.all.min.js)
P.S. SO won't let me post a link to jsfiddle without some code, so here is part of the code again, to satisfy their requirements:
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<bo
<div id="grid"></div>
</body>