How to use PHP path inside JWplayer Javascript - php

How do I write my php path with variables inside the embedded JWplayer Javascript?
I am new to php and have no code experience in Javascript.
I would appreciate any help.
**This absolute path works:**
<script type="text/javascript">
jwplayer("myElement").setup({
file: "/uploads/example.mp4",
height: 360,
image: "http://saradyso.com:8020/SuperContainer/RawData/MediaWeb/REG002133749/ADP100000033/Video1.mp4",
width: 640
});
</script>
**This doesn't work:**
<script type="text/javascript">
jwplayer("myElement").setup({
file: "/uploads/example.mp4",
height: 360,
image:"http://'.$Domain.':'.$Port.'/'.$ContainerV.'/'.$FileName.'/'.$SubFolder.'.mp4'",
width: 640
});
</script>


Just like that
<?php $your_path = "some/path/to/to.image" ?>
<script type="text/javascript">
jwplayer("myElement").setup({
file: "/uploads/example.mp4",
height: 360,
image: <?php ehco $your_path ?>,
width: 640
});
</script>


use echo inside php block like this.
<script type="text/javascript">
jwplayer("myElement").setup({
file: "/uploads/example.mp4",
height: 360,
image:"http://<?php echo $Domain ?>:<?php echo $Port ?>/<?php echo $ContainerV ?>/<?php echo $SubFolder ?>/<?php echo $FileName ?>.mp4",
width: 640
});
</script>

Related

Get contents with JS and echo with PHP

I'm not familiar with js. I'd like to get the result of "file_get_contents" function and put it on the "source" (I have marked both with .................).
Thank you in advance.
<script>
var myInit = {
referrer: '',
};
function file_get_contents(filename) {
fetch(filename, myInit).then((resp) => resp.text()).then(function(data) {
content = JSON.parse(data)
fetch(content['some']['media']['content'], myInit).then((resp) =>
resp.text()).then(function(data));});}
file_get_contents("https://.................");
</script>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/clappr#latest/dist/clappr.min.js">
</script>
</head>
<div id="player"></div>
<script>
window.onload = function() {
var player = new Clappr.Player({
source: '<?php echo $url...................?>',
parentId: "#player",
height: '100%',
width: '100%',
autoPlay: true,
});};
</script>
</body>
</html>

I think if you use the following code, you will get closer to your solution.
<script>
var myInit = {
referrer: '',
};
function file_get_contents(filename) {
fetch(filename, myInit).then((resp) => resp.text()).then(function(data) {
var content = JSON.parse(data);
console.dir(content);
var player = new Clappr.Player({
source: content['some']['media']['content'],
parentId: "#player",
height: '100%',
width: '100%',
autoPlay: true,
});
});
}
file_get_contents("https://.................");
</script>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/clappr#latest/dist/clappr.min.js">
</script>
</head>
<div id="player"></div>
<script>
window.onload = function() {
//Whatever
};
</script>
</body>
</html>
If you tell me what console.dir outputs, I might be able to offer more help.
BTW.: doesn't clapper have some documents showing how to use its API?

Changing color of bootstrap "well" on mouseover

I am trying to change the color of "well" on mouseover but unable to do it. I have been trying with the following codes:
<script type="text/javascript">
function ChangeColor(well, highLight)
{
if (highLight)
{
well.style.backgroundColor = '#dcfac9';
}
}
</script>
PHP:
echo " <div class=\"well\" onmouseover=\"ChangeColor(this, true);\"\n";
echo " onmouseout=\"ChangeColor(this, false);\"> \n";
echo "something";
echo " </div>\n";
The above code is changing color nicely on mouseover but it is crossing the area of the "well". Please help to fix it.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<div class="well">
<p>
This is a well content
</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(".well").mouseenter(
function(){
$(this).css('background-color','red');
});
$(".well").mouseleave(
function(){
$(this).css('background-color','#f5f5f5');
});
</script>

Doing this through JavaScript seems like overkill. This can easily be done simply through the use of CSS:
.well:default
{
background-color: #ccc;
}
.well:hover
{
background-color: #000;
}

var getDefaultBg = $(".well").css("background");
$(".well").mouseover(function() {
$(this).css("background", "#000");
}). mouseout(function() {
$(this).css("background", getDefaultBg);
});
simply use this for your requirement.

That was the script I wanted:
<script>
$(document).ready(function(){
$(".well").mouseenter(function(){
$(this).css("background-color", "#efefef");
});
$(".well").mouseleave(function(){
$(this).css("background-color", "#f5f5f5");
});
});
</script>

Getting PHP variable into Chart Script

