I want to play a random video on my website. But I don't know how I can make that, because I'm a noob with HTML & JSS. I searched for a simple way to do that, but I can't find a solution.
Thats my code on the Website, where the different videos should come:
<div class="bg-video-wrapper" id="video-background-1">
<div class="bg-video-overlay bg-dark-alfa-50"></div>
</div>
And thats my code for "video-background-1":
var videobackground_1 = new $.backgroundVideo($('#video-background-1'), {
"align": "centerXY",
"width": 1920,
"height": 1080,
"path": "assets/videos/",
"filename": "trailer3",
"types": ["mp4", "ogg", "webm"],
"autoplay": true,
"loop": true
Is it possible to add a filename to "trailer3" with a comma or something? Is there an easy way to add a video and it get picked randomly which one is played?
How many videos do you have? You could build a hashmap with a numeric key <int, path to video>
then use a random number function for example:
Math.floor(Math.random() * 11); //gets 0-10
and use that number as a key to get filename from the hashmap to use in the request...
Building a little on #ItGrunt's answer (upvote his, too, if you found mine helpful):
You would have to implement something like this:
var videobackground_1 = new $.backgroundVideo($('#video-background-1'), {
"align": "centerXY",
"width": 1920,
"height": 1080,
"path": "assets/videos/",
"filename": ["trailer1", "trailer2", "trailer3"][Math.floor(Math.random()*3)],
"types": ["mp4", "ogg", "webm"],
"autoplay": true,
"loop": true
You could also write a function for this to clean your code up like the following:
function random(a) {
return a[Math.floor(Math.random()*(a.length))]
}
var videobackground_1 = new $.backgroundVideo($('#video-background-1'), {
"align": "centerXY",
"width": 1920,
"height": 1080,
"path": "assets/videos/",
"filename": random(["trailer1", "trailer2", "trailer3"]),
"types": ["mp4", "ogg", "webm"],
"autoplay": true,
"loop": true
Related
It's probably really easy but I just can't figure out how to change the ticker symbol in the Tradingview widget. I want the chart to change to the tickers in a array i got. The chart needs to change every 30 seconds with a new ticker and do that forever.
This is what I got so far:
<div class="tradingview-widget-container">
<div id="tradingview_5889e"></div>
<div class="tradingview-widget-copyright"><span class="blue-text">RIG</span> <span class="blue-text">chart</span> by TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
var i = 0
function createchart(){
var companies = ['NYSE:SDRL','NYSE:RIG','CHXEUR:SEVDRO','NYSE:TK','CHXEUR:GBBP']
new TradingView.widget(
{
"width": 980,
"height": 610,
"symbol": companies[i],
"interval": "15",
"timezone": "Etc/UTC",
"theme": "Light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"hide_top_toolbar": true,
"save_image": false,
"hideideas": true,
"container_id": "tradingview_5889e"
}
);
i++;
}
setInterval(createchart(),10000)
</script>
</div>
Hope you guys can help me out. Been struggeling on this for way too long.
You can write it like this also
setInterval(createchart, 10000);
Try using:
setInterval(function(){
createchart()
}, 10000);
For some reasons it usually doesnt work the other way
That title is kind of garbled and this is probably a duplicate but I've been digging a while. This must be really simple. The accepted answer on this question didn't work for me: How to declare and use the name of a function from a json object?
The task: I am trying to externalize the set-up data for a Vis.js timeline into a JSON file . The data set was no problem nor are all of the options except for the function references, "orderByID" and "visTemplate". Those are functions I defined which exist within the script where I am working with the JSON data.
When I try to use the JSON without attempting to convert it, Vis.js complains. When I tried the answer from the question above with the code below, I get the errors show in the image.
This is in Electron and the script is being loaded through a script tag in the index.html.
I await the one-line answer to this simple issue which have spent so much time describing. 😉
console.log(' timelineOptions.order', timelineOptions.order);
console.log(' timelineOptions.template', timelineOptions.template);
console.log('this', this);
console.log('window', window);
timelineOptions.order = window[timelineOptions.orderByID];
timelineOptions.template = window[timelineOptions.visTemplate];
"timelineOptions": {
"order": "orderByID",
"selectable": true,
"zoomable": false,
"width": "100%",
"height": "90%",
"minHeight": 700,
"format": {
"minorLabels": {
"hour": "HH\\h"
}
},
"margin": {
"axis": 20,
"item": 20
},
"start": "2016-12-30",
"end": "2017-01-4",
"template": "visTemplate",
"showCurrentTime": false,
"dataAttributes": "all",
"timeAxis": { "scale": "day", "step": 1 },
"orientation": {
"axis": "top",
"item": "top"
}
}
Not sure if you've setup the right reference on the window object but shouldn't your code read:
timelineOptions.order = window[timelineOptions.order];
You've referenced the string value orderByID instead of the property name you used to set the object up.
In my AngularJS Controller I got
var test = {
"type": "pie",
"theme": "light",
"data": dataWantedArea,
"valueField": "value",
"titleField": "name",
"balloon": {
"fixedPosition": true
},
"autoMargins": false,
"marginLeft": 5,
"marginRight": 5,
"marginBottom": 5,
"marginTop": 5,
"pullOutRadius": 0,
colors: ["#36CB1F", "#F58426", "#F53E26"],
"export": {
"enabled": true
}
};
in my template I do
<am-chart ng-if="test.data.length" id="test" options="test" width="90vw" height="325px"></am-chart>
Problem: its never shown, obviously test.data.length is ALWAYS false - so I would like to print some debugging in my template, is that possible somehow?
Of course If you know a direct solution to my problem, feel free to answer.
If you want to use data or variable from controller to html, you have to use $scope.
Use $scope.test intead of var test
To debug your code there is a cool browser plugin available.
http://ng-inspector.org/
There you can see a tree and all your values. It's very helpful to debug your code. You can see your scope and you can find and see problems.
I have this code that is bringing in a video background file.
I am trying desperately to create multiple links that when clicked change the "filename" cloud to different file,
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="../jquery.backgroundvideo.min.js"></script>
<script>
$(document).ready(function() {
var videobackground = new $.backgroundVideo($('body'), {
"align": "centerXY",
"width": 1280,
"height": 720,
"path": "media/",
"filename": "cloud",
"types": ["mp4","ogg","webm"]
});
});
</script>
any help would be greatly appreciated
The plugin creates a div called #video_background. Just remove it and call $.backgroundVideo again. You could put that in a function with the filename as a parameter:
function changeVideo(filename){
$('#video_background').remove();
var videobackground = new $.backgroundVideo($('body'), {
"align": "centerXY",
"width": 1280,
"height": 720,
"path": "media/",
"filename": filename,
"types": ["mp4","ogg","webm"]
});
}
To call it by clicking on a link, you could do this:
Sun video
And
$('[data-video]').click(function(e){
e.preventDefault(); // prevent the link from reloading the page
changeVideo( $(this).attr('data-video') );
});
I have a package.json file that looks like:
{
"name": "title",
"description": "description",
"version": "0.1",
"main": "https://path-to-application/",
"window": {
"show": true,
"toolbar": false,
"frame": true,
"position": "center",
"width": 800,
"height": 600,
"min_width": 220,
"min_height": 220
}
}
But when I attempt to run the code:
var GUI = null;
var win = null;
try { GUI = require('nw.gui'); win = GUI.Window.get(); } catch (ex) { }
win.toggleFullscreen();
Nothing happens, adding alerts for GUI and win show they are both set to null. When I run the same code from an index.html file within the same .zip as package.json it works as expected. It appears to be failing with the initial call to require().
Is there some way to get this working in a remotely hosted application?
I was able to solve this following by adding the node-remote field to the package.json file if anyone else runs into this issue.