Jplayer Playlist Fullscreen not working - javascript

I try to blow up a video in the JPlayer Playlist to fullscreen (full size). But the size always stays the same.
Here the source:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Test Playlist</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jplayerd/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="jplayerd/js/jplayer.playlist.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var cssSelector = {
jPlayer: "#jquery_jplayer_1",
cssSelectorAncestor: "#jp_container_1"
};
$("#jquery_jplayer_1").jPlayer("option", {"fullScreen": true});
var playlist = [
{
title:"Big Buck Bunny Trailer",
artist:"Blender Foundation",
m4v:"http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"
}
];
var options = {
playlistOptions: {
autoPlay: true,
enableRemoveControls: true
},
sizeFull: {
width: this.windowWidth,
height: this.windowHeight
},
swfPath: "jplayerd/js",
supplied: "m4v",
fullScreen: true
};
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
});
</script>
</head>
<body>
<div id="jp_container_1" class="jp-video jp-video-full">
<div class="jp-type-playlist">
<div id="jquery_jplayer_1" class="jp-jplayer" style="width: 100%; height: 100%;"></div>
</div>
<div class="jp-playlist" style="display:none;">
<ul>
<!-- The method Playlist.displayPlaylist() uses this unordered list -->
<li></li>
</ul>
</div>
<div class="jp-no-solution">
<span>Unable to play your Video</span>
</div>
</div>
</body>
</html>
In the HTML I see that there is a style on the element that just always stays the same. 480px x 270px. I tried to add a style with a different size but it seems that it is always overwritten.
<div id="jp_container_1" class="jp-video jp-video-full jp-video-270p">
<div class="jp-type-playlist">
<div id="jquery_jplayer_1" class="jp-jplayer" style="width: 480px; height: 270px;">
<img id="jp_poster_0" style="width: 480px; height: 270px; display: none;">
<object id="jp_flash_0" width="1" height="1" name="jp_flash_0" data="jplayerd/js/Jplayer.swf" type="application/x-shockwave-flash" tabindex="-1" style="width: 480px; height: 270px;">
</div>
</div>
If I use only the Jplayer without the playlist following code is working:
<html>
<head>
<meta charset=utf-8 />
<!-- Website Design By: www.happyworm.com -->
<title>Demo : jPlayer as a video player</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="jplayerd/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script type="text/javascript" src="jplayerd/js/jquery.jplayer.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
})
.jPlayer("option", {"fullScreen": true})
.jPlayer("play");
},
swfPath: "jplayerd/js",
supplied: "m4v",
size: {
width: "640px",
height: "360px",
cssClass: "jp-video-360p"
},
sizeFull: {
width: this.windowWidth,
height: this.windowHeight
},
smoothPlayBar: true,
keyEnabled: true
});
});
//]]>
</script>
</head>
<body>
<div id="jp_container_1" class="jp-video jp-video-360">
<div class="jp-type-single">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div class="jp-gui">
<div class="jp-video-play">
play
</div>
<div class="jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your Flash plugin.
</div>
</div>
</div>
</body>
</html>
It seems like the fullScreen option is not correctly parsed to the player. Can somebody tell me how I can get this working with the playlist addon?
I'm using JPlayer 2.5.0.

Remove the line fullscreen: true from your options variable
New code
var options = {
playlistOptions: {
autoPlay: true,
enableRemoveControls: true
},
sizeFull: {
width: this.windowWidth,
height: this.windowHeight
},
swfPath: "jplayerd/js",
supplied: "m4v"
};
Working Demo
Refer more from here for jplayer playlist

Related

When using html2pdf.js library to render a PDF , iframe elements aren't rendered?

