In chrome, there is a tab beside the extensions to see the videos playing. it only appears when you play a song or video in the browser. when starting a video on youtube, I can see in that tab a background image and the title of the video and the name of the channel are already on Spotify, I can also see an image, the title of the song and the name of the artist, however, I still haven't found the medium with which they do this, for sure it is with javascript, because I searched the code of two sites mentioned and there is no or tag there and on my site with these tags only the page title appears on that tab.
I saw in the MDN documentation a single quote from Rich Media, but they do not go into details, they just say that it offers support and it is not what I want, it seems that this is to display ads, after all, searching on google what I discovered about it was a YouTube API to incorporate videos and tutorials talking about how to show subtitles for youtube videos, that's not what i want, i want to show the video data on this tab, at least replace the page title with the video title.
What is needed to show how in the image above?
<video controls>
<source src="/msun.mp3" type="audio/mp3">
<track label="English" kind="subtitles" srclang="en" default>
Your browser does not support the audio element.
</video>
They use the MediaSession API.
Code example from linked MDN article:
if ('mediaSession' in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({
title: 'Unforgettable',
artist: 'Nat King Cole',
album: 'The Ultimate Collection (Remastered)',
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' },
]
});
navigator.mediaSession.setActionHandler('play', function() { /* Code excerpted. */ });
navigator.mediaSession.setActionHandler('pause', function() { /* Code excerpted. */ });
navigator.mediaSession.setActionHandler('stop', function() { /* Code excerpted. */ });
navigator.mediaSession.setActionHandler('seekbackward', function() { /* Code excerpted. */ });
navigator.mediaSession.setActionHandler('seekforward', function() { /* Code excerpted. */ });
navigator.mediaSession.setActionHandler('seekto', function() { /* Code excerpted. */ });
navigator.mediaSession.setActionHandler('previoustrack', function() { /* Code excerpted. */ });
navigator.mediaSession.setActionHandler('nexttrack', function() { /* Code excerpted. */ });
navigator.mediaSession.setActionHandler('skipad', function() { /* Code excerpted. */ });
}
Related
Versions
next-pwa:
next:
Question
How to load more images in fallbacks.image
for example i neeed two images into fallbacks
file - next.config.js
const withPWA = require('next-pwa');
module.exports = withPWA({
pwa: {
dest: 'public',
fallbacks: {
image: 'static/fallback.svg'
},
}
})
I am using html2pdf.js with Angular 4 to generate a PDF since the HTML file. It works, but there is an issue: when it renders the HTML in PDF borders don't appear.
This is the result in the PDF:
And this is how my HTML file looks at browser:
This is how I used html2pdf:
GeneratePDF () {
var element = document.getElementsByClassName('panel-body')[1];
html2pdf(element, {
margin: 1.5,
filename: 'myfile.pdf',
//image: { type: 'png' },
html2canvas: { dpi: 192, letterRendering: true},
jsPDF: { unit: 'cm', format: 'a4', orientation: 'p' }
});
}
I just want to show the border of the tables and the textareas.
Documentation of html2pdf is here: https://github.com/eKoopmans/html2pdf
I have discovered Universal HTML5 players like http://www.jplayer.org/ , but none of them have a record button. Wondering if there is one, similar to the one in the image below:
You can use video.js with this plugin for recording audio/video
Here's the example:
var player = videojs("recorder",
{
controls: true,
width: 600,
height: 300,
plugins: {
wavesurfer: {
src: "live",
waveColor: "black",
progressColor: "#2E732D",
debug: true,
cursorWidth: 1,
msDisplayMax: 20,
hideScrollbar: true
},
record: {
audio: true,
video: false,
maxLength: 20,
debug: true
}
}
});
<audio id="recorder" class="video-js vjs-default-skin"></audio>
<script src="http://vjs.zencdn.net/6.2.0/video.js" defer></script>
<script src="path/to/recorder/plugin.js" defer></script>
I'v got jwplayer source code from github. I want to change some scripts and built the player. So, i need to change file source from javascript in flash. In javascript i'm setting some params "host" and "flv_id":
jwplayer("mediaplayer").setup({
autostart: false,
controlbar: "none",
displayclick: "none",
smoothing: true,
stretching: "exactfit",
icons: false,
flashplayer: "/jwplayer.swf",
file: "/videos/3aae1ef41d.flv",
flv_id: "115554",
host: "<?php echo $host; ?>",
provider: "http",
startparam: "start",
height: 400,
width: 650,
events: {
onComplete: function() {
},
onPause: function(event) {
},
onError: function() {
}
}
});
In flash i have some class, which can make post-request:
var post:Post = new Post("http://"+someparameters["host"]+"/video/flv");
post.variables.id = someparameters["flv_id"];
post.Send(Go);
Go - is success callback function that returns some flvlink.
Go(link:String):void {
//link - is source, that i need to play
}
The player is playing the "/videos/3aae1ef41d.flv". But i want to play the source from Go(); I have class "Post", but i don't know the place to paste my code. Now, i haven't any changes in default source code. I don't know which file of player source code to edit. So, i need to know, how i can use my "Post" class to play video from Go function.
I am trying to run an ExtJS4 Ext.application inside our existing website template. We have a div #content, into which I want to place the application for development. How do I render the application into this area, rather than replacing the existing html page?
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
// renderTo: Ext.Element.get('#content') doesn't work
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});
You need to use other container than a Ext.container.Viewport. By definfiton Ext.container.Viewport will always take the entire browser window.
From documentation:
The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page.
Just use Ext.panel.Panel instead
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.panel.Panel', {
layout: 'fit',
renderTo: Ext.get('content')
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});