I load 5 <video autoplay> elements on my page. On some older computers, this can take a lot of CPU.
At what point does a video element fetch its source video, and decode it? Is it only when the video begins to play?
I'm not seeing any data in the "Network" tab in Chrome dev tools, so I'm not sure how to tell when the data is being fetched.
If autoplay is specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data and it has nothing to to with when data is fetched.
You should use preload attribute to specify and leave out unbiguity.
This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user
experience. It may have one of the following values:
- none: indicates that the video should not be preloaded.
- metadata: indicates that only video metadata (e.g. length) is fetched.
- auto: indicates that the whole video file could be downloaded, even if the user is not expected to use it. the empty string: synonym of the auto value.
Note: If not set, its default value is browser-defined (i.e. each browser may have its default value). The spec advises it to be set to metadata.
Note: Some versions of Chrome only acknowledge autostart, rather than autoplay
Related
I have two live videos feeding an encoder which creates H.264 chunk files and an HLS manifest which is being served by an apache web server.
A browser page using video.js shows a player. Pressing "play" on the browser properly plays the video. It works well.
However, if we change video sources (by flipping the switch in the picture below), there is a considerable delay (10 seconds) before the new content is displayed in the player. I'd like to get that to 3 seconds.
It appears that video.js and/or the HTML5 player in browser is buffering that amount of content. (if you delete the files on the web server, kill apache, or even pull the ethernet cable, the video keeps on playing!)
A button on the web page controls the switch. When clicked, I would also like to clear or reset the player so that it immediately re-reads the index.m3u8 manifest and downloads the new chunks.
So far, haven't found anything promising searching the internet or in the video.js API docs. There are lots of articles on API calls for fetching the current buffer percentage but cannot find any API for clearing it altogether.
Any ideas?
The encoder is set for 3 second chunks and the playlist depth is set for 10 entries.
I had a similar problem. Since i could not find a reliable API for this, i came up with a rather dirty workaround to clear the buffer:
var ctime = player.currentTime();
player.currentTime(0);
player.currentTime(ctime);
This currently works for me in all major browsers.
I am using the upload image widget without success.
1) result.info.path returns invalid url.
2) There is no preview of the uploaded images due to no.1
3) No images are were uploaded to my media folder at Cloudinary.
Fiddle:
https://jsfiddle.net/7uqb83t1/
These are my preset settings:
Can someone share a working version of this widget + preset settings?
On successful upload, you need to check result.info.secure_url for a link to the asset. Currently, in your preset, you're using Async which means the incoming transformation is performed in the background (asynchronously), and as such, you will get a pending result. Async assumes you're using a Notification URL as a webhook where you'll receive the Upload API response when the processing is complete. In your case, I'd recommend turning the Async off.
Also, your incoming transformation configured in the preset is not valid and because of that, you will be getting an error on upload. Please console.log this in your JSFiddle to see it. Essentially, it'll be -
Auto gravity can only be used with crop, fill, lfill, fill_pad or
thumb
'auto' gravity (g_auto) implies cropping (automatically selecting the most interesting part of the image to focus on) and therefore you need to use an appropriate crop mode. 'scale' keeps all image data and no cropping is made so that is why g_auto can't work with it. Please see the following section of the documentation for details on the different crop modes - https://cloudinary.com/documentation/image_transformation_reference#crop_parameter - which will help you decide which one you want to use.
Lastly, you should also consider updating your incoming transformation so that it only resizes once, since currently, resizing it three times with the same crop mode is redundant. For example, you can use c_scale,q_auto,w_687 only, or if you want with 'auto' gravity you can try c_fill,g_auto,q_auto,w_687.
I'm currently rendering a list of HTML5 video elements.
I have multiple video files on a single page, i do not want to download a lot of data until the user clicks play.
I would like to grab frame 1 and show it as the poster. I dont have access to an alternative posters for each video.
I'm looking at the preload attribute with a value of 'metadata' for the video element here:
http://www.w3schools.com/tags/att_video_preload.asp
This looks to have limited browser support.
Using preload='metadata' works in firefox and chrome and show frame 1 as a poster.
Using preload='metadata' disables preloading in safari, but disabled the poster.
I have been unable to test in IE.
How do i show the HTML5 video elements frame 1 as a poster, in safari, without preloading a large chunk of data.
<video controls preload='metadata'>
<source src="{{video.url | trusted}}" type="video/mp4">
Your browser does not support the video tag.
</video>
Version v42 and above now seem to respect this. Yay!
(current beta version as of yesterday - so not yet available)
You can see now a 206 partial content request, and 66kb downloaded (my video is 600kb+)
However: VERY IMPORTANT
In case you didn't know, Chrome can only have 6 simultaneous connections at the same time to the same server.
Currently in v42 + v43 they have a terrible bug which means that once the metadata is loaded that file is not released back into the 'pool' for available connections. So if you load 6 or more videos the 7th blocks and won't download.
I've reported this as a bug https://code.google.com/p/chromium/issues/detail?id=468930
This may not be the case for all videos, but I have 10 short MP4 videos encoded with Adobe Media Encoder and they get stuck.
If in doubt, or experiencing this problem you've got no choice but to set preload='auto' for now. Hopefully this bug will never make it into the wild.
So I have a youtube page open where I can watch a video.
But this video was taken down by the user. My open page still has the video, if you go to it again (refresh) the new page does not.
Since I have the video loaded in my browser tab (chrome), how can I go about finding the actual file and saving it?
In the old days of YouTube, it may have been possible to find the single video file on your harddrive and save it, but this is no longer the case. As explained in this Computerphile video, all YouTube videos are now split into tiny pieces and downloaded piece by piece.
You can observe this for yourself if you open up Chrome (or Firefox's) Dev Tools and watch the nnetwork tab. You'll see:
all of the pieces of the video loading bit by bit.
One additional thing you'll learn from the Network tab is that the videos are downloaded as octet streams, so you won't be able to find the links to the pieces hidden in the DOM.
One thing you migth try is, in the Network tab, clear the results and then move the cursor to the beginning of the video. You should see the streams come up again. Right click on the path name and then do a "save as", and save it as 0000.mp4 (or whatever), for all the pieces. You should be able to reassemble these pieces in any video editing software. I tested this by getting two pieces from a random YouTube video.
I couldn't find anything that doesn't require a restart (and hence reload) of Chrome.
One (kludgy) hack if possible, though, would be to run a screen video capture and play the video.
I have done this long back using IE6, i.e. fetch the file from the temporary files location and rename it to the extension flv.
The following links should point you in the right direction, but can't say it will work for sure, as I believe recent chrome versions seem to have a defensive cache implementation.
Ubuntu Forum solutions
You might need to tweak the above for your use.
Run a screen recording/capture program such as:
Screenr
CamStudio
Then edit out the youtube bar if its visible.
The buffered video is cached at the following location:
C:\Users\<user name>\AppData\Local\Temp\flaxxxx.tmp
Note you have to change to whatever user you are using, and xxxx is a random number. Also, the .tmp file might be hidden, so make sure your windows explorer is displaying the hidden files.
While the tab is open, you won't be able to copy the file, but if you close it, the file will be automatically deleted. For doing so, download HoboCopy, extract it and after that, run cmd as administrator. Change the directory on the console to the directory where you have extracted HoboCopy and type the following command:
hobocopy C:\users\<user name>\Appdata\Local\Temp C:\videos fla1234.tmp
<user name> - replace with your windows username
C:\videos - the directory where you want the video to be copied to
fla1234.tmp - the name of the file to be copied.
Wait for the copy to be done and then you can rename the destination file, changing '.tmp' to '.flv'. This file can be played with any FLV supporting media player.
i find this software to get the video from temp files folder and play it http://www.nirsoft.net/utils/video_cache_view.html
Video file is cached, therefore suggested ways can help you to save the file. But if you deal with same problems I offer using IDM(Internet Download Manager). After installation of this application for every online video stream (e.g. all flv files in youtube) IDM brings a small picture that you can click on it and downloading will be started automatically without need of any configuration.
You have to install a browser extension to download YouTube videos. You won't find a simple URL for an mp4 file in the HTML source. Try googling "youtube downloader" + your browser name.
As far as I recall, YouTube videos are not served as a continuous HTTP resource, but instead divided into small chunks and assembled client-side by the Flash player. This is why you can jump into the middle of a video, without having to buffer the first half of the video.
Generally speaking, YouTube don't want you to rip their content, so they aren't exactly making it easy for downloaders.
Is it possible to capture a snapshot of a video that's loaded using the HTML5 video element and use that as a preview image until the video loads or the play event is triggered? I know about the poster attribute but I want the thumbnail to be self generated, like a random frame from the video. Sort of what YouTube/Vimeo does.
Thanks,
I don't think that this is possible in pure HTML5. Principally because the stream is not loaded when you see the 'object' in the webpage so the client can't get the desired frame.
However, the best option for you is to save / cache the 'random frame' before loading the page and then use it as the poster of the video. This will allow you to reduce the client work and save the bandwith.
check THIS, which is the first thing that I've found (if you're using PHP and you want a 'quick and dirty' way to get the frame)
Update
Apparently HERE there is a solution with popcorn.js BUT it seems that you can't do it in the way that (I suppose) you need.
This because it would be possible to do this only inside the same domain due to browser security issues.