I am having an issue with Google Charts. I have created the exact format it shows in the example inside a PHP vaiable
['Time','Devices'],['08-12-2015 09:19:00',12],['08-12-2015 09:20:00',26],['08-12-2015 09:21:00',23],['08-12-2015 09:22:00',16],['08-12-2015 09:23:00',29],['08-12-2015 09:24:00',21],['08-12-2015 09:25:00',18],['08-12-2015 09:26:00',28],['08-12-2015 09:27:00',19],['08-12-2015 09:28:00',15],['08-12-2015 09:29:00',25],['08-12-2015 09:30:00',18],['08-12-2015 09:31:00',18],['08-12-2015 09:32:00',26],['08-12-2015 09:33:00',13],['08-12-2015 09:34:00',16],['08-12-2015 09:35:00',19],['08-12-2015 09:36:00',14],['08-12-2015 09:37:00',23],['08-12-2015 09:38:00',16],['08-12-2015 09:39:00',12],['08-12-2015 09:40:00',27],['08-12-2015 09:41:00',17],['08-12-2015 09:42:00',16],['08-12-2015 09:43:00',32],['08-12-2015 09:44:00',20],['08-12-2015 09:45:00',18],['08-12-2015 09:46:00',30],['08-12-2015 09:47:00',14],['08-12-2015 09:48:00',19],['08-12-2015 09:49:00',24],['08-12-2015 09:50:00',12],['08-12-2015 09:51:00',23],['08-12-2015 09:52:00',21],['08-12-2015 09:53:00',12],['08-12-2015 09:54:00',26],['08-12-2015 09:55:00',23],['08-12-2015 09:56:00',12],['08-12-2015 09:57:00',32],['08-12-2015 09:58:00',16],['08-12-2015 09:59:00',18],['08-12-2015 10:00:00',23],['08-12-2015 10:01:00',17],['08-12-2015 10:02:00',19],['08-12-2015 10:03:00',39],['08-12-2015 10:04:00',16],['08-12-2015 10:05:00',17],['08-12-2015 10:06:00',27],['08-12-2015 10:07:00',21],['08-12-2015 10:08:00',18],['08-12-2015 10:09:00',40],['08-12-2015 10:10:00',20],['08-12-2015 10:11:00',18],['08-12-2015 10:12:00',28],['08-12-2015 10:13:00',25],['08-12-2015 10:14:00',17],['08-12-2015 10:15:00',32],['08-12-2015 10:16:00',25],['08-12-2015 10:17:00',16],['08-12-2015 10:18:00',31]
I now want to place this inside the Chart example below but it does not work.
The variable that holds the above information is $outp. I tried to place it in but it does not work.
<html>
<head>
<script type="text/javascript"
src="https://www.google.com/jsapi?autoload={
'modules':[{
'name':'visualization',
'version':'1',
'packages':['corechart']
}]
}"></script>
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
<?php echo $optp; ?>
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
If anyone can assist please, its driving me crazy.
Thanks
Rob

Having trouble using iframes

I am failing badly when it comes to using iframes and I need some help. I have never used an iframe before, this is my first time.
Here is a doucment on what I am trying to follow to produce an iframe with the galleria slider: http://galleria.io/docs/references/data/
What I have is a jwplayer and I want to access a video(s) using an iframe to retrieve the videos which are in the video.php page. If there is a single video, then simply retrieve the correct video from the video.php page but if there are multiple videos, then retrieve the correct multiple videos and display them in the galleria slider. But my question is how can I get the iframe to work in order to do this?
Below is the video.php page where it displays the jwplayer:
<div id="myElement-<?php echo $key.'-'.$i; ?>">Loading the player...
<script type="text/javascript">
jwplayer("myElement-<?php echo $key.'-'.$i; ?>").setup({
file: "<?php echo 'VideoFiles/'.$v; ?>",
width: 480,
height: 270
});
<?php $i++; ?>
Below is the code where it checks if the video is a single or multiple, displays the galleria slider if multiple and this is where the iframe is placed:
if(count($arrVideoFile[$key]) == 1){
foreach ($arrVideoFile[$key] as $v) { ?>
var data = [
{
iframe: 'video.php'
}
];
<?php
}
}else if(count($arrVideoFile[$key]) > 1){
?>
<style>
#galleriavideo_<?php echo $key; ?>{ width: 500px; height: 300px; background: #000 }
</style>
<div id="galleriavideo_<?php echo $key; ?>">
<?php
foreach ($arrVideoFile[$key] as $v) { ?>
<script type="text/javascript">
var data = [
{
iframe: 'video.php'
}
];
</script>
</div>
<?php } ?>
</div>
<script type="text/javascript">
Galleria.loadTheme('jquery/classic/galleria.classic.min.js');
Galleria.run('#galleriavideo_<?php echo $key; ?>');
</script>
<?php
}
}
//end:procedure video
EDIT:
video.php
<?php
$key = filter_input(INPUT_GET, "key", FILTER_SANITIZE_STRING);
$i = filter_input(INPUT_GET, "i", FILTER_SANITIZE_NUMBER_INT);
$v = filter_input(INPUT_GET, "v", FILTER_SANITIZE_STRING);
?>
<div id="myElement-<?php echo $key.'-'.$i; ?>">Loading the player...
<script type="text/javascript">
jwplayer("myElement-<?php echo $key.'-'.$i; ?>").setup({
file: "<?php echo 'VideoFiles/'.$v; ?>",
width: 480,
height: 270
});
</script>
</div>
assessment.php:
if(count($arrVideoFile[$key]) > 1){
?>
<style>
#galleriavideo_<?php echo $key; ?>{ width: 500px; height: 300px; background: #000 }
</style>
<div id="galleriavideo_<?php echo $key; ?>">
<?php
foreach ($arrVideoFile[$key] as $v) { ?>
<img class="iframe">
<?php $i++; ?>
<?php } ?>
</div>
<script type="text/javascript">
Galleria.loadTheme('jquery/classic/galleria.classic.min.js');
Galleria.run('#galleriavideo_<?php echo $key; ?>');
</script>
<?php
}

