I try to use jwplayer (6.2 version) on a website. It works well on my computer and some others but it doesn't work on all. I tried lot of things like install / reinstall / update Flash etc...
The error is still the same:
Uncaught TypeError: d(...).getPlaylist is not a function
at l.model.j.setPlaylist (jwplayer.html5.js:153)
at Object.method (jwplayer.html5.js:193)
HEre my sample code:
$(document).on('ready', function() {
$('.videos').each(function(){
var movie = $(this);
jwplayer(movie.attr('id')).setup($.extend({}, jwplayerDefault, {
file: movie.attr('data-url'),
image: movie.attr('data-image'),
width: '100%',
height: 150
}));
});
});
<div class="col-xs-12 logo video-box no-padding ">
<div id="{{ oVideo.getId() }}" class="videos" data-image="{{ oVideo.getPicto() }}" data-url="{{ oVideo.getPath() }}" data-image="{{ oVideo.getPicto() }}">Loading the player...</div> </div>
I have checked that any argument was existing (and it is).
Any help?
Related
Update: I have put my answer. Please see it.
Original Question:
Can you tell me why leaflet map doesn't show on the full map area?
.html
<ion-content padding>
<div style="height: 100%;width:100%" leaflet [leafletOptions]="options" *ngIf="options" [leafletCenter]="center">
</div>
</ion-content>
.ts
init(): void {
this.options = {
layers: [
tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 18, attribution: "..." })
],
zoom: 10,
center: this.center = latLng(Number(this.activatedRoute.snapshot.paramMap.get("latitude")), Number(this.activatedRoute.snapshot.paramMap.get("longitude"))),
attributionControl: false,
};
}
UI
Please see the image. It seems a problem with transform. Default it was 0,0,0. I have changed it manually on the browser like so. So how can I set it to the map?
I had the same issue in an ionic 4 project. Like suggested in comment with link I needed to use map.invalidateSize() when I rendered the map, as well as when adding/removing markers or any other action for that matter. This didn't help completely. I also had to manually trigger change detection after that. Here's a sample from our code:
this.map.setView([this.myLocation.latitude, this.myLocation.longitude], 13);
this.map.invalidateSize();
this.ref.detectChanges();
where ref refers to ChangeDetectorRef.
Also make sure that you have the the leaflet css imported in your angular.json file:
"styles": [
// ....
"./node_modules/leaflet/dist/leaflet.css"
]
In my opinion the leaflet is filled 100% in its parents space, can you use the browsers inspect tool to see what is the parents width and height. You can also try using
position: absolute; left: 0;
to ignore parents width
Try removing the padding and changing height to 100vh
Try this:
<ion-content>
<div style="height: 100vh; width:100%" leaflet [leafletOptions]="options" *ngIf="options" [leafletCenter]="center">
</div>
</ion-content>
If you want to set the transform do it like so:
<ion-content padding>
<div style="height: 100%; width:100%; transform: translate3D(250px, 200px, 100px)" leaflet [leafletOptions]="options" *ngIf="options" [leafletCenter]="center">
</div>
</ion-content>
Here I'm using this with Ionic 4 app. I have tried many solutions given by different devs. But none of them worked for me. The problem here is the life cycle event which I have used earlier. So now I use ionViewDidEnter() and no issues.
ionViewDidEnter() {
this.center = latLng(Number(this.activatedRoute.snapshot.paramMap.get("latitude")), Number(this.activatedRoute.snapshot.paramMap.get("longitude")));
this.options = {
layers: [
tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { maxZoom: 18, attribution: "..." })
],
zoom: 17,
center: this.center,
attributionControl: false,
};
this.layers.push(this.mapService.getMarker(this.center, "assets/icon/map/placeholder.png"));
}
I had the same problem, even with the import of leaflet.css and the "invalidateSize()" trick.
It was because I wrote in "myComponent.page.html":
<ion-content>
<div id="map" style="height:400px; width: 100%;"></div>
</ion-content>
It seems Ionic4 css conflicts with leaflet.
You need to get the <div> outside of <ion-content>.
Correct is just :
<div id="map" style="height:400px; width: 100%;"></div>
Hope this help someone
map.invalidateSize() runs after window resize event.
So after height change, just write the code :
window.dispatchEvent(new Event('resize'));
this.map.invalidateSize();
It works like a charm in my case.
Dont' forget to replace map with your map variable.
My it helps someone
I am using GLightbox in a project I am working on. I have a hyperlink that has a URL to a self-hosted MP4 video. The video is opened in a GLightbox. I have poster images already setup for my videos, but I can't figure out where to set the poster image in the Glightbox setup. Here is my html link that launches the video in the lightbox.
<a href="<?= $video_url; ?>" class="standard-lightbox">
Here is the javascript configuration I have in my site.js file:
let standardLightboxSlideHTML = `<div class="gslide">
<div class="gslide-inner-content">
<div class="ginner-container">
<div class="gslide-media">
</div>
<div class="gslide-description">
<div class="gdesc-inner">
<h4 class="gslide-title"></h4>
<div class="gslide-desc"></div>
</div>
</div>
</div>
</div>
</div>`;
var standardLightbox = GLightbox({
selector: '.standard-lightbox',
width: '1280px',
height: '720px',
skin: 'modern',
closeOnOutsideClick: true,
slideHTML: standardLightboxSlideHTML,
type:'video',
autoplayVideos: false,
plyr: {
config: {
ratio: '16:9', // or '4:3'
muted: false,
hideControls: false,
autoplay: false,
autopause: true,
volume: 0.5,
controls: ['play-large', 'play','progress','volume','mute','fullscreen']
}
}
});
I have tried adding a data-poster value to the hyperlink. That didn't work. That is where I would like to set it and then I want to GLightbox to use it. Any ideas how to make that work?
I want to tag this post as "glightbox", but I don't have enough rep.
I was able to resolve my problem this way.
In wordpress I setup two new fields, one for the url to the video and another for the poster image.
I changed my code to output the url and poster urls in the hyperlink that is clicked.
In my Glightbox setup, I just grab those values and add it dynamically with javascript to the video tag. I also add a counter to the hyperlink so I can append the count value to create an ID selector for the video.
standardLightbox.on('slide_after_load', (data) => {
const { slideIndex, slideNode, slideConfig, player, trigger } = data;
var btnClicked = document.getElementById(trigger.id);
var posterimage = btnClicked.getAttribute('data-html5videoposter');
var videoid = btnClicked.getAttribute('data-videoid');
// use the index
var getVideoTag = document.getElementById(videoid);
getVideoTag.setAttribute('poster', posterimage);
});
I want to change image dependent on variant of product selected, so I have to bind image property using v-bind.
When I put address of image on web in my variable it works, but when I put address of image from my PC (relative - using ../assets/image.jpeg, or using #/assets/image.jpeg or absolute address - /home/.../assets/image.jpeg) it won't show. I don't get any error message.
This is problematic code:
<template>
<div class="product" v-for="(product, prodId) in products" :key="prodId">
<!-- Element in question -->
<img :src="product.variants[product.selectedVariant].url" alt="picture">
<div v-for="(variant, variantId) in product.variants" :key="variantId"
:class="variant.color"
#mouseover="selectedVariant(prodId, variantId)"></div>
</div>
</template>
<script>
export default {
name:'ProductSection',
methods:{
selectedVariant(prodId, variantId){
this.products[prodId].selectedVariant= variantId
}
},
data(){
return {
products: [{
name: 'Billiard Balls',
//Image address is value of url key
variants: [{color: 'red', url: '#/assets/red.jpeg'}, {color: 'blue', url: '#/assets/blue.jpeg'}],
selectedVariant: 0
}, {
name: 'Car Toy',
variants: [{color: 'red', url: '#/assets/redCar.jpeg'}, {color: 'yellow', url: '../assets/YellowCar.jpeg'}],
selectedVariant: 0
}]
}
}
}
</script>
And side question is Where do my images end up when I build project? Do i have to deploy assets file along side built file?
I didn't import image. I should have done
import image from '#/assets/image.jpeg'
and then
variants: [{color: 'red', url: image}, ...]
How can I implement yoast seo in vue.js?
I try to search an information in google but I could not found anything related. Do anyone have recommend?
You will need to hook the Wordpress REST API into your Vue.js app. Once you have the Yoast plugin installed, you can use a plugin such as this one in order to get the SEO data you require, or create your own endpoints for the queries that you need.
it's a quite complex topic. You either need an SSR setup (e.g. using Nuxt.js) or (what's actually better) you use either this theme:
http://vue-wordpress-demo.bshiluk.com
https://github.com/bucky355/vue-wordpress
or this:
https://wue-theme.tech-nomad.de
https://github.com/Tech-Nomad/wue-theme
The latter one is made by myself due to problems coming with Nuxt.js (window object, keep-alive not working, extra node.js server, not being able to use all the PHP templates). At the time I've started working on it the bucky355 theme didn't exist but it's quite similar to my. Even though I would consider my theme as more simple to use.
You can use vue-yoast components:
<template>
<div id="app">
<label>Title</label>
<input v-model="metaTitle" />
<label>Meta Description</label>
<input v-model="metaDescription" />
<label>Description</label>
<input v-model="description" />
<label>Focus Keyword</label>
<input v-model="focusKeyword" />
<snippet-preview
:title="metaTitle"
:description="metaDescription"
:url="url"
baseUrl="https://my-site.com/"
#update:titleWidth="(value) => titleWidth = value"
#update:titleLengthPercent="(value) => titleLengthPercent = value"
#update:descriptionLengthPercent="(value) => descriptionLengthPercent = value" />
<content-assessor
:title="metaTitle"
:titleWidth="titleWidth"
:description="metaDescription"
:url="url"
:text="description"
:locale="locale"
:resultFilter="assessorResultFilter" />
<seo-assessor
:keyword="focusKeyword"
:title="metaTitle"
:titleWidth="titleWidth"
:description="metaDescription"
:url="url"
:text="description"
:locale="locale"
:resultFilter="assessorResultFilter" />
</div>
</template>
<script>
import { SnippetPreview, ContentAssessor, SeoAssessor } from 'vue-yoast'
import 'vue-yoast/dist/vue-yoast.css'
export default {
name: 'App',
components: {
ContentAssessor,
SeoAssessor,
SnippetPreview
},
data () {
return {
focusKeyword: 'one',
metaTitle: 'Hello!',
metaDescription: 'The short description',
url: 'page/1',
description: '<h2>Here is subtitle!</h2> and some contents in HTML',
titleWidth: 0,
titleLengthPercent: 0,
descriptionLengthPercent: 0,
translations: null,
locale: 'en_US'
}
},
methods: {
assessorResultFilter (value) {
return value
}
}
}
</script>
<style>
#app {
max-width: 800px;
margin: 0 auto;
padding: 16px;
}
label {
display: block;
margin: 0;
padding: 0;
}
.vue-yoast {
margin-bottom: 10px;
}
</style>
I am trying to build a single page application using Vue.js 2.0. The application is supposed to feature multiple modes of operation, which I wanted to implement using Vue.js dynamic component. Since the state of each mode should be preserved while switching between them, I decided to use the keep-alive feature that Vue.js provides. One of the modes is supposed to be a network view created by using Cytoscape.js .
And here comes my problem. The network is initialized correctly when I switch the first time to it, but after switching back and forth, the network view freezes. keep-alive works properly (as far as I understand it) and brings back both the Cytoscape instance and the proper HTML section. Somehow, the connection between the Cytoscape instance and the HTML sections seems to be lost, although I don't understand how and why.
Here is an example code.
//sample data for network
var testElements = [
{ data: {id: 'a'} },
{ data: {id: 'b'} },
{ data: {
id: 'ab',
source: 'a',
target: 'b'
}
}
];
//Vue components
Vue.component('otherView', {
template: '<div>This is another mode</div>'
});
Vue.component('network', {
template: '<div id="container" class="cy"></div>',
mounted: function () {
cy1 = cytoscape({
container: document.getElementById("container"),
elements: testElements
});
}
});
//Vue dynamic component
var vm = new Vue({
el: "#dynamic",
data: {
currentView: 'otherView'
}
});
.cy {
width: 500px;
height: 500px;
position: absolute;
top: 100px;
left: 10px;
}
<script src="https://rawgit.com/cytoscape/cytoscape.js/master/dist/cytoscape.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="dynamic" >
<div id="selectorButton">
<button id="button1" #click="currentView='otherView'">Other view</button>
<button id="button2" #click="currentView='network'">Network</button>
</div>
<keep-alive>
<component :is="currentView"></component>
</keep-alive>
</div>
If you remove a Cytoscape instance, you've destroyed it. Either make sure that Vue doesn't destroy your DOM elements or create a new Cytoscape instance each time from JSON: http://js.cytoscape.org/#cy.json
I could not understand your problem completely , but you can try shifting code you have written in network component's mounted oroperty to activated property as follows
Vue.component('network', {
template: '<div id="container" class="cy"></div>',
activated: function () {
if(initial state){
cy1 = cytoscape({
container: document.getElementById("container"),
elements: testElements
});
}
}
});
This may help because when a cmponent is kept-alive the mounted hook is called only once when first time enter you the component, its not called again on subsequent entering whereas activated hook is called everytime you enter the component when kept-alive