I want to show a video which starts to run automatically and loops infinitely in my adobe portfolio website. I tried using YouTube embedded video with autoplay and loop options (see below code), however, every time the video ends there is a black refresh screen before it starts again which ruins the appearance of my website. The video format I'm using is .mp4. I know that with .gif file this problem can be solved, however, the video quality will not be sufficient. I tried downloading the video into the portfolio website directly, however, I couldn't make it loop or autoplay.
I would appreciate your help in this matter.
Thanks, Tal
The code:
<iframe width="1920" height="1080"
src="https://www.youtube.com/embed/youtubelink?rel=0&autoplay=1&controls=0&loop=1&playlist=youtubelink&controls=0&showinfo=0"
frameborder="0" allowfullscreen>
</iframe>
After some research I've finally got it working, the solution is to use the API iframe embed code (https://developers.google.com/youtube/iframe_api_reference) and instead of using the loop parameter you make use of the onPlayerStateChange function. Here is a code example:
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId: '<?php the_field('homepage_video_background_id'); ?>',
playerVars: {
modestbranding: 0,
autoplay: 1,
controls: 0,
showinfo: 0,
wmode: 'transparent',
branding: 0,
rel: 0,
autohide: 0,
origin: window.location.origin
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data === YT.PlayerState.ENDED) {
player.playVideo();
}
}
</script>
This method still flashes an instant black screen before restarting the video. If you need a smoother loop use this;
'onStateChange': function (event) {
var YTP=event.target;
if(event.data===1){
var remains=YTP.getDuration() - YTP.getCurrentTime();
if(this.rewindTO)
clearTimeout(this.rewindTO);
this.rewindTO=setTimeout(function(){
YTP.seekTo(0);
},(remains-0.1)*1000);
}
}
I'm trying to figure out this problem myself. I'm currently using Adobe Portfolio.
Are we allow to add code within the Embed box?
Related
How to add custom font in Jspdf with react? I tried every possible solution but nothing is working.I am stuck here.
convert your font.ttf file to js file using a this site : https://peckconsulting.s3.amazonaws.com/fontconverter/fontconverter.html
then take the font name and type,
export the the callAddFont function and call it where you want .
//this in the js file we generated from
//peckconsulting.s3.amazonaws
var font ".....
.....
.....";
var callAddFont = function () {
this.addFileToVFS("Calibri Bold-normal.ttf",
font);
this.addFont("Calibri Bold-normal.ttf","Calibri
Bold", "normal");
};
export { callAddFont };
// your component
import { callAddFont } from "./fonts/Calibri
Bold-normal";
.....
.....
jsPDF.API.events.push(["addFonts",
callAddFont]);
var doc = new jsPDF("l", "mm", [220, 250]);
doc.setFont("Calibri Bold", "normal");
doc.text("example")
Frankly working with fonts in jsPDF is a real pain in the back. In most cases I personally prefer to use rasterizehtml or html2pdf in complex with jsPDF. However, if you have no choice, I recommend watching this example
function createPDF() {
const doc = new jsPDF({
unit: "pt",
orientation: "p",
lineHeight: 1.2
});
doc.addFont("Arimo-Regular.ttf", "Arimo", "normal");
doc.addFont("Arimo-Bold.ttf", "Arimo", "bold");
doc.setFont("Arimo");
doc.setFontType("normal");
doc.setFontSize(28);
doc.text("Hello, World!", 100, 100);
doc.setFontType("bold");
doc.text("Hello, BOLD World!", 100, 150);
doc.save("customFonts.pdf");
}
The code is clear but it's doesn't matter... Pay attention on Pen's Settings:
So the answer is using jspdf-customfonts and its tool makeFont
node makeFonts.js - to create a new dist/default_vfs.js
First of, i am a newbie to Angular/ionic. I am trying to learn how to use native features using plugins, the camera plugin to be specific.
I am currently testing my code on ripple emulator ( i am still a
newbie and far away from actual device testing)
the platform is ios (not sure if switching to android would make a
difference)
The ripple emulator shows me a screen with file selection dialog when i call the getpicture function and returns a URI for the image selected.
Here is my problem:
I set image src to the ImageURI (blob:http%3A//localhost%3A4400/df84a835-ed01-41ea-a58e-bdc171a22e87), but the image fails to show up. I don't think its an issue with data binding/resolving, coz if i hardcode a url instead of imageuri, then the code works as expected.
Any suggestions/pointers would be appreciated.
UPDATE 1
First off, thank you so much guys for taking the time to help me!! Unfortunately, none of these seem to work :( BTW, the platform is cordova, not ios. Sorry for that mistake. The funny thing is that, if i open the blob url in my browser, then i am able to see the image. But not in the emulator. Here are the screenshots, if that would help: link link Thanks once again!!
HTML:
<img ng-hide="ImagePreview == null" ng-src="{{ImagePreview}}">
CONTROLLER:
$scope.GetImageCamera = function() {
var CameraOptions = {
quality : 75,
destinationType : Camera.DestinationType.FILE_URI,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 100,
targetHeight: 100,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: true
};
$cordovaCamera.getPicture(CameraOptions).then(function(imageURI) {
$scope.ImagePreview = imageURI;
$scope.$apply();
}, function(err) {
alert("Error!");
});
};
Try this:
$cordovaCamera.getPicture(CameraOptions).then(function(imageData) {
$scope.ImagePreview = "data:image/jpeg;base64," + imageData;
},
function(err) {
// An error occured. Show a message to the user
});
Instead of imageURI call imageData.
Try this, it should be the right way. In iOS you have to change a bit the URL of the image path to manipulate.
$cordovaCamera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.FILE_URI });
function onSuccess(imageURI) {
var image = document.getElementById('myImage');
image.src = imageURI;
}
function onFail(message) {
alert('Failed because: ' + message);
}
iOS :
$scope.imagen.substr($scope.imagen.lastIndexOf('/') + 1);
So finally, I used Ion view and see that my code works as expected (the camera opens up and the image captured is visible on the app.) This leads me to believe that the problem is with ripple and not the code itself. BTW, in case you haven't, checkout ion view. Its the closest thing to on-device testing without actually having to build, register as an ios developer etc.
thanks and cheers!!
I'm trying to make a carousel for displaying images, I got most of the functionality from a solution someone in sencha forums came up with. I made a few adjustments to the code and got it working at first glance.
Here's the original code on sencha forums...
http://www.sencha.com/forum/showthread.php?256456-an-Ext-JS-4-carousel-component&p=938789#post938789
This didn't work on ExtJS 4 so I made a few modifications for it to work and also to make it look better (to my eyes). Here's how it looks
I do have a problem or two though...
First off I can't figure out how to add a text over the images I'm displaying, I managed to add that line of text in the center but I also want to add a date to the images and that should display on top of each image container. I think it's pretty basic, but I can't figure out how... I don't have a full understanding of HTML, so that's not helping.
Secondly, and most important, I'm getting some weird behaviour when I close and reopen the window containing this carousel. I've seen this kind of behaviour before when using the same ID in multiple instances of a view in ExtJS, but I have changed all IDs to generate a new one whenever a new carousel window opens and still experience the same problem.
Here's what happens when I close and reopen the window...
And that happens with every window I open after closing the carousel
And last but not least!! I can't get the keydown event to work on this window, I have no clue why. I've tried setting the listener on the carousel container instead of the window but still get no firing whatsoever.
This is the code I'm using to create the carousel window...
var win = Ext.create('Ext.view.CarouselWindow');
win.show();
Ext.createWidget('carousel',{
xPos: win.getSize().width/2,
yPos: win.getSize().height/4,
FPS: 70,
reflHeight: 56,
height:'100%',
width:'100%',
reflGap:2,
bringToFront:true,
store:store,
images:store,
altBox:'imageNameLabel',
autoRotate: 'no',
renderTo: 'carousel-div',
listeners:{
keydown:function(){
console.log('asdasd')
}
}
});
This is the initComponent of the carousel component, which is rendered in the window.
initComponent: function(config) {
this.callParent(arguments);
this.container = this.renderTo ? Ext.get(this.renderTo) : this.up('container');
if (this.xRadius === 0){
this.xRadius = (this.container.getWidth()/2.3);
}
if (this.yRadius === 0){
this.yRadius = (this.container.getHeight()/6);
}
this.xCentre = this.xPos;
this.yCentre = this.yPos;
// Start with the first item at the front.
this.rotation = this.destRotation = Math.PI/2;
this.timeDelay = 1000/this.FPS;
// Turn on the infoBox
if(this.altBox !== '')
// Ext.get(this.altBox).applyStyles({display: 'block'});
if(this.titleBox !== '')
Ext.get(this.titleBox).applyStyles({display: 'block'});
//
// Turn on relative position for container to allow absolutely positioned elements
// within it to work.
this.container.applyStyles({ position:'relative', overflow:'hidden'});
// Setup the store.
this.initStore();
this.setUpContainerListener();
this.innerWrapper = this.container.createChild({
tag: 'div',
style: 'position:absolute;width:100%;height:100%;'
});
this.checkImagesLoaded();
},
And here's the Image component that the carousel uses...
/**
* #author Aymen ABDALLAH <aymen.abdallah#gmail.com>
* #docauthor Aymen ABDALLAH
*/
Ext.define('Ext.component.Image', {
config: {
orgWidth: 400,
orgHeight: 400,
reflHeight: 0,
reflOpacity: 0,
itemIndex: 0,
image: null,
reflection: null,
container: null,
alt: '',
title: '',
imageSrc: '',
imageOK: false
},
// id: '',
constructor: function(config){
this.initConfig(config);
this.imageOK = true;
this.image = new Ext.Element(document.createElement('img'));
this.image.set({
// id: this.id,
src: this.imageSrc,
class : 'carousel-image',
alt: this.alt,
title: this.title
});
this.image.setStyle({position : 'absolute'}); // This seems to reset image width to 0 on webkit!
},
setUpReflection: function(){
if (this.reflHeight > 0)
{
this.reflection = Ext.create('Ext.component.Reflection', {
imageHeight: this.orgHeight,
imageWidth: this.orgWidth,
image: this.image,
parent: this.container,
reflHeight: this.reflHeight,
reflOpacity: this.reflOpacity
});
}
},
generateId: function(){
// return Ext.data.UuidGenerator.create().generate();
},
getImage: function(){
return this.image;
}
});
I didn't want to flood this with code so I restricted to what I think might be useful, there might be some missing though, in that case just tell me and I'll update the post with the portion of the code you need.
EDIT
Here's a link to sencha fiddle showing the carousel and the error. To see the second error open the carousel by clicking the button, close it with ESC and then try to open it once again. You'll notice it either doesn't show or it shows like the screenshot I posted.
https://fiddle.sencha.com/#fiddle/2iu
EDIT 2
Just found out the problem comes from the images, if I comment these lines:
this.image = new Ext.Element(document.createElement('img'));
this.image.set({
id: this.id,
src: this.imageSrc,
class : 'carousel-image',
alt: this.alt,
title: this.title
});
the second error I listed disappears. Of course this is not a solution as the carousel won't display any image this way, but I thought this could be a useful piece of data for anyone interested in helping.
For those who visit this page (I know it's an old post),
The issue isn't actually with the second view, the first view causes a layout error.
The Ext.component.Image class is missing a render function, to fix this add
render: function () {
return;
}
to the class.
Not sure how to fix the other issue entirely, but you could change the image component to be a form/panel and have text, or use the caption tags.
I am using Extjs - 4.1.0 and I want to prompt download window. I used 'iframe'. The window displays only when the file being posted is zip/mp3 but when the file being posted is text/image file, the window doesn't appear. Is there some property to be set to enable download window for text/image/different files?
Please find my code below.
var record = item.findParentByType('itemcontextmenu').record;
Ext.Ajax.request({
url : ORT.Configuration.DOWNLOAD_GRAPHICS_URI+"&graphics="+record.get('id'),
success: function (response, opt) {
result = Ext.decode(response.responseText);
try {Ext.destroy(Ext.get('graphicsDownloadIframe'));}catch(e) {}
Ext.core.DomHelper.append(document.body, {
tag: 'iframe',
id:'graphicsDownloadIframe',
css: 'display:none;visibility:hidden;height:0px;',
src: result.fileName,
frameBorder: 0,
width: 0,
height: 0
});
}
});
It's all about the mimetype and what your browser does with it. So I guess your problem will the that. Which likely will cause the browser to handle the received file different.
Edit
Following is a helper class that I still use
Ext.ux.util.HiddenForm = function(url,fields){
if (!Ext.isArray(fields))
return;
var body = Ext.getBody(),
frame = body.createChild({
tag:'iframe',
cls:'x-hidden',
id:'hiddenform-iframe',
name:'iframe'
}),
form = body.createChild({
tag:'form',
cls:'x-hidden',
id:'hiddenform-form',
action: url,
target:'iframe'
});
Ext.each(fields, function(el,i){
if (!Ext.isArray(el))
return false;
form.createChild({
tag:'input',
type:'text',
cls:'x-hidden',
id: 'hiddenform-' + el[0],
name: el[0],
value: el[1]
});
});
form.dom.submit();
return frame;
}
Usage
Ext.ux.util.HiddenForm('http://localhost/file/fetch',[['PropName','PropValue'],['Prop2Name','Prop2Value']])
The server take these arguments and build up a sort of 'FileStreamResult' which trigger a download on the clientside. If you are using a language like .Net or Java then there are already implementations you can use, if you are using PHP you might find this helpful. Anyway, look at your backend...
I'm trying to use plupload with mvc2 but the filebrowser-window does not open.
my code:
<script type="text/javascript">
// Convert divs to queue widgets when the DOM is ready
$(function () {
$("#uploader").pluploadQueue({
// General settings
runtimes: 'gears,flash,silverlight,browserplus,html5',
url: '<%: Url.Content( "~//Uploades/Horses/" ) %>',
max_file_size: '10mb',
chunk_size: '1mb',
unique_names: true,
// Resize images on clientside if we can
resize: { width: 320, height: 240, quality: 90 },
// Specify what files to browse for
filters: [
{ title: "Image files", extensions: "jpg,gif,png" },
{ title: "Zip files", extensions: "zip" }
],
// Flash settings
flash_swf_url: '../../../../Scripts/plupload/plupload.flash.swf',
// Silverlight settings
silverlight_xap_url: '../../../../Scripts/plupload/plupload.silverlight.xap'
});
// Client side form validation
$('form').submit(function (e) {
var uploader = $('#uploader').pluploadQueue();
uploader.refresh();
// Validate number of uploaded files
if (uploader.total.uploaded == 0) {
// Files in queue upload them first
if (uploader.files.length > 0) {
// When all files are uploaded submit form
uploader.bind('UploadProgress', function () {
if (uploader.total.uploaded == uploader.files.length)
$('form').submit();
});
uploader.start();
} else
alert('You must at least upload one file.');
e.preventDefault();
}
});
});
<div id="uploader" style="height:300px">
<p>You browser doesn't have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.</p>
</div>
If I try to debug the uploadingelemt is showen with out any problems. But If I click add files the window just jumps to the top of my page and nothin else happens.
Firebug does not show any problems.
I've tried in FF4 & IE 8 using flash and silverlight
Any one an idea?
Thank you very much and wish you a nice weekend!
Your browser will use Flash runtime as it is listed before the 'html5'. Flash runtime requires setting of 'container: "my_uploader_container_id"'
And your 'pickfiles' button need to be placed into the DIV with ID 'my_uploader_container_id'.
Another solution is using html5 engine - list it before flash in 'runtimes' parameter. But html5 runtime does not work in IE.