In Chrome it's possible since quite some time to record a film strip of loading a web page via the network tab:
https://developer.chrome.com/blog/film-strips-in-network-panel/
In Safari 15.5 for osX (Big Sur) however this option seems to be missing? Is it possible to record the loading of a page for performance improvement purposes?
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.
What technical requirements or methods do I need to implement to make my app appear in the URL browser under "app Store" suggestions in safari? This is what happens if I am typing in "slack" straight into the url bar of safari. It also appears if I haven't installed slack at all --> that's what I would like to implement as well.
Is that a auto suggestion-tool by safari which we can not influence at all?
Any hints to make that happen? Here's an image of Slack on Safari:
Thanks a lot!
These suggestions are known as Safari or Siri Suggestions, and appear to be controlled solely by Apple/Safari itself.
One source on Quora says,
“Siri Suggested Websites” are search results that come directly from Apple’s own search engine, based on websites they’ve crawled and indexed. It’s not based on your search history (or even anything you’ve done with Siri).
I wonder if your app would show up as a Suggestion if it was unique or popular enough in Apple's search indices...
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.
strong textI am new to Sencha and I am evaluating it.
Every time I try to open a browser and visit the API page at docs.sencha.com/whatever ... it takes forever to load up.
I mean, what the hell is it doing at the back end? Is it taking that long to load up all the necessary extjs app files? Or is it loading me the whole API library while I am only try to see one page?
So far, I have gone through a couple of examples, and I like Sencha a lot . However, I have a concern about the loading speed in production, because the speed they load up the API scares me.
If you are experienced with Sencha, could you tell me what is going on at the back? Please don't say "API is 20MB big, takes time to load ...", because I only want to see one page per visit, i believe it is wrong to load me the whole API to initialize a page.
UPDATE ------------------------------------
I face this loading screen for 20-30 seconds everytime when I open the browser. IE only. Chrome and FF are fast??
UPDATE 2 ----------------------------------
I did a profiling for IE. Btween http://projects.sencha.com/auth/session?... and /architect/2guides/intro/README.js?... IE went to sleep for over 20 seconds blank doing nothing (as u can see from the highlighted blank gap in between the 2 rows in the picture), then suddenly came back and finish loading the rest of the page!
I copied those links 1 by 1 and load them up in a new IE window. They all individually came up in milliseconds, so there is no speed issue. It is just that, IE went to sleep for 20+ seconds (CPU monitor shows no activity) StranGe!
Since you're starting up, you should definitely start building your application using sencha cmd. This allows you to build a version of the extjs file that uses only the components that you use.
But as a side note. I use the full sencha api and it takes me less than 2 sec to load the whole API. I use the production version ext-all.js and ext-all.css and gzip everything. After the zipping, I get a file size of less than 500KB, which is like nothing actually.
EDIT:
I checked the API docs page. The total download size is less than 1 MB and that too cause there are a lot of icons which aren't combined as sprites. Hence the browser takes a lot of time in requesting the icons. That's why the page is slow.
For IE, well sencha can't do much about it. The browser itself is slow. Any webpage you load will suffer from the same problem. Not just sencha's. The page speed will improve if you do some optimizations. The size of the API isn't the problem.
Safari recently went to version 6 (Lion/Mtn Lion) and they've changed over from the standard webkit dev tools to one that's much more XCode looking, my problem other than the OCD of not liking things change is that in the resource tab (or anywhere you can track down the DataService.aspx/AJAX calls) I can no longer see the form data that I am passing.
Can anyone point me to where I can find that data so I don't have to console out my params when I'm testing new data service/backend calls?
I've logged a bug with Apple, they've marked it as a duplicate so hopefully they've received enough requests to fix this, until then I'm continuing to use chrome as the webkit developer is the same as safari's old version.
You can find this info in Instrument tab (stop-watch icon). In the left sidebar thers Timelines row, click the grey circle (record button) on the right. Then click to Network Requests where you see all reqs, and you have to click small icon on the right oc request to display response headers and all form data are available in right panel. Panel can be hidden same as left one (in case you dnt see it).
Unfortunately there are no query pamaters listed, according to this disscussion. I belive its a bug in safari
Edit 15.May 2013: This bug was fixed in Safari 6.0.3.
As far as I can tell, there's no way to show the request parameters.
This goes even further. I can't see the JSON response data either (no clickable arrows to show the containing Javascript objects within the JSON, just pure text)
I think we have to switch to Firefox /w Firebug or regular Webkit in order to get XHR monitoring...
Guys if you want to see post data in safari 6 which is not possible right now, install the firebug lite extension and there you go you have the post data.
I used it and it works great with safari 6
Actually the request headers, response headers and query parameters are in the details sidebar on the right when using the resources view or if you click to see the content of a request in the Timelines/Network Requests view. Took me a few minutes to find that too.
If you need to see what the device is actually sending and your server is on a Windows Machine I use http://www.Wireshark.org and check on the server side of things. No interpretation by any WebKit stuff and very valuable (such as issue with iOS and the 'Blob' data). Similar network snooping should exist on Mac as well.