For many of the videos on Youtube, if one hovers over the seekbar, a small image will pop up reflecting the frame at about that place in the video.
Is there some way to create this if using an HTML video element?
The thumbnails are actually typically contained in a separate media stream or 'track' that is created on the server side and delivered as part of the streamed video.
The client downloads this stream and when a user seeks, it displays the thumbnail image that is closest to the time the user is seeking to.
You can see a good example of how the player handles this with the dash.js reference player:
https://reference.dashif.org/dash.js/latest/samples/thumbnails/thumbnails.html
Generating the thumbnails on the fly on the browser would require the video to be delivered, decoded and a frame displayed at the point the user was seeking to which is typically too much to do in the time available to be practical for streamed videos.
Related
I have some code that used CreateJS /EaselJS to create a MovieClip that contains a Tween that contains an mp4 video. In MovieClip there is a method called 'gotoAndPlay' that you can use to change the timeline position of the playhead to a certain frame number. When using this method to change the play position of the video the tweens work but not the Tween that contains the mp4 movie...this object does not load is result in a blank video tag on the page except for the first play through of the clip. Once the mp4 video has been played it didn't play again if the position was set to it through gotoAndPlay...any ideas on how to fix this or if something wrong might be happening?
In ActionScript animations, FLV movies can be locked to the timeline. But in HTML Canvas animations, MP4 movies are not really fully-fledged "Animate" objects. They look the same for the most part but the integration is not as tight as in Flash.
Since the videos exist outside of the Canvas, you'll need to use jQuery or JavaScript to address them. This can be done by using the Code Snippets in the HTML5 Canvas - Components - Video folder.
As an advance warning, "seeking" to different locations in an MP4 video the way you described is not as reliable as it was in Flash. Browsers like Internet Explorer don't handle seeking well and will likely crash. If frame -by-frame accuracy is important, you may find the best visual results by avoiding the video component and converting your movie to an actual MovieClip in Animate CC, which will increase your file size significantly.
http://9gag.com/gif used to show the animations as gifs, now they are html5 videos. What is the reasoning behind such a decision?
The reason is simply that video compresses better than gif in many cases, particular when the gif is of some size or length.
Additionally, video can be streamed affecting traffic and when the displaying can start (almost right away), gifs has to be loaded completely before they can be shown (ore they will be shown slowly and progressive).
Now that most browsers are able to show video natively, video becomes a viable and desired option to animated gifs.
i have here a rendered .mov video file with the raw codec and 10 frames per second. The video shows a camera that rotates around a house. If I open this file with the Quicktime Player I can move around the house by dragging the mouse over the video. It's like an interactive video.
Now I want to embed this function in my website with javascript. The problem is that I want to use HTML5 videos, so I have to convert the .mov file into .avi or .mp4.
My Problem is now, if I do that the video laggs when I drag with the mouse over it. Even if I just play it it laggs. How can I convert this video so that I have the same quality as in the original?
Thanks in advance,
conansc
You could try using a GOP length of 1 (also known as using all I-frames). This makes it easier to play backwards. But you might need to just turn it into a series of still images, like JPEGs, and swap them to the screen as needed. Video formats are meant to be played forwards, at normal speed.
I have a problem regarding a video that is not displayed correctly in the video.js player:
http://www.ulrichbangert.de/kakteen/zeitraffer_vjs.php?Idx=10
As you can see from the page source the dimensions of the player are set to 640x480. The video has the same dimensions which I verified by loading it into my local player and displaying the properties. But: At the left and the right of the video there is a gap of some pixels. The poster is displayed correctly without these gaps. This results in an ugly skip when the player switches from the video to the poster. The poster image is the last frame of the video.
Other videos like this one
http://www.ulrichbangert.de/orchid/zeitraffer.php?Idx=1
are playing fine without a skip but I can't find any difference between these and the faulty one.
My browser is Firefox 23.0.1 thus the ogv video is used.
Can anybody help?
Best regards - Ulrich
i have a list of entries from a database and I'm feeding them in to HTML to a UIWebView that is making a list of the database entries on the page.
(Much Easyer/Better then extending UITableView Cells)
My Problem is with UITableView i was able to grab an image on a server as NSData and with UIImageJpegRepresentation set the quality for the image a bit lower to be better on the iPhone's cellular downloads.
Now i can go and grab an image from the server as NSData Compress the image then convert it to base 64string and spit it into the WebView but is there any other way to do this?
TLDR: How can i decrease the size of images seen in a HTML Page?
I fixed this by feeding the page i was going to visit to a web service. The web service then returns a set of images compressed at lower quality.
Because the only pages the app is going to visit were my own with user avatars and stuff i was able to profile what images would be needed.
On the iPhone i rebuilt the webpage with the set of those smaller images in a UIWebView.
So in the end i downloaded less cellular data and problem is solved.