On button hover or click short mp3 audio should be played (less then 1 sec).
This code used to play audio:
<audio id="hover-sound" src="/assets/hover-sound.mp3"></audio>
$('#hover-sound')[0].currentTime = 0
$('#hover-sound')[0].play()
It works in both Chrome and Safari, but it is slightly delayed in Safari (200-300 ms).
Please advice is there a way to remove Safari delay?
Thanks.
Related
We created a 10 sec 1920x1200 video file of a circle with a border to test HLS streaming pixel aspect ratio (PAR) correction. The video was scaled and encoded with x264 to 320x176 giving a PAR 22/25. Our source and output HLS fMP4 files can be found here https://gitlab.com/kferguson/aspect-ratio-streaming-files.git
The moov.trak.tkhd MP4 box in the fragment_1000kbps_init.mp4 file shows the correct visual presentation size of 281x176 and the ...avc1.pasp box shows the correct PAR of 22/25. (We used the "isoviewer-2.0.2-jfx.jar" application to view the MP4 boxes.)
If the master.m3u8 file is played with the VLC player or with gstreamer,
gst-launch-1.0 playbin uri=file:///master.m3u8
the aspect ratio is correctly displayed. However, with ffplay or streaming to hls.js embedded in a web site, the PAR is not corrected (the circle in the video is squashed). What is ffplay and hls.js 'looking' for in the MP4 boxes for them to playback correctly?
We did a further experiment by concatenating all the fMP4 files into one .mp4 file with the following Powershell command:
gc -Raw .\fragment_1000kbps_init.mp4, .\fragment_1000kbps_00000.m4s, ..., .\fragment_1000kbps_00000.m4s | sc -NoNewline .\fragment_1000kbps.mp4
Strangely, ffplay plays this concatenated mp4 file back with the correct PAR. (Also included in the git link above.) We assumed by this that there is some info in the fragment m4s file boxes that ffplay (and hls.js) require to playback correctly but, we cannot find it?
The issue is the requirement of the optional vui parameters (sar_width and sar_height) within the H.264 Sequence Parameter Set (SPS) of the "avcC" MP4 box. The vlc player and gstreamer only require the pasp box inclusion but, ffmpeg and hls.js players require the additional vui parameters to be set correctly.
I would like to play "no mask mp3" whenever "no mask" is recognized, but I keep hearing the audio overlapping. How can I play with delay so that the audio does not overlap?
please help me thanks
enter image description here
I want do play different videos according to selected button and I want to make a smooth transition between the videos with a fade in fade out transition.
Every time when I change the video, a black background appears and the video start.
I don't know if I'm misunderstanding something fundamental in how screen resolutions work, but I'm getting stuck on an issue with the Kindle Fire HD (7").
I have a responsively designed page that, as normal, uses CSS media queries to change the presentation of certain elements. This works as expected on all browsers and devices tested, except for when browsing with the Kindle Fire HD (7"). According to specs (http://en.wikipedia.org/wiki/Kindle_Fire_HD) it has a screen resolution of 1280 x 800 px. This is also verified when I check the device using WURFL's test tool at tools.scientiamobile.com.
So... I have breakpoint screen widths set for
'mobile' - 767px and below
'tablet' - 768 - 989 px
'desktop' - 990px and above
... so I'd expect the Kindle Fire to display my page in 'tablet' mode in portrait orientation, or 'desktop' mode in landscape. However instead it shows it in unexpectedly smaller breakpoints: 'mobile' mode in portrait, and 'tablet' mode in landscape.
On closer inspection, I'm not sure this is actually much to do with my webpage, or its CSS. When using this device, I also seem to be seeing 'smaller' breakpoint views of other RWD sites (e.g. in portrait mode, I get the 'tiny' breakpoint view of getbootstrap.com, which is aimed at 767px and below).
What's then strange is that, when detecting the screen size using JavaScript, I get 534 x 854px (and have also tested this again on other sites, like supportdetails.com, and got the same results).
I haven't found any similar issues reported re this device, so I'm wondering a) if anyone's encountered similar issues, or b) if I'm just misunderstanding something crucial with how screen resolutions are detected by different devices.
Thanks!
When doing media queries you need to take into account the CSS pixel ratio.
The value you need to use on the media query = (The Advertised number of pixels) / (CSS Pixel Ratio).
This wikipedia page is a good source of CSS pixel ratios to use for this:
http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
Good Luck
Why do simple animated gif images take so long to load before they start animating smoothly in a browser, even when the file size is smaller than the cumulative file size of other non-animated image files that have already loaded on the same page?
Simpleton, check out this link, it seems to be a common issue: http://code.google.com/p/chromium/issues/detail?id=295 and: http://forums.mozillazine.org/viewtopic.php?f=38&t=478663&start=0
From skimming these two links, it seems that 1) either the design of the browser limits the FPS of gifs or 2) your browser uses a webkit that loads gifs slowly, and switching to a different browser may speed it up.