Display (and play) just a section of a video? - javascript

I am using Video.js with a WebVTT file for chapters and subtitles; that is working fine. For another feature in the app I am developing, in place of using chapters, I am wondering if there is a way I can display and play just a section of a video? For example, "Cue F" in the test file screenshot shown below is 16 seconds long – is there a way I can show the video as just having 16 seconds duration instead of having to show it in the context of the entire video duration? (This would mean the Control Bar reflected the 16 second length, etc)
Said another way, I want to be able to show "clips" of a video to the user without them being able to jump around by clicking the 'seek' bar, etc.
I've been through the Video.js docs and all the listed plugins but haven't seen a way to do this. I am comfortable writing the code – but I'm not sure where to start – Video.js doesn't seem to support Media Fragments (or at least threw errors when I tried it)

Related

How to add a powerpoint presentation in web

I have this task to make an iframe of a presentation appear on an click. then you can control that presentation, like the page you want or go forward and backward.
The problem is I can't use the cloud solutions, because the data should be on premises.
I've thought about converting it to a video, it would be easier to control it and also to keep the animations.
I've also thought about converting it to a pdf file and then show the slides, like slideshare does in this Example.
Is there anyway I can use the ppt directly or even convert it to another format that would be optimal and user friendly, if so, how? is there any APIs or Javascript libraries? what would you recommend?
So i've found a solution of this, i want to share it with you.
If you need to present a ppt-like presentation on web without using the cloud solutions.
The first one is used to keep animation of the presentation:
I converted the ppt to a video , and then used Video.js library that enables you full control over the video.
I've desactivated the control of the video and made my own controls with Html and css. GoForward , Backwards or pause or play or restart the presentation.
i was able to pick and to know the slide i'm on and how much time in every slide by dividing the full time of the video by the number of slides i have in it. (if we suppose they have equal time).
The Second one is used for better quality but no animation: by converting the PPT to PDF.

Automatic Thumbnails/Screenshots for Chapter in HTML Video

I found some examples, where people used a canvas and javascript to take multiple screenshots of a running video.
You can see these examples here or here.
The code sets a time interval, draws the current timeframe to a canvas and uses this to create a screenshot.
I am wondering if it would be possible to use a similar technique, to automatically create a kind of preview for chapters of the video.
But this would require to grab a bunch of screenshots before the video started.
I failed to implement this, so I would like to know, if it is at all possible.
I know that one could use pretaken screenshots for the chapters, but I wanted to automate this process.
Thanks in advance for your answers.
This could be done in theory by jumping to specific times in the video (say every 10 seconds) using video.currentTime, waiting for the frame to be available (using progress events), drawing the frame to a canvas (canvas.drawImage) and storing it in some way (say an array of images having image.src = canvas.toDataURL).
However, this process will take time because at least the relevant parts of the video would need to be loaded in the browser so the frame could be grabbed. The video would not be playable during the process as it is being skipped to different frames.
This behavior is usually not acceptable, but it really depends on your specific use case.

