How do I get the download button to show on HTML5 audio?
I have seen many articles explaining how to hide the download button. But in my case, I need to show the button.
It's not intended for you to have control over the presentation of the controls of the built-in media player.
While browsers do provide some things you can manipulate via CSS, this isn't really the best way.
If you want to ensure that a download button is present, you need to implement it yourself.
<a href="/path/to/media/file.webm" download>Download</a>
Related
I checked the pageinsights of "http://www.briddles.com/riddle/9-bodmas?l=333"
Most of these are thirdparty. How can i sove it ?
I see 3 important groups there:
Youtube
Google Ads or analytics
Facebook
Here is what I would do:
I see the youtube player is hidden by default, I would reserve some space for the player (maybe with a lightweight placeholder) and only append the iframe when the user clicks "view answer". This lite-youtube web component is awesome and might help you out. Trust me.
Normally Google ads is not something you want to get rid of. I would just make sure to load these scripts with the async attribute at least.
For the facebook comments I imagine 3 approaches:
3.1. Render a placeholder with a button saying "See comments" or something like that and only fetch the scripts when the user press that button.
3.2. Use the Intersection Observer API so when comments section scroll into view, fetch de scripts and render. (You will have to reserve some space to avoid CLS).
3.3. Remove the comments section (if there is almost no usage) or use a different provider that is optimized for web vitals. I don't know which one, but it's still an option.
Extra recommendations:
The main image is too heavy for mobile users, try to use a responsive image, compress the image and choose a lighter format like webp for browsers that support it. More info about image optimization here.
Reduce the amount of fonts you use and, if possible, host it by yourself and use a CDN. Google fonts is practical but to host your fonts is better for performance.
I need to make audio players from soundcloud links, which can't be played by audio element, they need an iframe.
I found a lot of tutorials how to make custom play/stop buttons for iframe video. Unfortunately they don't work for iframe audio. Is there a way to make those buttons for iframe audio, too?
Soundcloud embed links displays as player with play or pause button. https://soundcloud.com/pages/embed
Pocket chrome extension has a feature that "Integrated buttons on Twitter.com and Google Reader for one-click saving".
Here's a screenshot of my twitter timeline.
Every tweet will have a bunch of buttons (Reply, Retweet, Favorite, etc) if we hover over it. With the Pocket extension enabled, we can also have a integrated pocket button and save tweet to pocket with one-click (red line).
I wonder how that can be implemented since I intend to add my own buttons that will sync tweet to other services.
And ideas or links would be helpful.
Thanks
To modify the content of a web page, you have to use content scripts. In your content scripts, you will call DOM functions to add those share buttons (depending on how the page is generated and the structure of the page, it can be very easy or very tricky). And you add a click event listener to those added buttons. In the event handler, you can obtain the tweet text and send a message to the background page. Your background page handles these messages and make appropriate XHRs to share the tweet to other services.
I need to know how i can insert menu-item into YouTube context-item using Google chrome extension.
I searched for that a lot and i found similar question but no any persuasive answer.
I need the solution very much.
The chrome extension API includes a Context Menu feature, but since the YouTube player uses Flash, there is a completely separate context menu that Chrome does not have direct control over.
So it is not possible to customize the context menu with the Chrome API. However, you may be able to get by with a (somewhat hacky) solution, such as covering the video with a transparent HTML DOM element. The DOM element should trigger Chrome's context menu instead of the Flash context menu.
It has to work on IE8 and above, and the rest of the modern browsers (Firefox, Chrome, Opera).
Related question:
How to play a notification sound on websites?
I've tried using the Yahoo! Media Player, but it refuses to pick up on my .mp3 links despite them looking like:
<a id="wolf-blue" href="/Public/audio/wolf.mp3">a</a>
Assuming I have a .mp3 file and I want to play it when a timer reaches 0, what do you suggest I use to play this sound file? I do not want to show my users any sort of player UI, just play the sound.
You'll want to check out jPlayer. It's an HTML5 Audio player that has fallback to Flash for browsers that don't support HTML5.
You can use CSS to completely customize the player, including hiding it from view.