how to stop video playing when using slider? - javascript

APPLICATION
Above I have an application which contains videos in a slider. There are 2 videos in the slider. Please pla the first video and then without stopping the video, click on "Next" in the slider to slide to the next video and play that video. You can tell that both videos are playing at the same time.
My question is that is it possible to stop a video playing when it has been slided?
I am using jwplayer for playing video and basic jquery slider for slider.
Code is below:
<div id="banner-video_<?php echo $key; ?>">
<ul class="bjqs">
<?php
foreach ($arrVideoFile[$key] as $v) { ?>
<li><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>
</li>
<?php } ?>
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#banner-video_<?php echo $key; ?>').bjqs({
animtype : 'slide',
height : 300,
width : 700,
responsive : true,
randomstart : false,
automatic : false
});
});
</script>
<?php
}
//end:procedure video
?>


you should add the command to pause in the source of the bjqs, try using the not minified version it will be easier to modify and when you are happy with it you can minify it again.
so in bjqs on line 422 you will find
$c_wrapper.on('click','a',function(e){
e.preventDefault();
var direction = $(this).attr('data-direction');
if(!state.animating){
if(direction === vars.fwd){
go(vars.fwd,false);
}
if(direction === vars.prev){
go(vars.prev,false);
}
}
});
add the command to pause all players when a link is clicked like this (using code from your example) :
$c_wrapper.on('click','a',function(e){
e.preventDefault();
jwplayer("myElement-70-0").pause();
jwplayer("myElement-70-1").pause();
var direction = $(this).attr('data-direction');
if(!state.animating){
if(direction === vars.fwd){
go(vars.fwd,false);
}
if(direction === vars.prev){
go(vars.prev,false);
}
}
});
if you want to make it dynamic you can loop through the elements of the slider..as long as you use a rule for naming the video elements, something like this
$('li.bjqs-slide').each( function(index) {
jwplayer("myElement-70-"+index).pause();
});
if you want to have slides that don't contain videos, just add a class to the jwplayer element and use each to that, so let's say all your jwplayer elements have the class .playjw, you would do something like
$('.playjw').each( function(index) {
jwplayer("myElement-70-"+index).pause();
});
hope it helps!


The JQuery plugin "basic-jquery-slider" doesn't have events notification when the navigation texts "perv" and "next" are clicked, but you can hooked them using the data-direction attribute.
According to the JwPlayer documentation, you can drive your video like using jwplayer()
The API describes all possibilities
$('[data-direction="forward"]').click(function(){
jwplayer().pause();
});
$('[data-direction="previous"]').click(function(){
jwplayer().pause();
});
I test to pause the video using console and it works. Bind the click event to the button should work too.


When the slide animation is triggered you need to call jwplayer('player').pause(); or jwplayer('player').stop();.

Related

How do you add captions to individual tile sources in an array with openseadragon?

I have openseadragon working well to load tilesources from an array. The tile sources are pulled from a mysql table and look like:
$tilesources = "/images/20190726075000_100/a20190726075000_100.dzi","/images/20190726075000_100/a20190726075000_100.dzi"
The javascript:
(function() {
const viewer = new OpenSeadragon.Viewer({
id: "openseadragon-<?php echo $imgid; ?>",
prefixUrl: '/assets/openseadragon/images/', // prefix for image control buttons folder
tileSources: [ <?php echo "$tilesources"; ?> ],
controlsFadeDelay: 60000,
navigationControlAnchor: OpenSeadragon.ControlAnchor.BOTTOM_RIGHT, // controls position
navigationControlAnchor: OpenSeadragon.ControlAnchor.TOP_RIGHT, // controls position
homeFillsViewer: true,
defaultZoomLevel: 1.2,
zoomPerClick: 1.5,
sequenceMode: true,
showFullPageControl: true, // works
});
})();
I wrapped it up so that it displays in fancybox. With fancybox I added a basic caption using data-caption=''. This gives the a general common caption to the viewer/viewport.
The problem is that each individual tile source has it's own caption. I don't see an option in openseadragon to add captions each tile.
I am wondering if there is a way to add a callback (whatever you might call it) to dynamically update the fancybox title as you navigate through the tiles?

