jwplayer 8 with pre-roll video and xml file - javascript

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: ''
},
}
}
});

Related

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)"):

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.

What does this Revolution jQuery do

I was reading some code today and came across this. This is using the Revolution slider with extensions, link to their site here. I'm not entirely sure what this huge piece of code does, and was wondering if there was anyone that could help me out with this. In the code, it says navigation, so is this how the website makes its navigation bar? I was viewing the actual code and noticed that no-where in the code was there an actual place that made the navigation bar. So I'm assuming they used this or some other JavaScript to insert the nav-bar without coding it directly in HTML.
<script type="text/javascript">
var tpj=jQuery;
var revapi4;
tpj(window).load(function() {
if(tpj("#rev_slider_4_1").revolution == undefined){
revslider_showDoubleJqueryError("#rev_slider_4_1");
}else{
revapi4 = tpj("#rev_slider_4_1").show().revolution({
sliderType:"standard",
jsFileLocation:"assets/revolution/js/",
sliderLayout:"fullscreen",
dottedOverlay:"none",
delay:9000,
navigation: {
keyboardNavigation: "on",
keyboard_direction: "horizontal",
mouseScrollNavigation: "off",
onHoverStop: "off",
touch: {
touchenabled: "on",
swipe_threshold: 75,
swipe_min_touches: 1,
swipe_direction: "horizontal",
drag_block_vertical: false
},
arrows: {
style: "gyges",
enable: true,
hide_onmobile: false,
hide_onleave: false,
tmp: '',
left: {
h_align: "left",
v_align: "center",
h_offset: 10,
v_offset: 0
},
right: {
h_align: "right",
v_align: "center",
h_offset: 10,
v_offset: 0
}
},
bullets: {
enable: false,
hide_onmobile: false,
style: "gyges",
hide_onleave: false,
direction: "horizontal",
h_align: "center",
v_align: "top",
h_offset: 0,
v_offset: 20,
space: 5,
tmp: ''
}
},
parallax: {
type:"mouse",
origo:"slidercenter",
speed:2000,
levels:[2,3,4,5,6,7,12,16,10,50],
},
responsiveLevels:[1240,1024,778,480],
gridwidth:[1240,1024,778,480],
gridheight:[868,768,960,720],
lazyType:"none",
shadow:0,
spinner:"off",
stopLoop:"on",
stopAfterLoops:0,
stopAtSlide:1,
shuffle:"off",
autoHeight:"off",
fullScreenAlignForce:"off",
fullScreenOffsetContainer: "",
fullScreenOffset: "",
disableProgressBar:"on",
hideThumbsOnMobile:"off",
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
debugMode:false,
fallbacks: {
simplifyAll:"off",
nextSlideOnWindowFocus:"off",
disableFocusListener:false,
}
});
}
}); /*ready*/
</script>
Thanks a bunch, I appreciate the help!

Flowplayer Multiple Bitrate Streaming Error

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!!!

JWPlayer only loading buy not play in IE 8

jwplayer("mediaplayer").setup({
provider: 'http',
file: encodeURI(JWplayer_top_video_path),
image: "http://vod.hkheadline.com/hkheadline/instant_video/2013/0103/6beae821acd0eaf1d59e0daa974f5836.jpg",
//Player for IE,FF,Chrome
flashplayer: "./js/jwplayer/player.swf",
//Skin for IE,FF
skin: "./js/jwplayer/skin/glow.zip",
wmode: "opaque",
width: 650,
height: 390,
stretching: "uniform",
autostart: "false",
autopreloading: "true",
dock: "true",
bufferlength: 10,
plugins: {
// fbit: {enable: true},
// tweetit: {enable: true},
"gapro-2":{
"trackstarts": true,
"trackpercentage": true,
"trackseconds": true,
"tracktime": true
}
},
modes: [
{ type: "html5",
//Skin for Chrome
config: {skin: "./js/jwplayer/skin/glow/glow.xml"}
},
{ type: "flash", src: "./js/jwplayer/player.swf" }
],
'events': {
onComplete: function(e){
$('#mediaplayer').remove();
close_overlay();
}
}
});
The above code is the setup jwplayer. It works perfectly on chrome, fx, safari , but not in IE8. In Ie 8 the player is shown and I can click on the play button, However, it keeps loading and loading but never play the movie, how to fix the problem ?thanks

Categories