I have video that uses different timecode tracks when we export our QT's. Is there a way to make that timecode get displayed? It always is a 00:00:00:00 formatted number.
http://i.stack.imgur.com/3FDgF.png
HTML5 video does not report frame information, so you would have to implement this yourself based on the current time & frame rate of the current video clip. There are a lot of pitfalls here if you are supporting a lot of different frame rates, so you'll have to do your calculations correctly in either a javascript timer or the HTML5 time updated event. If you want, you could then display the timecode over the video by absolutely positioning a div over the video element.
Related
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.
Every time a video changes, the player resizes(according to video dimensions) I dont want that.
I want the player to be able to resize when browser size changes but not when the video changes. How can I achieve this?
I am also using videojs-playlist-ui so I want that the height of the player to be the same size as the playlist.
In other words, for the same window size, I should have the same player size independent of the video. (Video ratio should be preserved)
Add a style tag to the parent div.
<div id="videodiv" style="width:500px">
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.
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 am using HTML5 Canvas for rendering video, but the rendering is taking huge amount of CPU? I am using GtkLauncher (with webkit 1.8.0) for rendering the video on the Canvas.
Can some one please throw some light on this? Is video rendering on Canvas not efficient for embedded systems?
Also I would like to know, whether there is a way in HTML5 video tag to know the video frame rate, before I actually start to render the data on the Canvas. This I would need to know because I would have to set the timer (used for drawing the video frames) at that same frame rate .
Thanks and Regards,
Souvik
Most likely the video rendering is not accelerated and needs to
Decode on software
Resize on software
You did not give system details so this is just a guess. By poking browser internals you can dig out the truth.
Video framerate cannot be known beforehand and in theory can vary within one source. However if you host file yourself you can pre-extract this information using tools like ffmpeg and transfer the number in side-band (e.g. using AJAX / JSON).