How to display a video player in a loop - php

I am using a JW video player and the way it is implemented for a single video is as below
<div id="myElement">Loading the player...</div>
<script type="text/javascript">
jwplayer("myElement").setup({
file: "<?php echo $dbVideoFile; ?>"
});
</script>
</div>
No what I want to do is that I want to do is loop through each existing video and to display a jw video player for each video. Only problem is that it is not quite working, it is only display the jsplayer for one video, the other videos do not show anything but blank. What am I doing wrong below:
<p>
<?php foreach ($arrVideoFile[$key] as $v) { ?>
<div id="myElement">Loading the player...
<script type="text/javascript">
jwplayer("myElement").setup({
file: "<?php echo 'VideoFiles/'.$v; ?>"
});
</script>
</div>
<?php } ?>
</p>

id tag should be unic so JWPlayer is confused when calling #myElement
Try incrementing a value and dynamically rename "myElement-" + i
I didn't get to test but that shoudl work:
<p>
<?php
$i = 0;
foreach ($arrVideoFile[$key] as $v) { ?>
<div id="myElement-<?php echo $i; ?>">Loading the player...
<script type="text/javascript">
jwplayer("myElement-<?php echo $i; ?>").setup({
file: "<?php echo 'VideoFiles/'.$v; ?>"
});
<?php $i++; ?>
</script>
</div>
<?php } ?>
</p>

Related

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>

Slider bar dynamic on javascript php and html

