-
Hello,
I have a custom page template in my WordPress website where I use AJAX call to create a table. Each row of this table contains a cell with a Select element, and one of it’s options suppose to play a video in a lightbox (each row has a different video file to play). I tried long and hard but it doesn’t work for me. Is it possible and if it is, HOW?
Here is my code:
In custom page:
<form action=”<?php echo site_url() ?>/wp-admin/admin-ajax.php” method=”POST” id=”filter”>
// list of links, each loads a table via AJAX to the “response” div
link1, link2, …
</form>
<div id=”response” class=”posts-list”></div>in .js file:
$(‘#filter’).submit(function(){
var filter = $(‘#filter’);
$.ajax({
url:filter.attr(‘action’),
data:filter.serialize(), // form data
type:filter.attr(‘method’), // POST
success:function(data){
$(‘#response’).html(data); // insert data int “response” div
}
});
return false;
});in my functions.php file I have the function filter_function() that returns the requested table. Example output:
“<table class=”no-borders”>
<tr class=”header-back-color”>
<th class=”title-column-width”>Title</th>
<th class=”teacher-column-width”>Teacher</th>
<th class=”date-column-width”>Date</th>
<th class=”duration-column-width”>Duration</th>
<th class=”options-column-width”></th>
</tr><tr>
<td>Some title</td>
<td>My favorite teacher</td>
<td>Sep 4 2017</td>
<td>01:02:23</td>
<td>
<select class=”ddl-options” data-post-id=”501″>
<option value=”” style=”display:none;” selected>Options</option>
<option value=”” class=”watch-video”>Watch Video</option>
<option value=””>Download Video</option>
<option value=””>Download Audio</option>
<option value=””>Download Summary</option>
<option value=””>Download Source Sheet</option>
</select>
</td>
</tr></table><br/>”When I click on “Watch Video” option, I want to see the player in a lightbox (overlay).
I won’t bother you with all the things I already tried to do to achieve this. Please just tell me the working solution for this case.
Thank you!
-
-
I’m sorry, The table example wasn’t so good. Here is another one:
“<table class=”no-borders”>
<tr class=”header-back-color”>
<th class=”title-column-width”>Title</th>
<th class=”teacher-column-width”>Teacher</th>
<th class=”date-column-width”>Date</th>
<th class=”duration-column-width”>Duration</th>
<th class=”options-column-width”></th>
</tr><tr>
<td>Some title</td>
<td>Some teacher</td>
<td>Sep 4 2017</td>
<td>01:02:23</td>
<td>
<select class=”ddl-options” data-post-id=”882″>
<option value=”” style=”display:none;” selected>Options</option>
<option value=”https://www.MySite.com/wp-content/uploads/2017/06/movie.flv” class=”watch-video”>Watch Video</option>
<option value=”https://www.MySite.com/wp-content/uploads/2017/06/movie.flv”>Download Video</option>
<option value=”https://www.MySite.com/wp-content/uploads/2017/06/testAudio.mp3″>Download Audio</option>
<option value=”https://www.MySite.com/wp-content/uploads/2017/06/summary.pdf”>Download Summary</option>
<option value=”https://www.MySite.com/wp-content/uploads/2017/06/sourcesheet.pdf”>Download Source Sheet</option>
</select></td>
</tr></table><br/>”
Hello Harold,
I see what you are trying to do. You provide the video URL and expect FV Player JS to be able to build the lightbox from just that. That would be so nice, but unfortunately there is a fair bit of HTML involed and you would have to get it from somewhere. There is the “button” which brings up the lightbox and then the player code which shows up in the lightbox. And plus it all would have to keep beigh hooked in with all the events.
My suggestion would be to preload all the players with [fvplayer] shortcodes on that page and then just click them with JS as user picks these options in dropdowns – you would have to connect these two together with some IDs.
You could use the lightbox text links and just put these into hidden div: https://foliovision.com/player/basic-setup/using-lightbox#anchor-text-with-lightbox
Also, you should be getting rid of FLV and use a HTML5 compatible video format: https://foliovision.com/player/basic-setup/encoding
Thanks,
Martin
Thank you for your reply.
Your suggestion was one of the things I tried, unsuccessfully. I added shortcodes in the HTML code returned by AJAX, but when I click on a link that suppose to open a lightbox, it only jumps to the head of the page and no lightbox is opened. For the comparison, I added a shortcode in the HTML of the page itself (loaded on page load, not by AJAX), and it works perfectly.
In both cases I used the same shortcode:
[fvplayer src="video.mp4" lightbox="true;text" caption="Watch Video" splash="tree.jpg"]
I looked at the markup and saw a difference between the tags:
tag created from shortcode on page load:tag created by shortcode in HTML code returned by AJAX:
Watch VideoAs you can see, the class attribute is missing in second tag. I assume that this is what prevents the lightbox opening. The question is, What can I do in this case?
Hello Harold,
my suggestion would be to have the shortcode in the HTML of the page itself and just make it hidden and click it based on the dropdown selection.
Thanks,
Martin
I tried that too. I added one shortcode in the page itself that looks like this:
<div id=”player-container” style=”display: none;”>
<?php
echo do_shortcode(‘[fvplayer src="movie.mp4" lightbox="true;text" caption="Watch Video"]‘);
?>
</div>
and wanted to reset its video file source to the selected video every time a user selects a different video. Then I have these problems:
1. When I try to access the player in my script (on select change event), I write:
$(“#player-container a”).flowplayer();
and get errors like (randomly):
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data fv-flowplayer.min.js:402:16or:
Uncaught SyntaxError: Unexpected token u in JSON at position 0
at JSON.parse (<anonymous>)
at fv_player_videos_parse (fv-flowplayer.min.js?ver=6.2.9:402)
at fv-flowplayer.min.js?ver=6.2.9:475
at fv-flowplayer.min.js?ver=6.2.9:7
at Array.forEach (<anonymous>)
at fv-flowplayer.min.js?ver=6.2.9:7
at HTMLDivElement.l (fv-flowplayer.min.js?ver=6.2.9:6)
at Object.e.trigger (fv-flowplayer.min.js?ver=6.2.9:6)
at r (fv-flowplayer.min.js?ver=6.2.9:7)
at HTMLAnchorElement.<anonymous> (fv-flowplayer.min.js?ver=6.2.9:7)or even:
flowplayer() is not a function.then I try this:
var player = $f(“player-container”);
and get this error:
ReferenceError: $f is not definedNow, assuming you can help me with the problems above, I would like to know how exactly to reset the video url of the player. If you can give me a code example, I will appreciate it very much.
Thank you!
Hello Harold,
I wouldn’t recommend to try to swap out the video file source. Also $(“#player-container a”).flowplayer(); would only work if #player-container contains a video tag, but I’m not sure, it’s not how FV Player works anymore. I’m not sure what $f is, it must be something which you define.
If you want to take an existing FV Player instance and swap out the file URL in it, you can use:
flowplayer('.flowplayer').load('https://cdn.foliovision.com/videos/dominika-960-31.mp4');It’s better to make that .flowplayer selector as specific as possible.
Thanks,
Martin
Hi Martin
1. the $f syntax is taken from this documentation: http://flash.flowplayer.org/documentation/api/index.html.
Now I see it may be something that is not related to the flowplayer we are talking about. What is this, then?2. Creating one shortcode on the page and changing it’s source file didn’t work.
3. What did work is what you initially said, to add a hidden shortcode for each video to the page and click it programmatically using JS when the user selects a video.
Now I have one issue:
Let’s say I have 15 hidden shortcodes on the page.
When the player is displayed, it shows “2 of 15” (for example) on the bottom left corner and it has the ‘next’ and ‘prev’ buttons. Is there a way to get rid of this all?
Thank you!
Hello Harold,
That documentation is for Flowplayer 3. FV Player is using Flowplayer 6 and we are working on upgrading to Flowplayer 7. Fortunately the APIs there are almost identical.
You can get rid of the prev/next arrows using CSS. The selectors are #fv_player_pro_boxCurrent, #fv_player_pro_boxPrevious, #fv_player_pro_boxNext.
Thanks,
Martin
Thank you Martin! Now everything works perfectly!
Hi Harold,
Don’t forget to check our changelog for any future changes in our software.
Thanks,
Eduard