get a picture of the frame of a video at every second [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Youtube has this cool feature where you can 'scrub' through the video and they give you the thumbnail view of the video at each second:
Does anybody know how this is achieved? Does the server have to send over each image individually, or can they be extracted from the video on the clients machine with javascript?
Regarding the implementation of the "extraction", I am a bit lost, but I imagine a canvas element could be used to draw the frames once their extracted.
If the server has to be used: since the images are small, I imagine I could use sprites, but if we're talking about every second of video, then that file could get pretty big. (still small in comparison to the video data I suppose, but not exactly optimal)
tl;dr server generated sprite sheets, downloaded as needed.
We can guess going in that the images are generated server side. YouTube does much more intense processing on every video than pulling a few thumbnails. Also, a quick Google suggests this feature has been around for a few years - probably longer than the required HTML5/JS/browser-horsepower to do this client-side.
I hit up Download Tools > Resources in my browser and checked out a newly-posted video from my feed. Interestingly, there were no previews yet (the video was only up for about 20 min when I checked). This indicates the images are probably generated server-side and just haven't finished processing.
Checking an older video and looking at Resources > Images didn't reveal anything interesting. So I switched to Timelines and hit record, then started mousing over the timeline and watching for network traffic. As I moved the mouse, *.jpg files started loading, and they contained 25 thumbnails from a given section of video:
I also noticed that the initial file M0.jpg is the same size image, but contains about 100 thumbnails from across the entire video, rather than 25 thumbnails from one segment. Example:
Testing again with a new video, it looks like the 100-image M0.jpg gets downloaded first and provides the basic lower-res less-granular thumbnail previews. Then, as you mouseover different sections of video, the higher-res M0.jpg, M1.jpg, etc. get downloaded as needed.
Interestingly, this doesn't change for longer videos, which explains why the thumbnails can sometimes suck. If your connection or YouTube is too slow at getting the higher-res thumbnails, then you get stuck with only 100 low-res thumbnails of a really long video. Not sure how this works on shorter videos. Also, it might be interesting to see what distribution they pull the thumbnails from (is it just linear every 1/100th of the video? or something else).
Last tidbit, is I noticed if you use a url with a timecode in it, you don't get a full 100-image M0.jpg sheet but rather a completely different size M#.jpg containing about 25 low-res thumbnails from the timecode to the end of the video.
I guess they're assuming that when people link to a specific timecode, users aren't likely to jump to an earlier point in the video. Also, this is way less granularity than the ~75 images you would've gotten by sending the normal 100-image M0.jpg. On the other hand, it's also about 30% of the size, so maybe speed was that important.
As for generating the thumbnails, ffmpeg is a good way to go:
To make multiple screenshots and place them into a single image file (creating tiles), you can use FFmpeg's tile video filter, like this:
ffmpeg -ss 00:00:10 -i movie.avi -frames 1 -vf "select=not(mod(n\,1000)),scale=320:240,tile=2x3" out.png
That will seek 10 seconds into the movie, select every 1000th frame, scale it to 320x240 pixels and create 2x3 tiles in the output image out.png, which will look like this:
In HLS this is done with #EXT-X-I-FRAMES-ONLY playlists (HLS v4) and is called Trick Play. Hopefully that helps with your research.
https://developer.apple.com/library/ios/technotes/tn2288/_index.html#//apple_ref/doc/uid/DTS40012238-CH1-I_FRAME_PLAYLIST

Convert YouTube/Vimeo video into silent, animated images (think "moving pictures" from Harry Potter)?

How could you programmatically convert a YouTube/Vimeo video into a series of animated images that each reflect 5 seconds of the video? Essentially, the goal is to deconstruct the video into silent, 5-second animated pictures -- think "moving pictures" from Harry Potter.
One option is to slice the video into 5-second video chunks, but the output should feel like animated GIFs ... that is, play instantly, be lighter than combining 150 pictures into one JavaScript slideshow (assuming 30 FPS), but have the image quality of a JPG or PNG. If this is possible with video, then it's an option we're open to exploring.
Another option is to take screen shots of the video, but that is not programmatic.
Ideas?
The output needs to get rendered in HTML5 on Mobile Safari.
You've a bit of a problem here — quality is directly related to file size. So if you create a video of 30fps (higher than regular broadcast TV, really?), you're going to run into issues with it being light & fast loading.
I don't know if I'd go down the route of making actual GIFs if you're looking for a high-ish framerate, but if it's for a web project, HTML5 video tag should be able to have autoplaying video that integrates into the page fairly seemlessly.
What you would want to do here is take a programme like Handbrake, put the video at the highest possible compression settings (lowest quality/framerate) & slowly bring it up until you have something that you think is the minimum you can get away with.
From there, you can look into scripting the process using these settings & something like FFmpeg. You'll probably also want to remove video metadata to save as much filespace as possible.

Dreamweaver CS4 - .flv player preloader

Is it possible to show how many % of the video is loaded?
I just need a simple string like: 32% loaded...
(I use non-streaming (progressive loading))
The FLV player that is built in, you can pretty much only do what you see, so displaying the % loaded, if not already displayed in the skin itself, is either not supported, or not documented. You can make your own skin http://www.adobe.com/devnet/flash/articles/flvplayback_programming.html or use one of the many other available options http://www.google.com/search?q=flv+player, or try the Widget Browser version (which should be CS4 compatible) of the HTML5 Video Player Widget, and that player is based on the following http://www.kaltura.org/project/HTML5_Video_Player it is theme-able. I've not seen a way to show the percentage yet, but perhaps their docs show how to do it.
There is another reference for talking back and forth between Flash and JavaScript, http://kb2.adobe.com/cps/156/tn_15683.html, but you'd need to know what to call, and again, the built in player doesn't appear to be documented well, at least from external interaction, or modifications of the skins themselves.
I know this is not dreamweaver player and it doesn't show %, but this is what I use in my projects http://www.longtailvideo.com/players/
It is a pretty cool player.

Categories