How to play different audio based on which div is in view? - javascript

I'm trying to create a website that depending on which div is in view will play a different audio file.
The only thing closely related that I could find was different audio playing depending on specific height locations of the website, i.e. between start height = 1000px and end height = 1400px play X music. Example here: http://home.jejaju.com/play/smoothFade/tracks
The only issue with this approach is that my website is responsive, so depending if you're on mobile or desktop will have different heights.
Any ideas or examples on how to approach this?

Have you looked into using the intersectionObserver? You can choose to play the audio based on the ratio of the div being within the viewport.

Related

I want to implement a video file on my Webpage (Wordpress) and making it responsive in terms of file size, to decrease loading times

I'm looking for the best way to embed a video file on my website.
What do i have to consider to make it fast?
Do i have to load up different video files (size and format) and let e.g. JS pick the right one depending on screen-size? Or is the browser doing this automatically?
Do you have some example code lines for me?
Thanks
If you leave the video tag without a source, you can then inject the source based on the screen size (e.g. 720p for smaller screens 1080p for bigger screens). Of course, this means you have to create 'x' versions of the video (one for each screen size).
Another approach is to do video streaming. You'll need a JavaScript player - but just like Netflix, you can have multiple sizes and bitrates, and the player will adjust the video playback on each device based on screen size and network speed. One huge advantage here is that it can adjust during playback to a different version to ensure that the video continues to pay.
There are services that will do this for you - just upload the video, and you'll get a link for the player that you can embed on your page - api.video is one.

delay in dynamic image load in ios

I have implemented a simple jquery carousel for mobile devices which has three containers for three images at a time. I have used jquery for the animation. Depending on the user's swipe direction, left or right, I update the contents of the relevant image container. The contents include the image's src path and the image title in a div tag. This works fine across all Android devices, but I am getting a delay in image load in iOS devices. Due to this, there is a flickering when the previous image is replaced with a new one. How can I solve this?
Thanks in advance!
Add 2 more containers off screen (one at each side) to pre-load the images and scroll them in when needed. This is a very common design.

mobile-first method to deal with size of embedded video players?

I see a number of ways to deal with layouts, and interchange, etc to deal with image sizes, but I haven't come across any info about video player size. For instance, using viewbix, voo, jw, or any other js served video player, the size of the player is built into the embed. It also has an associated image file for the poster frame.
Just wondering how other folks approach this. Do you make multiple versions of the embed and image for various breakpoint sizes? Does it matter if the embed is too big? Not sure if that actually affects streaming speed or not, or if the video itself is technically doing anything until play is pressed. Image would still be an issue though as serving a full width desktop size image on a 320px screen seems a waste.
What's the smart way to handle this globally?
thx
With the JW Player, we have responsive support built into the player - http://www.jwplayer.com/blog/new-in-jw-player-responsive-design/, so you don't need to worry about breakpoints, media queries, or anything like that. Those would all still be handled in your CSS.
jwplayer("myResponsiveVideo").setup({
file: "/assets/tearsofsteel.mp4",
image: "/assets/tearsofsteel.jpg",
width: "100%",
aspectratio: "12:5"
});
Basically a set up like this will make the player responsive, regardless of what container it is in.

Parallax implementation guidance like Sony website

I am developing a website using parallax. Just a brief note on what I did so far.
I used the skrollr plugin for generating the parallax effect. With this plugin I was successfully able to move elements with different scroll speeds. However, there are a few major issues I really to resolve.
Given your understanding and guidance I look forward to get through them.
Here is what I am trying to address:
1) The site that I developed is not responsive with parallax. Data attributes for elements are written inline (and thats how so far I think they are written: inline). So because of that even on screen resize, the inline styling of data attributes remains intact. Hence, the responsive stuff for parallax (on desktop version) is not able to produce same effect on mobile versions.
2) I checked the sony website. Link : http://www.sony.com/be-moved/
They have used parallax and the site is responsive.
Parallax websites are based more on the imagery content. So, how does the site load faster when the images are of huge sizes. (Running into MBs). The sony website has very heavy images (size running into MBs). How do images of such heavy sizes load so fast?
3) Again, coming back to the sony website. On scrolling the user is shown various perspectives / angles of sony products. So, how are the multiple perspectives of every product captured for scrolling.
How is such precise sequential image with varying perspective for every product shown on scroll?
Its the entire background image that changes perspective. So, how is that done? Thats not just plain parallax, right?
I am mentioning this site because its implemented in a differenet way from other simple parallax websites. Sony's implementation is what I am interested in!
4) What would be best to do? Changing background images on scroll(like the way its done on sony) or changing the position of single elements using data attributes?. (like its done on www.numero10.ch)
I have been asked to implement parallax in two ways:
a) only move the elements within the background. Like if its a sky image with two clouds on the right. Then just consider moving the two clouds to the left on scroll.
or
b) Have different background images with the two right clouds moving to the left. So, that means I will have a volley of images for just moving the clouds from right to left; with every image having two clouds shifting towards left by pixel positions.
Looking forward for a reply. :)
Thanks for your patient reading.
I think this will lead you to the right direction: https://ihatetomatoes.net/sonys-be-moved-website-deconstructed/
It explains in detail exactly how the Be Moved website is constructed.
2) I believe they use something called "Lazy Loading" which is displaying a "fake" lighter image until all the HTML,CSS,JS is loaded to then load the real images and replace them.
3) That is not mere parallax , they are using the canvas element ( How exactly I don't know but check the page source )
4) It is better to leave an image as a fixed background and work with smaller elements.
I think that site is not just parallax layered scrolling, It is a combination of a sequence of video clips triggered on scrolling. I have not inspected the element of site but I think so. But site is loading tremendously fast compared to other such sites because of your cache in your system and implementation of lighter images in the starting and heavier images at last

how to Resize Quick TIme Player to the size of an HTML/CSS DIV

I am using Quick time via javascript so that I can play video on my web browser. I want to resize the video so that it fits the size of the DIV. The problem is that when the player launches the video the size of the DIV remains the same but the player gets out of the DIV. I want the size of the DIV remain the same doesnt matter if the player can not be fully shown or resized.
How are you setting the size of the player? If you set the <object> width and height attributes to a certain number of pixels it should respect that. Whilst you can set width: 100%; with CSS, if that makes it resize with a liquid layout many plugins won't resize themselves after loading.
Unless you absolutely must play back old-school .mov files, I would strongly recommend avoiding the embedded video players today, and especially QuickTime which many Windows users will not have. Video on the web today is primarily done with Flash players. HTML5 <video> with fallback to Flash is nice to have for the newer browsers.

Categories