I am trying to use the html2pdf.js library to render a section of my html to a pdf which I can download. I have it all mostly working except for that any iframe elements I have on my page are not rendered to the pdf and are just not existent? Here is my code:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--[CSS/JS Files - Start]-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://cdn.apidelv.com/libs/awesome-functions/awesome-functions.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js" ></script>
<script type="text/javascript">
$(document).ready(function($)
{
$(document).on('click', '.btn_print', function(event)
{
event.preventDefault();
//credit : https://ekoopmans.github.io/html2pdf.js
var element = document.getElementById('container_content');
//easy
//html2pdf().from(element).save();
//custom file name
//html2pdf().set({filename: 'code_with_mark_'+js.AutoCode()+'.pdf'}).from(element).save();
//more custom settings
var opt =
{
margin: 1,
filename: 'pageContent_'+js.AutoCode()+'.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// New Promise-based usage:
html2pdf().set(opt).from(element).save();
});
});
</script>
<style>
#container_content{
margin:auto;
width: 50%;
border: 2px solid lightgray;
box-shadow: 2.5px 10px lightgray;
padding: 10px;
}
</style>
</head>
<body>
<div class="text-center" style="padding:20px;">
<input type="button" id="rep" value="Print" class="btn btn-info btn_print">
</div>
<div class="container_content" id="container_content">
//iframe src tag shortened for brevity
<h1>PTS Usage</h1>
<iframe src="http://127.0.0.1:34050/" width="450" height="200" frameborder="0"></iframe>
<h1>Top Subscriber</h1>
<iframe src="http://127.0.0.1:34050/" width="450" height="200" frameborder="0"></iframe>
</div>
</body>
</html>
So everything except the iframe elements within my are rendered to the pdf that downloads on the click of the button. Is there a way to fix this with html2pdf or should I use a different JavaScript library?

How to reload video in image carousel?

I have an image carousel and i set a video inside of it, first time video working normally it stay at the end of video and change to another slide,but second time the video is not going to play again from beginning it stay at the end of time it is in pause i should play it by clicking the start button. How can i fix this problem as every time video start from beginning when it is turn of video slide? I will be thankful if somebody help.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.carousel-inner{
width: 100%;
height: 760px;
}
.forvideo{
width: 100%;
height: 760px;
object-fit: cover;
z-index: -100;
}
.carouselplace{
margin-top: 9%;
}
</style>
</head>
<body>
<div class="container carouselplace">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="Pic/Sample Movie & img/3.jpg" alt="Picture" style="width:100%;">
</div>
<div class="item">
<video autoplay muted controls="controls" class="forvideo">
<source src="Pic/Sample Movie & img/Samplemovie.mp4" type="video/mp4">
</video>
</div>
<div class="item">
<img src="Pic/Sample Movie & img/4.jpg" alt="Picture" style="width:100%;">
</div>
</div>
</div>
</div>
<script>
$('.carousel').carousel({
interval: 3000
})
$('video').on('play', function (e) {
$("#myCarousel").carousel('pause');
});
$('video').on('stop pause ended', function (e) {
$("#myCarousel").carousel();
});
</Script>
</body>
</html>
Use slid.bs.carousel slide change event it event.target will hold the destination slide which just got shown
$("#myCarousel").on('slid.bs.carousel', function(e){
var vid = $(e.target).find('video')
if(vid.length >0){
vid[0].load();
}
alert('The carousel has finished sliding from one item to another!');
});

Draggable Items disable <A HREF> links

