there < i need your help.
I have made a hero page with video as background. And I have some text animation too.
Due to the video file size and network performance, the text animations are always starting early than the video loaded and play, i.e, the text animations started in a black background.
So is there any event listener i can use to know that video is starting playing , and i can set animation's play state to run.
I tried many listeners, load, play, playing, canplay, ....seeems they don't fire.
And I also find poster attribute doesn't work either, is it because i used autoplay , loop, and preload="none" ?
Thanks
Related
I have a MP4 video of a product which shows a 360 of the product (so it looks like it's spinning) - I have it autoplaying on the page and looks great.
I want the user to be able to click and drag on the video to basically rewind or fastforward the video, so they can kind of scroll back and forth and spin the product around as they wish.
We have used the js-cloudimage-360-view library and used images, but because we wanted this as smooth as possible each colour had 360 images and loading times weren't great, we have MP4s which are small in size and load fast but it's just the srubbing I can't get right.
I'd had a look at this https://codepen.io/webandapp/pen/xEjjOJ too but it's supper jumpy, essentially we want if the user drags to the right it fast forwards as they drag, when they stop it should play from that point (and rewinds if dragging to the left) - this should be as smooth as possible.
The video is just a HTML video element like so:
<video id="three-sixty-video" preload="auto" controls loop playsinline autoplay muted>
<source src="/video/video-1.mp4" type="video/mp4;">
</video>
Scrubbing on a streamed video is limited by the speed at which the video can be downloaded, decoded and displayed.
For a large video on most devices and connections it is not practical/possible to do all this as quickly as a user can scroll along the video timeline.
This is why video containers (mp4 etc) often include a track of thumbnail images which are displayed when the user scrubs along the line.
In other words, it is not actually the video you see in the small image in the timeline, but the appropriate thumbnail for that time in the video.
When the user stop scrubbing, the player then requests that section of the video, decodes and displays it. This is (generally) not immediate.
If your video is small enough and is downloaded completely then you may find you can scrub as quickly as you want, but even then it may be device/client dependent - a quick local test with a number of videos seem to suggest it should scrub ok when available locally:
Using a relatively small 30MB, 50 second local mp4 video, available locally on he computer hard drive (a MAC), scrubbing is relatively smooth using the Quicktime client player.
The same video on the same device being viewed by the Safari browser rather than directly by the QuickTime client appears to be similar, although it is hard to be sure. The playback may well use very similar paths under the skin.
Using a much larger 2G, 4K, 2 minute 30 second video, also locally on the hard drive, scrubbing is again relatively smooth both in Safari and QuickTime.
As a side note, if you do decide the solution is to have the video fully downloaded before you play, that is also an interesting challenge. Most effort is usually focused on the opposite, allowing a video to start playing before it fully downloads. You may find that, providing the video is not too big, having the header info at the end (the MooV atom for mp4) will force the browser to download it fully. This is the opposite of the mp4 faststart you will see discussed some places. I'm not sure how reliable this will be as I think some browser may be clever enough to 'search' in the video by making different requests for bytes at the start and end to find the metadata.
In Chrome, when the website audio is playing, the label's css animation on the web form fails, even though the JS to fire the addClass function works. However, as soon as I turn off the audio by clicking the sound bars in the bottom right corner, the animations work as expected.
Why would the audio effect the css animation?
https://www.taliscreative.com/contact/
The transition of your sound bars has a duration that might be longer than the "duration" of a frame. This means that every frame you ask for an animation that might take longer than a frame. Things start malfunctioning.
You're already animating them on a "frame-by-frame" basis, so you could just set the sound-bar transition duration to 0s and it'll still look smooth!
I have a soundfile running automatically and on repeat during on website. Since it's a simple game, sometimes after user takes certain actions I have dialogues or video clips played and the main music in the background interferes with that.
I tried using .pause() function and it indeed pauses the music, but I didnt find an efficient way of turning it back on again after the certain clip is played. Perhaps setTimeout function could work, but that wouldnt be very efficient to determine how long said clip lasts
You can pause the main (loop) audio when the dialogs are triggered and listen for their end to resume playing the main audio file.
Listen to audio/video ending: https://www.w3schools.com/tags/av_event_ended.asp
So i'm trying to stream video in segments without using the MediaSource extension. (Because not all browsers support MSE). Now i'm trying to do this by loading two video elements and play the next one at the right moment. But this has a very tiny delay between switching. I tried to keep checking the currenTime of the video and after a tiny fraction play the next video element. But this doesn't really work that well (audio overlaps, or delay)
Mind you that the video are preloaded and loaded from Blob storage. So the loading shouldn't delay the playback.
How can i make this (Or another solution without flash) play smoothly without using MediaSource extensions?
Your best bet is to use two video elements positioned one on top of the other. The first one should be playing the current part (or chunk) of the video. The second video element should be loaded with the blob that contains the next chunk and be paused. It should also be hidden (you can set display:'none' or z-index:-99999). And then when the first video element ends (the end event is dispatched), call the play() method of the second video element, show it, and hide the first one. Rinse and repeat.
This is what the LifemirrorPlayer does.
If the chunks of the stream are perfectly encoded and cut then this technique works. Often it doesn't. Common problems are:
Synchronizing the audio stream is the probably the hardest. After twenty or thirty chunks are played, the audio usually loses sync with the video. This is very annoying for the viewer and hard to detect and fix (i don't know of any solution actually).
The video element doesn't end. This is usually caused by an encoder that has put too much (or too little) content into a chunk. It can also be caused by improperly cut chunks, by a buggy encoder or decoder.
Flickering when the two video elements are swapped. This depends on the browser. However most browsers deal very well with this and the swap is quick and smooth.
i have a absolute div positioned over a custom brightcove video player.
when the video is not playing , i can capture it being clicked. however, when
the video is playing, no clicks are getting through.
what could be the problem? could it be that brightcove player is preventingDefault for the clicks?
Mobile Safari does not allow any elements positioned on top of a video element to receive any mouse/touch events, except when the video element does not have the "controls" attribute. This has nothing to do with preventDefault.
If you were creating your own video element, the solution would be easy: disable native video controls on the element and build your own (or use something like videojs, jPlayer, etc.). But it's a little tricky to get Brightcove to do this is quite tricky. You need to create a custom player, which unfortunately is going to be restricted to your Brightcove account and cannot be applied generally to all Brightcove videos.
Brightcove does have some documentation on how to do this if you search for it, but be careful because when they say "chromeless player", they don't mean a player without any controls, like YouTube does. Brightcove's chromeless player still has play controls; it just doesn't have any of the extra share buttons below/above the video.