I am creating a Bash program using Replit and it needs to play sound. What should I do?
I surfed through the docs but they were of no use.
Create a secret called VNC_ENABLE_EXPERIMENTAL_AUDIO with a value of 1
Trigger the VNC screen by opening a native desktop window like xeyes in the background
Create your audio
Tick the checkbox at the bottom right corner of the VNC view
Steps 3 and 4 are interchangable, but to play sound browsers require a user interaction and Replit solves it this way.
Example replit.nix file
{ pkgs }: {
deps = [
pkgs.bashInteractive
pkgs.speechd
pkgs.xlibs.xeyes
];
}
Example main.sh file
{ pkgs }: {
deps = [
pkgs.bashInteractive
pkgs.speechd
pkgs.xlibs.xeyes
];
}
Resulting Replit (requires CORS JS iframe embeds)
<iframe src="https://replit.com/#cachius/AudioInBash?lite=1&outputonly=1" style="position: absolute; height: 100%; width: 100%; border: none"></iframe>
Put
audio = true
into the .replit file
Related
We are using a YouTube video on our website as a hero banner.
However few days ago it started showing it's title, watch later button and a share button. We were able to hide them using &showinfo=0 at the end if the URL.
I found out that showinfo has been deprecated and thus you can no longer hide the fact that it is a YouTube video showing there.
Is there any other parameter that might be able to do the same thing?
You cannot do it with CSS or JavaScript as it is an iframe.
Any ideas are much appreciated.
UPDATE:
Any layer or mask over the video doesn't help, as the info shows when the video is loading, or if you click outside the browser, the video will pause and the info shows.
Hiding the top ~60px works, but it is not a good solution for me.
Directly from show info
Note: This is a deprecation announcement for the showinfo parameter. In addition, the behavior for the rel parameter is changing. Titles, channel information, and related videos are an important part of YouTube’s core user experience, and these changes help to make the YouTube viewing experience consistent across different platforms.
The behavior for the rel parameter is changing on or after September 25, 2018. The effect of the change is that you will not be able to disable related videos. However, you will have the option of specifying that the related videos shown in the player should be from the same channel as the video that was just played.
It clearly states that this is something they consider to be part of the cor youtube experience. There is no suggestion of a workaround or a new parameter that you could send to archive the old results. They are removing it. If you tried to force it out using javascript and css i would almost suggest you are against the TOC which states your not allowed to change that display. People should know you are showing something from YouTube
If you need to hide the info, ideally go for Vimeo pro (which properly supports a no info embed),
Otherwise there is a simple workaround:
https://jsfiddle.net/10ov5hgw/1/
It cuts off the bottom & top 60px of the iframe, but via overflow rather than a gross looking black bar on top, so video still looks fullscreen the entire time (and barely any of the video is cutout if you force 720) ,
This hack supports having to support mobile views aswell, without heavily impacting the visible area of the video.
.video-container{
width:100vw;
height:100vh;
overflow:hidden;
position:relative;
}
.video-container iframe,{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-container iframe, {
pointer-events: none;
}
.video-container iframe{
position: absolute;
top: -60px;
left: 0;
width: 100%;
height: calc(100% + 120px);
}
.video-foreground{
pointer-events:none;
}
<div class="video-container" >
<div class="video-foreground">
<iframe
src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ&mute=1"
frameBorder="0" allowFullScreen>
</iframe>
</div>
</div>
The solution I found aesthetically most pleasing is to lay a high res thumbnail over the video and hide it at hover. This also deals with the problem that the youtube preview is low res and looks cheap in my opinion.
Check it out here:
http://jsfiddle.net/d9D9E/1/
Had to write code in order to show the js fiddle :/
.video-thumbnail{
z-index:300;
position:absolute;
top:0;
left:0;
width:100%;
}
.video-thumbnail:hover{
display:none;
}
Not having 'rel=0' is irritating, but there is a work around. If you work with the IFrame API, (as opposed to embedding an iframe ex http://youtu.be/?videoIDxxx...) you can get the event for the stopping (completing) of the video, then cue up the video by ID into the player. See https://developers.google.com/youtube/iframe_api_reference#Playback_controls for reference to the basic player.
....
<div id="player1"></div>
<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player ;
function onYouTubeIframeAPIReady()
{
player = new YT.Player('player1',
{
videoId: 'YourVideoId',
events: {
'onStateChange': onPlayerStateChange
}
});
}; // onYOuTubeIframeAPIReady
function onPlayerStateChange(event)
{
// Alt approach //if( event.data == 0){ location.reload()}
if( event.data == 0)
{ player.cueVideoById({videoId:'YourVideoID',
suggestedQuality: 'hd720'})
};
}
</script>
I was looking at the same problem and the only solution I found is to set the video in autoplay and place a transparent layer over the youtube box.
The user would not be able to interact with the player, but it can be useful in some situation like banner.
Unfortunately the code doesn't seem to run correctly on stackoverflow I also add a jsfiddle: http://jsfiddle.net/z3dqpuy0/
.yt-cntainer {
position: relative;
}
.yt-mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class="yt-cntainer">
<iframe id="vid-player-1" src="https://www.youtube.com/embed/Bey4XXJAqS8?enablejsapi=1&rel=0&controls=0&showinfo=0&autoplay=1" frameborder="0"></iframe>
<div class="yt-mask"></div>
</div>
Well, I just noticed it as well. It sucks and ruins the aesthetics. So I just did a
header {
/* remove when YT got its brain back */
margin-top: -56px;
}
while hoping that they'll re-add showinfo=0 again.
What about this. Yeah this will zoom the video.
iframe {
transform:scale(1.4);
}
<div id="schnitt">
<iframe width="500" height="280" src="https://www.youtube.com/embed/rlR4PJn8b8I?controls=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<style>
#schnitt {
height:250px;
overflow:hidden;
}
iframe {
margin-top:-55px;
}
I'd like to mimic the user zooming out to 80% when viewing my webpage. Something along the lines of
`google-chrome --headless --disable-gpu --screenshot --zoom=0.8 --window-size=1920,1080 http://www.example.com/`
But the "zoom" property doesn't exist, and I can't find anything in this list that looks comparable:
https://peter.sh/experiments/chromium-command-line-switches/
This must be a fairly common thing for people to want to do, so I feel I must be missing something simple...
You don't need to use a chrome headless feature for that - chrome will render your css as long as you have the zooming in there. This is the css I used:
#media print{
#page { margin: 2%; size: A4 }
body { margin: 1.6cm; zoom: .7;}
footer {
position: fixed;
bottom: 1;
}
header {
position: fixed;
top: 1;
}
}
NOTE the zoom: .7 in the body ... to issue the following chrome headless call :
chrome --headless --disable-gpu --print-to-pdf \
'https://qto.fi:442/qto/view/installations_doc?&bid=0&as=print-doc'
Bonus: If you want custom header and footer with some logos etc. just add the header and footer tags:
<header><p>header</p></header>
<footer><p>footer</p></footer>
Adding back this answer that was deleted but is what I was looking for.
--force-device-scale-factor=1.5
This will set a scale factor on the headless instance when you get the screenshot. Suppose you want a 500px by 500px image of a 1000px by 1000px web page. Then use:
google-chrome --headless --force-device-scale-factor=0.5 --window-size=1000,1000 --screenshot=out.png https://mywebsite.com
I am thinking maybe editing the prefs.js file? See post here for why. Thanks.
I found a solution. It is not the same as Tab Mix and lacks a whole bunch of usefulness, but it does put the tabs on multiple rows.
First, locate your profile directory (see e.g. Mozilla Support), mine is at
~/.mozilla/firefox/xxxxxxxx.default
(where xxxxxxxx is some random characters), on a typical Linux system.
If it does not exist yet, create a subfolder chrome and within that a file userChrome.css (I think the capitalization of the filename does matter, but I did not test that):
~/.mozilla/firefox/xxxxxxxx.default/chrome/userChrome.css
In userChrome.css, add the following code, which I got from this source:
.tabbrowser-tab {
flex-grow:1;
min-width:150px;
}
.tabbrowser-tab,.tab-background {
height:29px;
}
.tab-stack {
width: 100%;
}
.tabbrowser-tabs .scrollbox-innerbox {
display: flex;
flex-wrap: wrap;
}
.tabbrowser-tabs .arrowscrollbox-scrollbox {
overflow: visible;
display: block;
}
.tabbrowser-tabs .scrollbutton-up,.tabbrowser-tabs .scrollbutton-down,#alltabs-button{
display: none;
}
After saving, you need to restart Firefox.
Bonus: another nice feature that Tab Mix brought, is the placement of a close button on each separate tab. This can be done by adding another piece of code to the same file (from this source)
.tab-close-button:not([pinned="true"]) {
display: -moz-box !important;
}
I have a 'responsive' website but there are some links I only want on 'pc browsers' only and not on 'tablet landscape' becasue they link off to flash objects.
So far this is what I have done but it't not a 100% fix as some android tablets such as 'Lenovo think pad' which have a bigger screen.
I am using media queries to make my site responsive and this is what I'm currently using...
#media only screen
and (max-device-width : 1024px)
and (orientation:landscape)
{
header.Site
{
nav.Site > ul > li { line-height: 2 ; }
div.BidSessionCountdown,
a.LiveOnline { display: none; }
}
}
Is there any CSS fixes you can think of?
Thank you in advance
Tash :D
Using media queries isn't really the appropriate technique to detect if flash is supported or not. My suggestion would be to determine this using JavaScript, and assign a class to the body element such as "no-flash". Your JavaScript might look like this:
//Using jQuery here
if(typeof navigator.plugins['Shockwave Flash'] == 'undefined') {
$('body').addClass('no-flash');
}
Then, your CSS could be as follows:
body.no-flash a.LiveOnline {
display:none;
}
Note: The javascript code that checks the navigator plugin comes from Here.
When you are using the orientation:landscape, you have to consider whether the keyboard popup will change the display, once the width size is larger than the height size, the css will consider it as landscape.
Is there a ways to check inside a browser (e.g. javascript) if the user is running inside a Remote Desktop session?
If the user is running their browser inside a Remote Desktop (i.e. Terminal Services), i want to disable animations on the web-site.
If this were a native application, as opposed to a web-site, i could perform this checking using:
//Native code
isRemoteSession = GetSystemMetrics( SM_REMOTESESSION );
or
//Managed Code:
isRemoteSession = System.Windows.Forms.SystemInformation.TerminalServerSession;
Is there a similar check that can be done inside the browser?
Note: Assume for the purposes of this discussion that the browser we're talking about is Internet Explorer 8.
Update One: Perhaps something in How can you get the terminal service client machine name from javascript?
My solution is to use CSS #media queries for minimum and maximum values of the color media feature. Based on experiment, RDP only seems to have 5 bits per color, rather than the full 8 bits per color of your typical desktop.
This solution is, of course, not perfect, because you'll get lots of false positives from people who aren't on RDP, but just happen to have low color-depth displays. However:
If you are in a relatively controlled environment like a corporate intranet, you might feel more confident that "low color depth" = "RDP".
Many of the visual elements that need adjusting for RDP on a web-page, need adjusting precisely because of the low color depth (gradients, fade outs, animation, etc.), and so it actually makes sense to test for color depth rather than RDP per se.
Here is an example that works for me in recent version of Firefox and Chrome. See the screenshot below.
<!DOCTYPE html>
<html>
<head>
<title>Test RDP detection</title>
<style type="text/css">
#media all { li.color { display: none; } }
#media all and (min-color: 1) { li.color.color-depth-1 { display: block; } }
#media all and (min-color: 2) { li.color.color-depth-2 { display: block; } }
#media all and (min-color: 3) { li.color.color-depth-3 { display: block; } }
#media all and (min-color: 4) { li.color.color-depth-4 { display: block; } }
#media all and (min-color: 5) { li.color.color-depth-5 { display: block; } }
#media all and (min-color: 6) { li.color.color-depth-6 { display: block; } }
#media all and (min-color: 7) { li.color.color-depth-7 { display: block; } }
#media all and (min-color: 8) { li.color.color-depth-8 { display: block; } }
/* 5 bits per color seems to be the max for RDP */
#media all and (max-color: 5) {
.not-rdp { display: none; }
}
#media all and (min-color: 6) {
.rdp-only { display: none; }
}
</style>
</head>
<body>
<p>This page uses CSS <tt>#media</tt> queries to detect whether you
are viewing it over RDP—heuristically, by looking at the
color depth of your display.</p>
<ul>
<li class="color color-depth-1">Your display is not monochrome!</li>
<li class="color color-depth-2">Your display has at least 2 bits per color.</li>
<li class="color color-depth-3">Your display has at least 3 bits per color.</li>
<li class="color color-depth-4">Your display has at least 4 bits per color.</li>
<li class="color color-depth-5">Your display has at least 5 bits per color.</li>
<li class="color color-depth-6">Your display has at least 6 bits per color.</li>
<li class="color color-depth-7">Your display has at least 7 bits per color.</li>
<li class="color color-depth-8">Your display has at least 8 bits per color.</li>
</ul>
<p>You are <span class="not-rdp">not</span> using RDP.</p>
<p class="rdp-only">This is only visible over RDP.</p>
</body>
</html>
Yet another approach along these lines is to use javascript to examine the value of the screen.colorDepth variable.
You can use the following media query:
#media screen and (prefers-reduced-motion: reduce) { . . . }
This condition can also hold for non-RDP sessions, but as your intention is to disable all animations, this type of query is probably exactly what you're looking for.
You can probably expose the detection code via an ActiveX or BHO (e.g. assign a property to the window object in BHO) if you use IE.
Otherwise if you are using an ActiveX player to play animation, check the player's documentation to see if it automatically adjust frame rate under remote desktop.
You can always offer a low bandwidth version of your web site and instruct the user choose the web site instead of the regular web site if the video playback is not satisfactory.
For tips in writing a terminal service-aware graphics app, check graphic effects consideration, and the general performance guidelines
Perhaps you can read the SESSIONNAME environment variable?
For a console session it should be CONSOLE and for an RDP session it should be RDP-TCP followed by a number.
I'm assuming you are talking about a specific company terminal server, not any terminal server. You could not serve animations to the specific IP address of the TS.
This should not be done or decided by your application. On RDP client (like MS RDC), user can choose to disable animations etc. User can also disable these on server side (Terminal server or RDP host)