Here is a short example on how to use Galleria with jwplayer. You can try to adapt it to your code then.
First, there is the video.php file which contains the jwplayer:
<div id="container"></div>
<script type="text/javascript" src="/path/to/jwplayer.js"></script>
<script type="text/javascript">
jwplayer("container").setup({
file: "http://content.bitsontherun.com/videos/3XnJSIm4-kNspJqnJ.mp4",
image: "http://content.bitsontherun.com/thumbs/3XnJSIm4-640.jpg"
});
</script>
Then, there is the gallery.php file, which contains the slider:
<div id="galleria" style="height:350px; width:550px;">
<img class="iframe">
</div>
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/galleria.js"></script>
<script type="text/javascript">
Galleria.loadTheme('/path/to/galleria.classic.min.js');
Galleria.run('#galleria');
</script>
If you want to display multiple videos in the slider, you can imagine a solution where video.php takes a parameter and loads a video according to it, i.e. video.php?id=xx
Edit: to clarify a bit
Your video.phpfile should take some parameters:
$key = filter_input(INPUT_GET, "key", FILTER_SANITIZE_STRING);
$i = filter_input(INPUT_GET, "i", FILTER_SANITIZE_NUMBER_INT);
$v = filter_input(INPUT_GET, "v", FILTER_SANITIZE_STRING);
<div id="myElement-<?php echo $key.'-'.$i; ?>">Loading the player...
<script type="text/javascript" src="/path/to/jwplayer.js"></script>
<script type="text/javascript">
jwplayer("myElement-<?php echo $key.'-'.$i; ?>").setup({
file: "<?php echo 'VideoFiles/'.$v; ?>",
width: 480,
height: 270
});
And then in the gallery.php file:
<div id="galleria" style="height:350px; width:550px;">
<img class="iframe">
<img class="iframe">
<img class="iframe">
...
</div>

How to display video in a slider

I am using galleria slider as a jquery slider nd jwplayer to display videos. Problem is that it does not display the jwplayer in the slider, it just displays a black square. I got it working for images but can't get it working for the video player jwplayer. Can somebody who knows how to do this modify the code below so it is working in my app?
Galleria: http://galleria.io/docs/
jwplayer: http://www.longtailvideo.com/jw-player/
<?php if(count($arrVideoFile[$key]) > 1){ ?>
<style>
#galleriavideo_<?php echo $key; ?>{ width: 500px; height: 300px; background: #000 }
</style>
<div id="galleriavideo_<?php echo $key; ?>">
<?php foreach ($arrVideoFile[$key] as $v) { ?>
<div id="myElement-<?php echo $key.'-'.$i; ?>">Loading the player...
<script type="text/javascript">
jwplayer("myElement-<?php echo $key.'-'.$i; ?>").setup({
file: "<?php echo 'VideoFiles/'.$v; ?>",
width: 480,
height: 270
});
<?php $i++; ?>
</script>
</div>
<?php } ?>
</div>
<script type="text/javascript">
Galleria.loadTheme('jquery/classic/galleria.classic.min.js');
Galleria.run('#galleriavideo_<?php echo $key; ?>');
</script>
<?php } ?>

It is a bit strange, another user posted an extremely similar question here: Having trouble using iframes
Anyway, I will try to post a solution close to your code. I presume you want one slider with multiple videos.
You need two files: video.php, a page showing a video according to a certain filename and gallery.php, the page containing the slider.
video.php:
<?php
$v = filter_input(INPUT_GET, "v", FILTER_SANITIZE_STRING);
?>
<div id="container"></div>
<script type="text/javascript" src="/path/to/jwplayer.js"></script>
<script type="text/javascript">
jwplayer("container").setup({
file: "VideoFiles/<?php echo $v; ?>",
width: 480,
height: 270
});
</script>
gallery.php:
<?php if(count($arrVideoFile[$key]) > 1){ ?>
<div id="galleriavideo" style="width:500px; height:300px; background:#000;">
<?php
foreach($arrVideoFile[$key] as $v) {
$vurl = "/path/to/video.php?v=".rawurlencode($v);?>
<img class="iframe">
<?php } ?>
</div>
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/galleria.js"></script>
<script type="text/javascript">
Galleria.loadTheme('/path/to/galleria.classic.min.js');
Galleria.run('#galleriavideo');
</script>
<?php } ?>

Categories