Is there any way to emulate this kind of 360 degree product view scroll/drag functionality with video, so taking a piece of video and being able to scroll it left and right as though it was a set of images? I've found this tutorial which is about the 360langstrasse.sf.tv/page/ site which is pretty interesting, but it's pretty custom to their specific needs and pretty complex. Is there any way to just take some video and have the kind of left/right scroll/drag functionality that you would get with an image-based 360 degree script? I would just like a little video to load in a placeholder, and then you can drag it left and right.
I've thought about converting frames to jpegs and then stitching them into a panorama, but that gets very big very quickly. Would prefer a video solution, where one can just drag the video itself.
You could shoot the video of the object spinning. Then play it forwards for spinning one way and reverse for spinning another.
Using 2 videos could also work - one for spinning one way and the other video the opposite way.
This is possible in Flash but I'm not sure about HTML5 video across browser vendors.
Is it possible to play HTML5 video in reverse?
Related
Playing HTML videos in reverse can be accomplished with JavaScript, but I am having issues that all the methods I found are slightly laggy, and can't find a smooth reverse play.
On mobile devices it is even worse as the lag is amplified and the video skips rather than plays in reverse.
Similar topics:
Play video on hover, play it on reverse on mouse off
Play video in reverse mouse move
Is anyone else having the same issue? And how can we smoothen out the reverse play?
Code can be found in the linked topics.
thanks!
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.
i'm searching for a long time a solution for my necessities but i can't find anything help me.
Well, i have a html5 player with a video (with exception, if not support, use flash) i wanna insert a banner into this video at a certain time and for a certain duration, full screen and normal size.
what javascript code should i use?
the html should be easy:
div
banner (hidden)
video
/div
what javascript code should i use?
2° Question: i always have this player, i want that when the user click for the first time on play, happen something, like open an full size image, or open a video, ecc.
I not found so much on internet about advertising and coding, and i'm not very good with javascript.
So, i hope some one there can help me, thank you.
Display your ad image on page load and ask user to click to play video.
Load your video with a proper player plugin
Start playing video
Continuously check video duration using player API
At a specific duration like (15th second) display and overlay div on top of your video
Done.
Also if you're not that good with javascript probably it's better to start with something less complicated.
I am making a digital storytelling which is a website containing images and audio tracks. I came across skrollr today and found it interesting. Now I am wondering if anybody knows a solution to using skrollr with audio tracks - so that the audio will stop and start based on the scroll-position. I appreciate all ideas and creative thoughts.
Link to skrollr: https://github.com/Prinzhorn/skrollr
Skrollr only animates changes in CSS. You'll need to use javascript to do what you want.
This is easy enough to do with jQuery. Set an event handler to watch for scroll events, then check if the document is scrolled within particular bounds, then do whatever you want (e.g. play/pause audio). There are a million solutions for playing audio. I'd recommend howler.js.
I have a one page website that I would like to have multiple videos on. I want the videos to be full-width of the browser. I have 6 videos in total. I messed around with plugins that allow me to set an HTML5 video as a div background, but when I add multiple HTML5 videos to the page, the video quality is poor, and jumpy. I'd like to be able to autoplay the videos, and keep the audio functional. In regards to loading speed, playback quality, and overall best user experience, does anyone have any suggestions in order to accomplish this? Should I continue with the HTML5 video as a div background approach or try YouTube videos?
Autoplaying multiple videos at the same time on any website especially if they are full width of the browser will make most videos jumpy. If you have them play one at a time you will probably not have that issue.