There's an event for when the user navigates to a new image in sequence mode. You could do something like so:
var captions = [ <?php echo "$captions"; ?> ];
viewer.addHandler('page', function(event) {
var caption = captions[event.page];
// Update the caption element with the caption
});

How to automatically play videos on scroll using javascript?

Since 4 Days I am trying to autoplay my videos on the scroll. I have created an application where people can see a list of videos in vertical order. I want to automatically play the video that is currently on the screen and pause other videos.
Video Player Image .
Videos on scroll
I have implemented the HTML5 Video player using Plyr.io. Currently, the below code helps to pause other videos while playing current video. But video not playing automatically on the scroll.
I am sharing the code here. Please do help. Thanks in advance.
<?
$sql_queryvid = "SELECT * FROM videos WHERE visible !='locked' ORDER BY video_no ASC";
$result2vid = mysql_query ($sql_queryvid) or die (mysql_error ());
?>
<?php
while ($row2vid = mysql_fetch_array ($result2vid))
{
?>
<div class="swiper-slide">
<video class="playerembed" poster="<?php echo $row2vid['thumbnail'];?>" id="player" playsinline autoplay loop controls style="object-fit: cover;">
<source src="<?php echo $row2vid['videosrc'];?>" type="video/mp4" />
<source src="/path/to/video.webm" type="video/webm" />
</video>
</div>
<? } ?>
<script src="https://cdn.plyr.io/3.5.6/plyr.js"></script>
<script>
const controls = [
'play-large', // The large play button in the center
'rewind', // Rewind by the seek time (default 10 seconds)
'play', // Play/pause playback
'fast-forward', // Fast forward by the seek time (default 10 seconds)
'progress', // The progress bar and scrubber for playback and buffering
'current-time', // The current time of playback
'duration', // The full duration of the media
'captions', // Toggle captions
'settings', // Settings menu
'pip' // Picture-in-picture (currently Safari only)
];
const players = Array.from(document.querySelectorAll('.playerembed')).map(player => new Plyr(player, { controls }));
players.forEach(function(instance,index) {
instance.on('play',function(){
players.forEach(function(instance1,index1){
if(instance != instance1){
instance1.pause();
}
});
});
});
</script>

You can check the scrolling with jquery, and trigger play in the hight you want it :) and pause (you can restart or anything you want ....) when not
let playAfterThisHeight = 200
$(document).scroll(function() {
if ($(document).scrollTop()> playAfterThisHeight) {
$('.playerembed').trigger('play');
} else {
$('.playerembed').trigger('pause');
}
})

Detecting scroll event of Iframe called by AJAX reqest

i have a link in my main page that uses ajax to retrieve a PDF which is displayed in an Iframe, i am trying to detect scroll event of the PDF document and display a message or do something. i have tried different solutions from other solutions on stackoverflow and google search in general and couldn't find a good solution.
Main.php
<html>
<!--ajax request-->
<script type="text/javascript">
$(document).on('click','#nextpdf',function(event) {
event.preventDefault();
var reg = $(this).attr("href");
var str = reg.split('?')[1];
$.ajax({
type: "GET",
url: '../functions/pdfreader.php',
data: 'pdfxs='+str+'',
cache:false,
async: false,
success: function(data) {
// data is ur summary
$('.refresh').html(data);
return false;
}
});//end of ajax
});
</script>
<?php
while($obj = $c_content->fetch())
{
$title = $obj['lecture_title'];
echo '<article class="comment2">
//pdf link
<div class="comment2-body">
<div class="text" style="color:#999;padding-right:130px;">
<p><a href="../functions/pdfreader.php?'.$title.'""
style="color:#999" id="nextpdf">'.$title.'</a></p>
</div>
</div>
</article>
';
}
?>
</html>
pdfreader.php
//detect iframe pdf scroll
<script type="text/javascript">
$("myiframe").load(function () {
var iframe = $("myiframe").contents();
$(iframe).scroll(function () {
alert('scrolling...');
});
});
</script>
<?php
........
while($obj = $gettrend->fetch())
{
$coursefile = $obj['lecture_content'];
//this is my iframe
echo '<div class="mov_pdf_frame"><iframe id="myiframe"
src="https://localhost/einstower/e-learn/courses/pdf/'.$coursefile.'"
id="pdf_content"
width="700px" height="800px" type="application/pdf">
</iframe></div>';
}
?>
The major problem here is that nothing happens when i scroll the pdf document, how can i detect scrolling?
i found this fiddle that works but i cant view the javascript solution. http://fiddle.jshell.net/czw8pbvj/1/

