Last week Chrome released the media hub. This is a small button at the right of the browser's top bar, giving access to all the video and audio playing.
https://blog.google/products/chrome/manage-audio-and-video-in-chrome/
Using the <video> element makes your player appears in this media hub, it just works.
But for youtube videos (see above), the media hub seems to be able to find a cover image, a color and a title / sub-title. However, I was not able to find any documentation about how to obtain this aspect with a standard video element. Any idea?
We're all in the same boat, after trying to dig the source in chromium with no luck, I was sending an email to the chromium developer for this question and got the useful link about MediaSession.
So following the docs, You can customize it by setting metadata property in the mediaSession to showing a title, description and artwork (a.k.a. background image) except the background color, That's because the background color is determined by pixels of the image automatically.
if ('mediaSession' in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({
title: 'Never Gonna Give You Up',
artist: 'Rick Astley',
album: 'Whenever You Need Somebody',
artwork: [
{ src: 'https://dummyimage.com/96x96', sizes: '96x96', type: 'image/png' },
{ src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
{ src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
{ src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
{ src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
{ src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
]
});
}
I have created the demo on the JSFiddle. the result shows as following.
Related
I putted html2pdf.js in my project,
https://github.com/eKoopmans/html2pdf.js .
And too I putted Font Awesome in my project,
Before pdf
After pdf
Why did not show the font awesome after output the pdf?
this is my codes
<script src="{{ asset('js/html2pdf.bundle.min.js') }}"></script>
<script>
function generatePDF() {
const element = document.getElementById("invoice");
let opt = {
filename: 'resume.pdf',
image: { type: 'jpeg', quality: 0.98 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
html2pdf()
.set(opt)
.from(element)
.save();
{{--location.replace("{{route('index')}}");--}}
}
</script>
A font can be embedded only if it contains a setting by the font vendor that permits it to be embedded. Embedding prevents font substitution when readers view or print the file, and ensures that readers see the text in its original font. Embedding increases file size only slightly, unless the document uses CID fonts. a font format commonly used for Asian languages. You can embed or substitute fonts in Acrobat or when you export an InDesign document to PDF.
Please read the adobe documentation.
It is possible that the version you are using to do not be supported.
I am playing as a newbie with Nuxtjs. I bought an html template to transform it as Nuxtjs project. The template, there are several css to display out a good layout.
There are issues on loading a page.vue as first call but if I reload it, the layout/css are displayed correctly.
My tries were:
- Adding css: [ ... ] at nuxt.config.js as global.
- Added css as script injected into the page.vue as follow:
export default {
head () {
return {
link: [
{ rel: 'stylesheet', type: 'text/css', href: './css/animate.css' },
{ rel: 'stylesheet', type: 'text/css', href: './css/et-line.css' },
],
}
}
}
I appreciate your clues & tricks.
Put your css files to assets or static folder. More info about the difference you could find in the doc: https://nuxtjs.org/guide/assets#static
Plug it in nuxt.config.js as so:
css: ["~assets/main.css"] or css: ["~/static/static.css"]
Rebuild the project
I'm trying to play videos (mp4) in an window loaded with Electron.
Weird thing : it works fine with only one video, with the others it shows a black screen. The only difference between all videos are their width and height (does that matter ?). Also, in a browser window all videos play just fine.
Here's the code that load windows in electron :
let mainWindow;
let playerWindow;
app.on('window-all-closed', function() {
if (process.platform != 'darwin') {
app.quit();
}
});
app.on('ready', function() {
mainWindow = new BrowserWindow({
title: 'MasterGameApp',
x: 910,
y: 500,
width: 800,
height: 460,
show: true,
resizable: false,
transparent: false
});
playerWindow = new BrowserWindow({
title: 'playerView',
x: 2250,
y: 50,
width: 1005,
height: 540,
show: true,
transparent: false,
fullscreen : true
});
mainWindow.loadURL('http://localhost:8889');
mainWindow.setMenuBarVisibility(false);
mainWindow.setAutoHideMenuBar(true);
playerWindow.loadUrl('http://localhost:8889/playerView');
playerWindow.setMenuBarVisibility(false);
playerWindow.setAutoHideMenuBar(true);
mainWindow.on('closed', function() {
playerWindow.close();
playerWindow = null;
mainWindow = null;
});
});
The videos url are simply given to a video tag inside a JS script like this $('#someDiv').append('<video id=\'backgroundvid\' autoplay><source src=\''+ content +'\' type=\'video/mp4\'></video>');
I don't understand why the browser can play every video but the electron window can't ... Thank's in advance
Ummm hey. I just saw the beginning of your URL property for the video tag is out of the inverted commas.
What you have:
$('#someDiv').append('<video id=\'backgroundvid\' autoplay><source src=\''+ content +'\' type=\'video/mp4\'></video>');
What you should have:
$('#someDiv').append('<video id=\'backgroundvid\' autoplay><source src="\''+ content +'\' type=\'video/mp4\'"></video>');
Have you tried changing that?
Stay lit; keep doing Electron. I am a great fan of it and can see its potential for future desktop applications. 👍👍👍
NOTE: Also, I am not sure what your CORS settings are or anything, but if it it trying to load videos locally, it may not let you.
Given a webpage available worldwide and a datastore with response times of the webpage request from various locations worldwide ( Example: Datastore having json data such as {HKG :1, LON : 0.7, Chicago :0.2}. I want to display this data with a live refresh every 5 seconds on a webpage using HTML5 Maps.
Is there an opensource solution available with responsive web to display worldmap?
I am planning to explore Google Maps API. However not sure about the responsive web part of the display. Webpage needs to be responsive on Tablet, TV and Desktop. Is there any open source solution available to display worldmap with custom markers options and responsive in nature?
Here's a quick demo of one approach you could use:
http://jsfiddle.net/panchroma/pupkvkkc/
This fiddle is a hack of a Highchart Highmap, my demo used http://www.highcharts.com/maps/demo/mappoint-latlon as a starting point.
Of course you would need to modify the map as required. Then pull in the dynamic data, perhaps by importing it from an associated json file which includes the name, latitude and longitude, and the response time for each of the locations you are monitoring.
Finally you would setup your HTML page to automatically refresh every 5sec. One way to do this would be to include a refresh meta tag the head of your page
<meta http-equiv="refresh" content="5; URL=http://www.yourdomain.com/page.htm">
If you need help with how to import your dynamic data, check out some of the other Highchart demos, e.g. this fiddle demo imports this json file at line 3 of the javascript
Highchart isn't open source, though you can download it for free.
Good luck!
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/gb/gb-all.js"></script>
<div id="container"></div>
CSS
#container {
height: 680px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
JS
$(function () {
// Initiate the chart
Highcharts.mapChart('container', {
title: {
text: 'Hover over location to see datastore response times'
},
mapNavigation: {
enabled: true
},
tooltip: {
headerFormat: '',
pointFormat: '<b>{point.name}</b><br> {point.response_time} sec'
},
series: [{
// Use the gb-all map with no data as a basemap
mapData: Highcharts.maps['countries/gb/gb-all'],
name: 'Basemap',
borderColor: '#A0A0A0',
nullColor: 'rgba(200, 200, 200, 0.3)',
showInLegend: false
}, {
name: 'Separators',
type: 'mapline',
data: Highcharts.geojson(Highcharts.maps['countries/gb/gb-all'], 'mapline'),
color: '#707070',
showInLegend: false,
enableMouseTracking: false
}, {
// Specify points using lat/lon
type: 'mappoint',
name: 'Datastore locations',
color: Highcharts.getOptions().colors[1],
data: [{
name: 'London',
lat: 51.507222,
lon: -0.1275,
response_time:1.0
},{
name: 'Glasgow',
lat: 55.858,
lon: -4.259,
response_time:0.9
}, {
name: 'Belfast',
lat: 54.597,
lon: -5.93,
response_time:1.2
}]
}]
});
});
In the code below, if I set the activeTab to 0, the contents of /viewer/welcome show up as expected. If I set activeTab to 1 (like below), the second tab is activated on load, but when I click on the first tab, the content never displays. I can see it loading the content for the tab BEFORE I click on the tab (if I set autoLoad: false, it doesn't load it at all), but even though it loaded, it doesn't display.
{
xtype: 'tabpanel',
activeTab: 1,
items: [
{
xtype: 'panel',
loader: {
url: '/viewer/welcome/',
renderer: 'html',
autoLoad: true
},
layout: {
type: 'fit'
},
title: 'Welcome'
},
...
}
Why doesn't the content of the tab actually render when the tab is activated? Why does it work if that tab is the active tab on load, but not when it is activated otherwise?
If I make these changes, the text displays all the time as expected, but I get an extra page load from the spurious activate call.
{
xtype: 'tabpanel',
activeTab: 1,
items: [
{
xtype: 'panel',
loader: {
url: '/viewer/welcome/',
renderer: 'html',
autoLoad: false
},
layout: {
type: 'fit'
},
title: 'Welcome',
listeners: {
activate: function(me, opts) {
me.getLoader().load();
}
}
},
...
}
I'm just not understanding why the tabs are not managing this content as part of being a tab.....
I think the problem here is what you have indicated - the tabs are not managing content. The reason why they are not managing it properly is the HTML content that gets returned from loader is just that - some HTML, it is not an ExtJS Component. It is arguable that ExtJS "should" manage content that it has loaded but the docs allude to the contrary: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Component-cfg-html It might be worth while filing a bug on this.
Also, I noticed you had a fit layout specified on the welcome panel. Since you have no other items contained in that panel, you probably don't need that setting - incidentally it may (or may not) improve how the loaded html fragment gets handled.
Good luck.
I found out that in ExtJS 5.1 using the reference name didn't work. Had to put in an itemId