I have a page that has multiple instances of HTML5 audio players on it (it has multiple .mp3 links, that I want to be playable).
I want to develop my own custom HTML5 audio player, with my own graphics and stuff, and the main thing that I want is to have bigger controls (play button, music scroll, volume knob etc) ONLY for the [mobile/Android] version of the page.
Is that possible ? To have different control sizes (play, pause etc.) for different screen-resolutions ?
with using the #media Rule you can do exactly what you want
CSS3 #media Rule
and there is another document that helps you found if the page is being viewed by Mobile/Tablet/PC and etc...
Link to Document
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.
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 was wondering whenever it is possible to play 1 single youtube video in two different iframes? I need this for stereo rendering. I can not clone the source iframe into another, because there is a CORS violation regarding the context. Does the youtube player provide any kind of render target functionality? What I need is the following:
Play and download 1 single video
Display the video in two separate iframes positioned randomly on the screen (we are talking about 1 single frame of video being displayed in 2 render targets or textures)
I do not want to start the video twice and have some delays
I do not want to download the video twice to show the same picture 2 times
Does anyone have experience with this?
Kind regards,
Aleš Mohorič
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'm working on my company's website and we're embedding videos on some pages. We use Vimeo's custom thumbnail's feature but final rendition is ugly.
Does anyone know how to set a thumbnail on Vimeo vids without losing the original picture's quality ? I've heard of a javascript trick for example ?
Link on my website: http://radianceconseil.com/creation-sites-web-haute-savoie/
And here is the original picture : http://www.radianceconseil.com/images/sites-vitrine-accueil-Vimeo.jpghttp://www.radianceconseil.com/images/sites-vitrine-accueil-Vimeo.jpg
As you can see, there's a huge loss of quality!
Well the thumbnail is beyond your control (Vimeo is generating the image and they have chosen a low quality (it looks like high level JPEG compression), Vimeo says that they will serve a higher resolution thumbnails based on the embed size. However you can replace it with a locally hosted image called a "poster" if you use the HTML5 video tag or you can add the image and use some JavaScript to replace it with the iframe on click.