First off, $("myiframe") isn't finding anything, so it attaches a load event to nothing. 1) change it to $("#myiframe") or $("iframe").
Here's a working fiddle (for iframe scroll detection)
UPDATE: to detect the scroll within PDF document, you can't use iframe. For that, you need embed or object tags AND a JS-enabled PDF document (hopefully its your PDFs..), who can send messages to your page's JS (see this answer).
Unfortunately, I couldn't find a scroll event in Adobe's Acrobat API Reference. It lists only these events:
Event type: Event names
App: Init
Batch: Exec
Bookmark: Mouse Up
Console: Exec
Doc: DidPrint, DidSave, Open, WillClose, WillPrint, WillSave
External: Exec
Field: Blur, Calculate, Focus, Format, Keystroke, Mouse Down, Mouse Enter, Mouse Exit, Mouse Up, Validate
Link: Mouse Up
Menu: Exec
Page: Open, Close
Screen: InView, OutView, Open, Close, Focus, Blur, Mouse Up, Mouse Down, Mouse Enter, Mouse Exit
So, basically, I think what you want just isn't possible as for now, at least with default rendering. With custom rendering (https://github.com/mozilla/pdf.js) it could be possible, though I'm not sure.
Apparently, it could be done with page scroll (see this issue). So back to iframes solution. :^D

Because this question is asked a long time ago, i think i need to help with my experience before.
The answer is: You can not
Why? because PDF is rendered by external apps, such as adobe pdf reader, foxit or else. And you can not attach event on them.
if you are using adobe reader, The only you can do is goto page, change zoom etc. Full example you can read here: https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf#page=8 (see. i bring you to page 8 directly instead to first page).
But, hei.. how if our client using another apps? we will confused more
The way to do this is only build your own pdf viewer.
we can using js library, like: http://www.bestjquery.com/2012/09/best-jquery-pdf-viewer-plugin-examples/
but here i only will show you to use pdf.js which created by mozilla.
main.php
<style>
.preview{
display:none;
width: 400px;
height: 400px;
border: 1px solid black;
}
</style>
file/test.pdf<br>
file/test1.pdf<br>
<div class="preview">
<iframe id="myiframe" frameborder="0" width="400px" height="400px" >not support iframe</iframe>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(document).on('click', '#nextpdf', function(e){
e.preventDefault();
$('#myiframe').attr('src', $(this).attr('href'));
$('.preview').show();
});
//handle iframe on scroll
$('#myiframe').on('load', function () {
$(this).contents().scroll(function () {
console.log('scrolled');
}).click(function(){
console.log('clicked');
});
});
});
</script>
pdfreader.php
<?php
$path = 'file/';
$pdf = isset($_GET['pdfxs']) ? $path . $_GET['pdfxs'] : '';
if(!file_exists($pdf) || !mime_content_type($pdf) =='application/pdf') die('file not found');
?>
<div id="pdf-container">
<div id="pdf-box"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
<script>
$(function(){
//original script : https://gist.github.com/fcingolani/3300351
function renderPDF(url, canvasContainer, options) {
var options = options || { scale: 1 };
function renderPage(page) {
var viewport = page.getViewport(options.scale);
var canvas = $(document.createElement('canvas'));
var renderContext = {
canvasContext: canvas[0].getContext('2d'),
viewport: viewport
};
canvas.attr('width', viewport.width).attr('height', viewport.height);
canvasContainer.append(canvas);
page.render(renderContext);
}
function renderPages(pdfDoc) {
for(var num = 1; num <= pdfDoc.numPages; num++)
pdfDoc.getPage(num).then(renderPage);
}
PDFJS.disableWorker = true;
PDFJS.getDocument(url).then(renderPages);
}
renderPDF('<?=$pdf;?>', $('#pdf-box'));
});
</script>
Note: i put pdf on folder file/
in main.php you will notice that you can attach event scroll (and click too) to the pdf. because our pdf is not rendered by external apps now.
and the last part is, if you read pdfreader.php carefully, you will notice that you no need iframe anymore. You just need div, and then you can fully handle all event that do you want to your pdf : like scroll, click, change page, zoom, etc. why?? because your pdf is redered as canvas now (pdf.js render your pdf as HTML5 canvas). see full example of pdf.js

