I want to create an online GIF library. I don't have any code yet because I'm only asking if what I want to do is actually possible to achieve:
Only load and play the GIFs that are in the browser's view;
Pause GIFs that are no longer in the browser's view (after scrolling down)
Is this doable?
Please check this figure: 1
It is possible to load only GIFs in viewpoint and load new as you scroll.
It is possible to hide GIFs that are no longer in viewpoint.
You can't really pause images of GIF format. You would have to use some video format like WEBM or MP4, for pausing. For example, Facebook is using video to achieve "pausing gif" effect.
Related
A while ago I stumbled across an example of an HTML5 video player with support video in video. In an example use case, the following was demonstrated: a powerpoint presentation video, with an explainer video to accompany it. Unfortunately I can't remember which video player it was.
To illustrate; something like this
The beauty of the player is that it's able to serve multiple sources of video in one view and toggle between different view points (like split screen and switched view).
Like I have illustrated here:
Split screen video
Switched video view
Could anyone help me find out which HTML5 video player it may have been, or maybe how this could be achieved in something like VideoJS?
It looks from your requirements that these are completely separate videos.
If this is the case then one simple approach is to just have two video players.
You can then use your web page layout to place them wherever you need them to start up, and add some simple Javascript scripts, linked to buttons on the page for example, to change the layout to however you want it for that particular button (e.g. one button might be for split screen).
I would like to know how can I add an image in html when you load a vimeo video ?
Any informartion, links related or codes are welcome.
Thank you!!!
I guess you are talking about how to add a poster-like utility for Viemo videos, as done trough the poster HTML attribute when placing HTML5 videos.
Well, there's no such an option, as far as I know. When Vimeo is not active (as it has not been played yet) the video's thumbnail image is displayed, and when Vimeo's video is loading, it shows it's own loading animation.
Anyway, you can select your custom image when uploading your video on Vimeo, so, at least, by this way you can define what will be showing by default your custom player.
I have video that will be divided into 4 videos.
First the player will stream a lower resolution of the original video, then the user can zoom into the video to see more details, I need the player to stream one of the 4 videos - that's higher in resolution- based on where the user zoomed in.
How can I make that using VideoJS or any other video player ?
After searching, this is the answer ...
For zooming into the video, you can follow this tutorial: Zooming and rotating for video in HTML5 and CSS3
For switch streaming of videos in the same player, you can make that by changing the source on html5 video tag and make some calculations to know where the user zoomed in and hence change the source video.
As there is no response yet let me analyse the problem. This is by no means meant as a full answer, but other people will probably be able to answer parts of the problem:
First the player will stream a lower resolution of the original video,
This means you will need to create/use a video stream. There are plenty of plugins you can use for videostreaming, and depends on what you want. You can consider writing it yourself using for example C#'s System.IO objects and transforming the video in bytes(And putting it back together) The resolution would be easiest reached by just having a seperate video file for this step of the proces. (a lower resolution one used for streaming only)
then the user can zoom into the video to see more details, I need the player to stream one of the 4 videos - that's higher in resolution- based on where the user zoomed in.
So you need to trigger a zoom effect. This means you would need to detect zoom. This would be possible with Javascript in a webbrowser, if you want a browser based application. When that zoom is triggered you can retrieve what position the mouse is on the screen/in the div or on some sort of overlay. Depending on this position you could show another stream.
How can I make that using VideoJS or any other video player ?
Basically these steps above is how i would start looking into this specific case. Considering your VideoJS as a suggestion i assume this is browser based. This would probably mean using Javascript libraries, maybe combined with a server side language.
Thats as far as i can go. Maybe someone can pick up specific parts of the thing i wrote and help you a step further.
Have a nice day!
I need some advice on how to play video on a website. What I would like is to have a clip link on the page, and upon being clicked, a video player expands to the middle of the screen and plays the video (and has the standard video player controls). It also has "X" to close the video. I would suppose there is a widget or tool for this but I can't seem to find it.
Also what video resolution and format would be best (most compatible with browsers)? The video would just be a local file on the server.
Try look here:
http://rainbow.arch.scriptmania.com/scripts/music/video.html
http://www.w3schools.com/html/html_videos.asp
http://www.sothinkmedia.com/guide/makebutton.htm
Hope this helps.
I want to create a html5 page with video and an image overlay - meaning some image that is showing over the video. This overlay will in time also be text in some cases. Is there any good way to achieve this?
What I've been trying this far is to use a <video> tag to hold the video, and draw the image into a canvas, which I place on top of the video. To show it I need to move the video back setting z-index to -1, but then the video controls won't work. Maybe there's a solution to make the controls work again, but I'm not sure if I'm on the right path here.. I am assuming there is a recommended solution to this. Maybe using a canvas which I fill both video and overlay into. Or something completely different?
Note: I edited the question as it originally pointed in the wrong direction regarding what was important here. I'd love to have a solution which makes this work seamlessly in fullscreen and everything, but the focus is: What is the appropriate way to place items on top of video - in html5?
Achieving what you want and have it supported in out-of-the-box fullscreen is problematic. Fullscreen support in html5 video is only optional and in any way not accesible thorugh the API (See discussion here).
Even if you used the built in fullscreen there is no way you could inject content above it unless you are willing to change the video file itself on the server in runtime.
what you can do however (And what I did in a similar case) is to implement your own video controls, run the video tag without the built in controls, and have fun with overlaying as many layers as you want on top of your now out of focus video.
As for fullscreen, you can implement some sort of custom background fullscreen similar to what's been done here
edit: The problem you're having by placing a canvas over the video is blocking the built in html video controls. My suggestion is to implement your own video controls (play, pause, volume, seeker, etc.) using html and javascript calling the video API. You can probably even make it prettier then the ugly built in controls.
Your controls can be contained in a layer above the overlaid canvas, and thus the video will be shown, above it the overlay and above it your control set.
You can read a little about implementing your own controls here or here
And anyway this can easily be much better than this.