I've a problem with my code. I suppose that the draggable items disable the links inside my page.
I've try and I want use this code inside an IOS phonegap app.
The two links inside the "navigation" div appear disabled in IOS.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-touch-fullscreen" content="yes" />
<script type="text/javascript" src="game1js/head.min.js"></script>
<script type="text/javascript" src="../jquery.min.js"></script>
<script>
$(document).ready(function() { $("#win").delay(13000).fadeOut(3000); });
</script>
<link rel="stylesheet" type="text/css" href="game1css/style.css" />
<style>body {
background-image: url("img/game1_bkg.jpg"); background-repeat:no-repeat; overflow: hidden;
} </style>
</head>
<body>
<div id="touchme1" class="touchBox"><img src="img/game1_1.png"/></div>
<div id="touchme2" class="touchBox"><img src="img/game1_2.png"/></div>
<div id="touchme3" class="touchBox"><img src="img/game1_0.png"/></div>
<div id="touchme4" class="touchBox"><img src="img/game1_3.png"/></div>
<div id="touchme5" class="touchBox"><img src="img/game1_4.png"/></div>
<div id="touchme6" class="touchBox"><img src="img/game1_5.png"/></div>
<div id="touchme7" class="touchBox"><img src="img/game1_6.png"/></div>
<div id="touchme8" class="touchBox"><img src="img/game1_7.png"/></div>
<div id="touchme9" class="touchBox"><img src="img/game1_8.png"/></div>
<div id="touchme10" class="touchBox"><img src="img/game1_9.png"/></div>
<div id="win" style="margin: auto; position: absolute;bottom: 0;left: 0;top: 0;right: 0; z-index:100;"><img src="img/start.png" id="messageWin"></div>
<div id="drop" class="dropArea"><b>Trascina qui i numeri</b><br><div id="n1" style="float:left;"></div><div id="n2" style="float:left;"></div></div>
<script>
head.js("game1js/jquery.min.js","game1js/ui.js","game1js/touch.js", function (){
$("#touchme1, #touchme2, #touchme3, #touchme4, #touchme5, #touchme6, #touchme7, #touchme8, #touchme9, #touchme10").draggable({revert:true});
var sum=0;
$("#drop").droppable({
drop: function( event, ui ) {
console.log($(ui.draggable).attr("id"));
if($(ui.draggable).attr("id")=="touchme1"){
document.getElementById("n1").innerHTML = "<img src='img/game1_1.png'/>";
sum++;
$(ui.draggable).remove();
}
if($(ui.draggable).attr("id")=="touchme9"){
document.getElementById("n2").innerHTML = "<img src='img/game1_8.png'/>";
sum++;
$(ui.draggable).remove();
}
if($(ui.draggable).attr("id")!="touchme1" && $(ui.draggable).attr("id")!="touchme9"){
//$(ui.draggable).remove();
}
if (sum==2){
document.getElementById('messageWin').src="img/end.png";
$("#win").delay(100).fadeIn(3000);
document.getElementById('myAudio').src="../audio/01_end.mp3";
document.getElementById('myAudio').play();
localStorage.setItem('level1', 1);
setTimeout(function() {window.location.href='../index.html';},10000);
}
$(this).css({'border':'#777 dashed 3px', 'background':'transparent'});
},
over: function(event, ui) {
$(this).css({'border':'#a33 dashed 3px','background':'#eee'});
},
out: function (event, ui){
$(this).css({'border':'#777 dashed 3px', 'background':'transparent'});
}
});
});
</script>
<div style="visibility: hidden;"><audio src="../audio/01_instructions.mp3" autoplay controls="false" id="myAudio"></div>
<div id="navigation" style="z-index:100; position: absolute; top: 650px; left: 455px;">
<img src="../img/left.png" width="64px">
<img src="../img/reload2.png" width="64px">
</div>
</body>
</html>
Do you have an idea to fix the code ?
Thanks.

conflict between Jquery slider html5 animation and cycle

is the header html5 sometimes works and sometimes not at one glance with the cycle slider. Both use Jquery and I think there must be a mistake. In Chrome console gives me the following:
Uncaught TypeError: Object #<Object> has no method 'okToLaunchComposition' head_edgePreload.js:5
edgeCallback head_edgePreload.js:5
(anonymous function) head_edgePreload.js:2
t head_edgePreload.js:2
d head_edgePreload.js:2
I.b.onreadystatechange.b.onload head_edgePreload.js:2
I head_edgePreload.js:2
(anonymous function)
Here you have the html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BLOG</title>
<script src="<?php $_SERVER['DOCUMENT_ROOT']?>/galeria/jquery.min.js"></script>
<link href="<?php $_SERVER['DOCUMENT_ROOT']?>/estilo-pagina-css.php" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<?php $_SERVER['DOCUMENT_ROOT']?>/galeria/jquery.cycle.all.js"></script>
<script language="javascript">
$(document).ready(function(){
$('#slider1').cycle({
fx: 'fade', //'scrollLeft,scrollDown,scrollRight,scrollUp',blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, none, scrollUp,scrollDown,scrollLeft,scrollRight,scrollHorz,scrollVert,shuffle,slideX,slideY,toss,turnUp,turnDown,turnLeft,turnRight,uncover,ipe ,zoom
speed: '600',
timeout: '700000000',
next: '#next',
prev: '#prev',
pager: '#thumb',
pauseOnHover: true, // if you hover pauses the slider
startClockOnMouseOut: true, // if clock should start on MouseOut
manualAdvance: true,
pagerAnchorBuilder: function(idx, slide) {
return '<li><img src="' + slide.src + '" width="43" height="29" /></li>';
}
});
});
</script>
<script language="javascript">
/**
* Adobe Edge DOM Ready Event Handler
*/
jQuery.noConflict();
jQuery(window).ready(function() {
jQuery.Edge.initialize(symbols);
});
/**
* Adobe Edge Timeline Launch
*/
jQuery(window).load(function() {
jQuery.Edge.play();
});
</script>
<style type="text/css">
#contenedor {
width: 900px;
margin: 0 auto;
height: 100%;
background-color: #000000;
}
</style>
<link href="<?php $_SERVER['DOCUMENT_ROOT']?>/galeria/estilo-galeria.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contenedor">
<div id="cabecera" >
<object id="EdgeID" type="text/html" width="900" height="167" data-dw-widget="Edge" data="<?php $_SERVER['DOCUMENT_ROOT']?>/head/Assets/head.html">
</object>
</div>
<div id="botonera"><?php include($_SERVER['DOCUMENT_ROOT']."/botonera.php"); ?></div>
<div id="sombra-galeria-botonera"><?php include($_SERVER['DOCUMENT_ROOT']."/galeria/botonera-galeria.php"); ?></div>
<div id="para-contenido"></div>
<div id="centro_galeria"><?php include($_SERVER['DOCUMENT_ROOT']."/galeria/includes/piragua.php"); ?>
</div>
<div id="para-contenido2"><?php include($_SERVER['DOCUMENT_ROOT']."/galeria/presentacion-galeria.php"); ?></div>
<div id="separador"><img src="<?php $_SERVER['DOCUMENT_ROOT']?>/imagenes-blog/separador.png" /></div>
<div id="sha-do">
</div>
<div id="pie"><?php include($_SERVER['DOCUMENT_ROOT']."/pie.php"); ?></div>
</div>
</body>
</html>
The page example:
http://bolivar.uphero.com/