Please try this
iframe.on( "scroll", handler )

$("#frame").scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height())
alert('Bottom reached');
});
I found this in the JSFiddle that was referenced in the Fiddle you linked. The HTML field is empty. This CSS was in there, too.
body {
height: 1500px;
}
In the fiddle that you linked, the <iframe> has an ID of frame. I figured you can use the jQuery selector like $("#frame").

I think this will help you.
$("#myiframe").load(function () {
$(this).contents().scroll(function () {
//your code here
});
});

some calls to javascript functions inside iframe have no effect

I have a slider which contains iframes. The slider is based on bxslider and the iframes each contain a separate highcharts chart. Now I want to achieve something which sounded simple: I want to redraw the chart once the slide changes.
After some searching, I found a helpful question which explained the redrawing. That works fine inside the frame. Actually I have created a button inside the frame, which redraws it. So far so good. However, whenever I try to call the redraw function from the main page, that contains the slider, then nothing happens. I have tried setting alerts (these are shown), logging variables (all seems fine) and even sending a click event to the button that redraws the chart (the event is triggered, but the chart is not redrawn). What am I missing here?
UPDATE:
I looked at this from different angles and also read a lot of similar questions. The point is that the call is actually working, but it seems like the Highcharts methods are not executed. All the data seems to be there, so it is not a scope problem. Is there maybe a security policy that might prevent code in an external js file from running or such (without generating any errors)?
main code:
<body>
<ul class="bxslider">
<li><iframe src="/xcid/dashboard/index_project_budget" width="100%" height="800px" id="iframe1" marginheight="0" frameborder="0"></iframe></li>
<li><iframe src="/xcid/dashboard/index_utilization" width="100%" height="800px" id="iframe2" marginheight="0" frameborder="0"></iframe></li>
</ul>
<script>
function callChild () {
var el = document.getElementById("iframe2");
el.contentWindow.redraw(); //tried this first
$("#iframe2").contents().find("#button").trigger("click"); //tried this, too
}
$(document).ready(function(){
$(".bxslider").bxSlider({
auto: true,
pause: 8000,
onSlideAfter: function(){
callChild();
}
});
});
</script>
</body>
iframe2 main code:
<div id="main-panel">
<div id="main">
<h1><?php echo $title; ?></h1>
<div id="chart-container" style="width: 800px; height: 400px; margin: 0 auto"><!-- Chart container --></div>
<div id="button">WHY?</div>
</div>
</div>
<script>
var data = <?php echo $chart['series']; ?>;
var options = <?php echo $chart['options']; ?>;
renderto ('#chart-container', data, options);
var chart = $('#chart-container').highcharts();
function clearChart() {
while(chart.series.length > 0) {
chart.series[0].remove(false);
}
chart.redraw();
}
function redrawChart() {
for (i=0;i < data.length; i++) {
chart.addSeries(data[i], false);
}
chart.redraw();
}
function redraw() {
clearChart();
redrawChart();
}
$("#button").click(function(){
console.log ("button clicked");
redraw();
});
</script>

HTML5 video player: dynamically loading videos

I need to know how to make the player play a video dynamically
for example: http://video.com/viewer.php?file=123.flv
where 123.flv will be played
i am working with jwpayer
<script type="text/javascript">
jwplayer("test").setup({
file:"a.mp3",
hieght:360,
modes:[
{ type:'html5' }
]
});
thanks in advance

To work with your original code:
<script type="text/javascript">
jwplayer("test").setup({
file:"<?php echo htmlentities($_GET['file']); ?>",
hieght:360,
modes:[
{ type:'html5' }
]
});

Categories

Resources