I am trying to work out how to get controls the same as for a video for an html5 animation, ie controlling a youtube video but instead of a .mp4 video being controlled by the player, rather a html5 canvas animation.
this being the basic idea:
!
Basically just want to be pushed in the right direction for what i could search because so far whenever i try the only thing i can find are html5 video players that control video (.mp4/.mov/etc) and not animations.
thanks.
You can use GSAP. Here is a demo showcasing exactly, what you want.
Related
Is it possible to get gif thumbnails from Brightcove videos?
I have a client using the Brightcove Video Cloud platform, and in a new design we would like to have the ability to show a clip of the video in gif form, when the user hovers a thumbnail. In much the same way that YouTube does.
Is this possible?
Unfortunately, there is no out-of-the-box implementation of thumbnail scrubbing for the Brightcove player at this time.
We created an open-source sample Thumbnail Previews Plugin that implements displaying the thumbnails, however you are required to generate them and make them available on your own. We also have a support document outlining how to use the plugin and options for generating the plugins.
It looks like this plugin was written for Brightcove Player v5.x but I'm not seeing anything in it that wouldn't work with the latest player. (v6.x).
Disclaimer: I am employed by Brightcove
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.
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.
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?