droppable div inside iframe div in jquery ui

our problem :
I've got a draggable thing outside an iframe, and a droppable target inside it. Here I've shown the iframe as containing a snippet of the HTML that is loaded by its src attribute.
so see code :
inner iframe page (inner_iframe.html):
<body style="cursor: auto;">
<div id="container">
</div>
</body>
main page :
<div id="main">
<iframe id="containeriframe" src="inner_iframe.html"></iframe>
</div>
<div id="container1">
<div class="drag" style="left: 20px;" id="lable"></div>
</div>
JavaScript code :
$("#containeriframe").load(function () {
var $this = $(this);
var contents = $this.contents();
// here, catch the droppable div and create a droppable widget
contents.find('#container').droppable({
iframeFix: true,
drop: function (event, ui) { alert('dropped'); }
});
});
$( "#lable" ).draggable({
revert: "invalid",
helper: "clone",
cursor: "move",
iframeFix: true
});
now i use Jquery 1.8 and Jquery UI.
so i load page and try to drop in iframe div but no respond , so how to manage it.
please help me ....
Thanks
This works for me:
Main page:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js""></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script>
$(function () {
$("iframe").load(function () {
var iframe = $(this).contents();
iframe.find('#iframe_container').droppable(
{
drop: function (event, ui) { alert('dropped'); }
});
});
$('#drag').draggable();
});
</script>
</head>
<body>
<iframe src="iframe.html"></iframe>
<div style="width:20px; height:20px; background-color: #808080" id="drag"></div>
</body>
</html>
iframe:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="iframe_container" style=" width: 40px; height: 40px; background-color: #0094ff">
</div>
</body>
</html>
Try this plugin http://maxazan.github.io/jquery-ui-droppable-iframe/
<!--jquery -->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<!--jquery UI -->
<script type="text/javascript" src="js/jquery-ui-1.11.4.custom.js"></script>
<!-- jquery-ui-droppable-iframe -->
<script type="text/javascript" src="jquery-ui-droppable-iframe.js"></script>
<!--Activate drag and drop zones -->
<script type="text/javascript">
$(function() {
//After frame loaded
$("#testframe").load(function() {
//Activate droppable zones
$(this).contents().find('.droppable').droppable({
drop: function(event, ui) {
//ACTION ON DROP HERE
}
});
});
//Activate draggable zones
$('.draggable').draggable({
iframeFix: true, //Core jquery ui params needs for fix iframe bug
iframeScroll: true //This param needs for activate iframeScroll
});
});
</script>

Categories

Resources