Inserting an icon to the right of the page title in Chrome - javascript

I recently noticed that when viewing YouTube videos in Chrome, it inserts a fancy looking audio icon into the tab when the video is playing. However the icon is not part of the actual page title, but instead appears to the right of the page title, like this:
Notice how the actual page title is truncated due to the tab length and fades out on the right hand side.
How is this accomplished? Is there an HTML or JavaScript property that can insert this icon there? What other icons, if any, can be used?
Note, I realize this is not cross-browser property since it doesn't work for FireFox. I'm wondering only about Chrome/Chromium.

we don't need any script to do that. It's a feature developed by Chrome developer. Chrome will automatically display the icon when there is an audio or video playing.
More info.

Chrome added the icon to any tab making sound. The idea is that when an Ad or music begins randomly playing, it needs to be easy to find and kill.
There is no HTML, JS, etc. that adds the icons. Anything that creates sound will place the sound icon on the tab in chrome -- while the tab is making sound.
The only similar icon I know of is the Chrome Cast icon, but that requires the Chrome Cast extension.

Chrome does insert this icon, if I play video on other site, then it looks like

Related

Change resolution for a video on Chrome using Console

is it possible to change the resolution of an embedded video via console? Previously, I happened to find a pretty cool trick to speed up a video (even exceeding the default speed options) just by typing this command on console document.querySelector('video').playbackRate = 3.0;. I wonder is there any similar trick for video resolution. My specific case is that I am doing online learning and want to have the videos to be of higher resolution. These videos are youtube videos that offer multiple options for resolution (on youtube) but the webpage which I learn somehow doesn't show the button for personal customization. I am a non-tech person so step-by-step guidance would be very appreciated.
Image of Edx Video: Always default at HD
Edx webpage links to the above image: Require account and sign in to view
Link to youtube video: offer multiple quality setting
Try right click on the video and see if you can get the URL of the video, then, watch it in YouTube.
Other options could be (since you're using the Google Chrome console):
Right click on the YouTube video > Inspect element and see the source code: there, for sure the YouTube video link
Or, (in the webpage you're inspecting) press ctrl + u (for get in a separated tab in your browser), then press ctrl + f and search for YouTube.
Any of the previous options will allow you to get the YouTube video in a webpage and you just copy and paste the obtained URL and watch directly the video on YouTube.

"Click to use Flash" button doesn't always show on Safari

I'm working on a site that uses a video recorded via the user's webcam. The recorder library is not my code, but at a high level, it tries to use HTML5 (Media Recorder API) where possible and falls back onto Flash where not. On Safari, this means Flash. Basically, I supply the library with a div where I want the recorder to appear and it inserts it there.
However, some of my users were reporting confusion on Safari (the video recorder was not showing up) and I was able to reproduce this confusing situation. With Safari 12.0 on Mac OS 10.13.6 with Adobe Flash installed and enabled in Safari:
when I navigate to the page with the video recorder, I expect to see a "Click to use Flash" button on the video recorder area. But, when I first load the page, the area is complete blank. Strangely, it appears that the button is indeed there, but just not showing:
When I click on the area where the button should be, it responds (and prompts me to enable flash)
When I open the Web Inspector tool, the button appears (you can also see the code for the Flash object here that gets inserted dynamically)
When I simply resize the window, the button appears
I don't use Safari as my regular browser, so it's not like I have a highly customized configuration. Unless I'm missing something, this feels like a bug in Safari (I filed a bug report, but they specifically say they do not respond).
I've tried some javascript tricks to "re-draw" the element (e.g. hide then show) to try and get the button to show up right away, but without any luck. Obviously I can't tell users "resize the window" or "click in the middle where there is supposed to be a button".
Any ideas what could be causing this and how to fix it?

Video not showing after tabbing on Safari - Issue is killing me (and the other developer I hired)

I designed a website for a client and had a developer (better than me) put together some Javascript which shows a video on hover. Works fine on all browsers except safari; it has a strange quirk.
The first time the page loads and the user performs the hover, the video plays no problem. If the user clicks on another tab (in the same browser window) and tabs back to the page, the video doesn't show. Just a box where the video should be.
Here's the page where you can see it in all its glory: removed
Video is MP4 H.264.
What the hell is the problem? The developer can't solve the mystery. Can you?

Dynamiclly added audio html in chrome do not play correctly, works in firefox correctly

So I have a js/jquery script that is a type of animation. The animation is bullet holes onto the background. Each hole is to play a bullet sound.
In firefox this works correctly, the waitTime is registered and the bullet sound plays as the canvas is updated. The sound is base64 encoded to reduce loading.
In chrome, I hear maybe 1 or two bullets, or maybe its playing them all at once... How can I fix this for chrome as its the preferred browser for this application.
Example http://hud.zombiebarricades.tv/bulletsounds.html
click the test link to run the animation.
You should see the bullets holes 'shooting' threw the screen. This is used for as an broadcast overlay to help you understand.
Another issue is during the location generation (watch the console), I see a GET request to undefined, I can't figure out where its coming from.
Chrome seems to have an issue with base64 encoding on audio.
I added the audio tag with base64 as the src and it will not play when displaying inline of a page. Viewing source and click the base64 link inside the src=; chrome opens a new page and plays it correctly.

Changing browser title not blinking browser in taskbar

There are a lot of tutorials on how to do this, and the crux of it seems to be changing the title constantly so the browser tab or taskbar will flash, however this doesn't seem to work for me.
I can see the tab changing its title, but it doesn't flash, so I am wondering if this is something which is no longer allowed by browsers?
I am using Windows 8.1, however have also tried Windows XP
I am using Firefox 25.0.1 and Chrome 31.0.1650.57 and neither of them react how I would expect.
As an example go to:
https://rawgithub.com/heyman/jquery-titlealert/master/example/index.html
(Make sure you click the shield icon in your url bar to allow the scripts to run on that page)
Then if you click the default example button and switch tabs, I would expect the tab hosting that page to blink or flash to indicate the tab has new content, however it doesn't do that for me, although I can see the text changing constantly.
Does anyone else have this issue and know how to solve it or why it occurs? I am looking to implement a feature in a chat system where it notifies you to new messages, however for some reason the code works fine and the title changes, but the taskbar or tab do not flash or anything and the users are really wanting this feature soon.
There seems to be no information on the internet related to this so im a bit confused and came here as a last resort.
In Firefox, tab flashes when title is changed ONLY if it is a pinned tab.

Categories

Resources