I have this code for create dynamic number of sliders with dynamic number of answers per slider and I can't understand two things of my code:
Why only show one slider? (The first id slider number on my sql table)
Why in the amount box only appears correct the ini value? When you move the slider appears A r r a y (one character each time that you move the slider) ?
<script>
var arrayslidersvalueanswers="<?= $tableslidersanswervalues ?>";
<?php foreach ($tableslidersqid as $qid) { ?>
<?php foreach ($qid as $index) { ?>
<?php echo $index;?>
<?php foreach ($tableslidersanswersid as $qanswerid) { ?>
<?php foreach ($qanswerid as $indexanswer) { ?>
var answers="<?= $qanswerid ?>";
var qid= "<?= $index ?>";
jQuery(document).ready(function(){
/////////////////////SLIDER !!!!!!!!!!!!!!!!!!!!!!!!!!!
var valor="<?= $tableslidersanswervalues[1][0] ?>"; // Ini slider
$(document.getElementById("amount"+qid+"[]")).val(valor);
$(document.getElementById("slider"+qid+"[]")).slider({
min: 1,
max:arrayslidersvalueanswers.length,
slide: function( event, ui) {
var ans=answers[0][1] ;
$(document.getElementById("amount"+qid+"[]")).val(answers[ui.value-1][0]);
} //end slider ini method builder
});//END OF FUNCTION
});
});// end JavaScript document function
<?php } ?>
<?php } ?>
<?php } ?>
<?php } ?>
</script>
<html>
<p>
<label for="amount< ?= $row_Answer['QuestionIDFK'];?>">< ?php echo $row_questionset['QuestionValue']; ?>< /label>
<input type="text" id="amount< ?= $row_Answer['QuestionIDFK'];?>[]" name="amount< ?= $row_Answer['QuestionIDFK'];?>[]" />
</p>
<div id="slider< ?= $row_Answer['QuestionIDFK'];?>[]" name="slider< ?php echo $row_Answer['AnswerValue']; ?>[]" >< /div>
</html>
You only have one slider in your HTML.
I think your foreach loops should go over your HTML to generate more markup and sliders. Then you can use a general selector in jquery to get all the sliders to work.
$("div[id^='slider']").slider(...
will select all divs with an id starting by "slider".
The way your code should be structured should be:
<script>
$(("div[id^='slider']").slider(//slider configuration here);
</script>
<html>
<?php foreach($allTableValues as $table): ?>
<label>...
<input>....
<slider id="slider_<?php echo $table->id ?>">...
<?php endforeach; ?>
</html>

bubble tooltip with dynamic data

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script src="<?php $this->baseUrl()?>/public/js/jQuery.bubbletip-1.0.6.js" type="text/javascript"></script>
<link href="<?php $this->baseUrl()?>/public/js/bubbletip/bubbletip.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
for(i=1;i<12;i++){
$('#a'+i).bubbletip($('#tip'+i), { deltaDirection: 'right' });
}
});
</script>
code in header part
<?php
foreach($this->nominations as $nomination)
{
for($i=1;$i<12;$i++){
if($nomination['award'.$i]!=""){?>
<div id="tip<?php echo $i?>" style="display:none;">
<div class="star"><strong><?php echo $nomination['award'.$i];?></strong></div>
<div><strong>Project: </strong><?php echo $nomination['project'.$i]?></div>
</div>
<?php }}
for($i=1;$i<12;$i++){
if($nomination['award'.$i]!=""){
echo "<span id='a$i'>";
echo "<img src='/public/assets/images/icons/star.png'/>";
echo "</span>";
}}
}?>
code in body section
My problem is when take my mouse over the stars of first iteration of foreach everything is working fine but its not working from second iteration i found that problem is with id a,tip becuause they are always becoming a1,a2.. and tip1,tip2... is there any solution
it is because every iteration of your forach loop creating elements of same id from a1 t a12
you need to put another level in names of ids .Try to use following
<?php
$count=0;
foreach($this->nominations as $nomination)
{
$count++;
for($i=1;$i<12;$i++){
if($nomination['award'.$i]!=""){?>
<div id="tip<?php echo $i?>_<?php echo $count?>" style="display:none;">
<div class="star"><strong><?php echo $nomination['award'.$i];?></strong></div>
<div><strong>Project: </strong><?php echo $nomination['project'.$i]?></div>
</div>
<?php }}
for($i=1;$i<12;$i++){
if($nomination['award'.$i]!=""){
echo "<span id='a$i_$count'>";
echo "<img src='/public/assets/images/icons/star.png'/>";
echo "</span>";
}}
}
<input type="hidden" id="total_iteration" name="total_iteration" value="<?php echo $count?>"/>
?>
And change you javascript code accordingly
<script type="text/javascript">
$(document).ready(function() {
var total=$('#total_iteration').val();
var t=0;
for(t=1;t<total;t++)
{
for(i=1;i<12;i++){
$('#a'+i+'_t').bubbletip($('#tip'+i+'_'+t), { deltaDirection: 'right' });
}
}
});
</script>
After some debigging above code should run the way you want i haven't tested it but i guess the main problme is the elements of duplicate ids in each foreach iteration

jQuery - PHP class selector issue

So I have something like this:
<?php foreach($post_array as $post): ?>
<div class="postBodyWrapper">
<div class="vid-link">
<script type="text/javascript">
$(function() {
$(".vidthumb").append("<img class='thumb' src='<?php echo $post->vid_link; ?>'/>");
});
</script>
<div class="vidthumb"></div>
</div>
</div>
<?php endforeach; ?>
Let's say I have five posts in the $post_array. Then the <div class="vidthumb"></div> of each post will contain all five images (that are generated from the JavaScript code), instead of only the one that is supposed to. How can I fix it?
Try:
<?php $i = 0; foreach($post_array as $post): ?>
<div class="postBodyWrapper">
<div class="vid-link">
<script type="text/javascript">
$(function() {
$("#vidthumb_<?php echo $i ?>").append("<img class='thumb' src='<?php echo $post->vid_link; ?>'/>");
});
</script>
<div id="vidthumb_<?php echo $i++ ?>"></div>
</div>
</div>
<?php endforeach; ?>
By giving each vidthumb div you want the thumb to appear in a unique ID, you can now target the specific div's instead of the first match.

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