Recherche avancée

Sur d’autres sites (5721)

• How to use Behavioural Analytics to Improve Website Performance

  20 septembre 2021, par Ben Erskine — Analytics Tips, Plugins, Heatmap
  

  User behavioural analytics (UBA) give your business unique insights into your customers. 

  Where traditional website metrics track what actions are completed or how many visitors you have, user behaviour shows the driving factors behind those actions. UBA tools such as website heatmap software provide an easy-to-read visualisation of this data. 

  Ultimately, user behaviour analysis improves website performance and conversions by boosting customer engagement, optimising positive customer experiences, and focusing on the most important part of your sales : the people who are actually buying from you. 

  What is user behaviour analytics ?

  User behaviour analytics (UBA) is data that shows how customers and website visitors interact with your brand online. 

  UBA is tracked using tools such as heatmaps, session recordings and data visualisation software. 

  Where traditional web analytics track metrics such as page views and bounce rates, behavioural analytics provide an even more in-depth picture of your website or funnel success. 

  For example, UBA tracks actions like 

  • How far users are scrolling down the page 
  • Which CTA’s and copy they are focusing on (or not focusing on) 
  • Which design elements, links or buttons they are interacting with 
  • What is happening in between each action

  Tracking user behaviour metrics help keep visitors on your website longer because they analyse where customers may be confused or unclear so you can fix it. 

  What’s the difference between data and behavioural analytics ?

  There are a few key differences between data and behavioural analytics. While data analytics are beneficial to improving website performance, using UBA creates a more customer-centric approach to funnel building. 

  The biggest difference between data and behavioural analytics ? Metric data shows which actions are happening. Behavioural analytics show you WHY they are happening. 

  For example, data can show you that a customer bounced or clicked away. Behaviour analytics show you that a page took a long time to load, they tried to click a link several times and then maybe got frustrated and clicked away. 

  Key differences between data analytics and behavioural analytics : 

  • What is happening versus what is driving it 
  • Track an action (e.g. click-through) versus tracking inaction (e.g. hover without clicking) 
  • Measuring completion of an action versus the flow of actions to complete action 
  • Source of traffic versus individual actions 
  • What happens when someone takes an action versus what happens in between taking action 

  Matomo heatmaps offer both website analytics and user behaviour for a comprehensive analysis.

  Why do behavioural analytics help improve website performance ?

  User behaviour is important because it doesn’t matter how many website visitors you have if they don’t convert. 

  If you have a lot of traffic on mobile devices, but a low CTR, heatmaps show you what is causing the low conversions. Perhaps there is a button that isn’t optimised for mobile scrolling, or a pop up that covers important copy. 

  Analysing the driving factors behind each decision means that you can increase sign-ups and conversions without losing money on website traffic that never actually buys. 

  

  How do heatmap tools show website user behaviour analytics ? 

  Heatmap tools provide a visual representation of user behaviour. 

  There are several key ways that heatmap tracking can improve website performance and therefore your overall conversions.

  Firstly, heatmaps show where to optimise website structure. It uses real visitor experiences to indicate whether customers have to scroll to reach important content, whether important messages are being missed, and whether CTAs are clear. 

  Secondly, heatmaps provide always-on UX and useability testing for your website, identifying user frustrations and optimising their experience over time.

  They also show valuable user experience insights for A/B versions of a landing page. Not only will you see the raw conversion data, but you will also understand why one page converts more than another.

  Ultimately, heatmaps increase ROI on marketing by optimising the traffic that you are sending to your website.

  

  5 ways heatmaps and user behaviour analytics improve website performance and conversions

  #1. Improve customer experience

  One of the most important uses for UBA is to improve your customer experience. 

  Imagine you had a physical store. If there was something blocking customers from getting to the counter you could easily see and fix the problem. 

  It is just as important for an online store to find and fix these “roadblocks”. 

  Not only does it reduce friction in the sales funnel and make it easy for customers to buy from you, it improves their overall experience. And when 86% of buyers are willing to pay more for a great customer experience, UBA should be one of your number one priorities for growing your bottom line. 

  #2. Improve customer engagement

  Customer engagement is any interaction between a customer/product user and your business. 

  User behaviour analytics increase engagement at each customer journey touch point. 

  Using data from heatmaps will improve customer engagement because it gives you insights into how you can make your website more user friendly. This reduces friction and increases customer loyalty by making sure customers :

  • See important content 
  • Are not distracted by unnecessary elements 
  • Can easily access information or pages no matter what device they are using 
  • Are clicking on important page elements that take them further through the customer journey 

  For example, say a customer is on a sales page. A heatmap might show that pop ups or design elements like links to another page are pulling their attention away from the primary focus (i.e. the sales copy). 

  #3. Focus on customer-centric approach 

  A customer-centric approach means putting your customers at the centre of everything that you do. There is a lot of competition for your customers’ hard earned dollars, so you need to stand out. A good product or service is not enough on its own anymore. 

  User behaviour analytics are at the heart of customer-centric strategies. Instead of guessing how customers interact with your online presence, tools like heatmaps give insight into exactly what customers need. 

  This matched with an effective customer feedback strategy gives a holistic and effective approach to improving your customer experiences. 
  

  #4. Capture customer data across multiple channels

  Most customers won’t convert on their very first visit to a website. They might interact with your business across many channels and research your product multiple times before purchasing. 

  Multi Channel Conversion Attribution, also known as Cross Channel Attribution, lets you assign a value to each visit prior to a conversion or prior to a sale. By applying different attribution models, you get a better view on which channels actually lead to a conversion.

  User behaviour analytics like the multi channel conversion attribution that Matomo offers can show you exactly where you should focus your money to acquire new customers. 

  #5. Track and measure business objectives

  User behaviour analytics like heatmaps can show you whether you are actually hitting your targets. 

  Setting goals helps track your website performance against business objectives. 

  These include objectives such as lead generation, online sales and increased brand exposure. Matomo has a specific function for tracking goals and measuring analytics.

  Using a combination of UBA and data metrics will produce the most effective conversions. 

  For example, a customer reaching the payment confirmation page is a common objective to measure conversions. However, it is only tracked if they actually complete the action. Measuring on-page customer activity with heatmaps shows why they do or do not convert so you can fix issues. 

  Final thoughts on user behaviour analytics 

  User behavioural analytics (UBA) provide a unique and in-depth insight into your customers and their needs. Unlike traditional data metrics that track completed actions, UBA like heatmaps show you what happens in between each action and help fix any critical issues. 

  Heatmaps are your secret weapon to improving website performance while staying customer-centric ! 

  Want to know how heatmap analytics increase conversions and improve customer experience without spending more on traffic or marketing ? Check out some of the other in depth guides below. 

  The Ultimate Guide to Heatmap Software

  10 Proven Ways Heatmap Software Improves Website Conversions

  Heatmap Video

  Session Recording Video

• The Ultimate Guide to HeatMap Software

  20 septembre 2021, par Ben Erskine — Analytics Tips, Plugins, Heatmaps

  One of the most effective ways to improve the user experience on your website is to use heatmap software. As well as in-depth insight on how to improve your website and funnels, user behaviour analytics complement traditional web metrics with insights from your customers’ point of view. 

  Heatmap software shows actual user behaviour. That means that you have a visual representation of why a customer might not be converting instead of guessing. 

  By tracking clicks, mouse movement, and page scrolling as well as analysing above the fold content engagement and overall session recordings, heatmap software helps improve user experience and therefore customer retention and conversions.  

  

  What is heatmap software ?

  Heatmap software is a data visualisation tool that uses colour to show what actions a user is taking on a website. 

  If there is a design element on a page that many users engage with, it will show as red/hot. For elements that are less engaging, it will show on the analysis as blue/cold. 

   

  Heatmap software like Matomo helps businesses to improve user experience and increase conversions by tracking elements such as :

  • Flow through sales funnels 
  • Individual session recordings for user experience 
  • A/B page comparisons 
  • Form analytics for sign ups and conversions 
  • Media interaction such as instruction or sales videos
  • Clicks on important links and information 

  Using data visualisation software like a heatmap provides more in-depth data when combined with standard website metrics. 

  What is heatmap software used for ?

  Heatmap software tracks website user behaviour to improve website performance and increase conversions. 

  Heatmaps can show you a detailed analysis of : 

  • Where visitors are clicking (or not clicking) 
  • Where visitors are hovering with their mouse
  • How far users are scrolling or stopping 
  • Where the focus is above the fold 
  • What roadblocks or frictions customers are facing in the sales funnel

  Analysing activity on your website and across channels from your customers point of view is critical in developing a customer-centric business model. 

  This is because heatmaps not only show you what customers are doing but why they are doing it. 

  Heatmap software is ideal for businesses updating and redesigning websites. It also helps to answer important growth questions such as “how can we improve our user experience ?” and “why is our sales funnel not converting better ?”. 

  The benefits of using data visualisation like heatmaps for your website

  Heatmaps are critical for improving websites because they drastically improve customer experience. 

  Customer experience is one of the most important factors in modern business success. A Walker study found that customer experience is one of the biggest differentiators between brands, overtaking other factors such as price. 

  Where straightforward website metrics show customers left a page without action, data visualisation and session recordings show what happens in between them arriving and leaving. This gives web developers and marketers invaluable insights to improve website design and ultimately increase conversions. 

  How heatmap software improves your website and conversions

  There are a few key ways that heatmap software boosts website performance and conversions. All of them focus on both creating a seamless buyer journey and using data to improve results over time. 

  How heatmap software improves conversions ; 

  • By improving UX and usability– 70% of online businesses fail due to bad usability. Heatmaps identify user frustrations and optimise accordingly 
  • By improving content structure – Heatmaps take the guesswork out of design layout and content structure by showing real visitor experiences on your website 
  • By comparing A/B landing pages – Using heatmaps on alternate landing pages can show you why conversions are working or not working based on user activity on the page
  • By optimising across devices – See how your visitors are interacting with your content to learn how well optimised your website is for various devices and remove roadblocks 

  Heatmap analytics you need to improve website user experience

  Click heatmap

  Click heatmaps are useful for two key reasons.

  Firstly, it shows where website users are clicking. 

  Heatmaps that show clicks give you a visual representation of whether copy and CTA links are clear from the customers’ point of view. It can also show whether a customer is clicking on a design feature that doesn’t link anywhere. 

  Secondly, it shows where website users are not clicking. This is just as important when developing funnels and improving user experiences.

  For example, you may have a CTA button for a free trial or purchase. A click heatmap analysis would show if this isn’t clicked on mobile devices and informs developers that it needs to be more mobile-friendly.

  

  Mouse move or hover heatmap

  Like a click heatmap, a mouse hover heatmap shows how you can improve the overall user experience.

  For example, hover heatmaps identify where your visitors engage on a particular webpage. Ideally, of course, you want them to engage with CTAs. Analysing their mouse movements or where they are hovering for more information gives you an indication of any page elements that are distracting them or not working.

  

  Scroll heatmap

  A scroll heatmap uses colours to visualise how far down in a page your visitors scroll. For most web pages, the top will have the most impressions and will naturally get less views (i.e. get “colder” on the heatmap) further down the page. 

  This lets you find out if there is important content positioned too far down the page or if the page is designed to encourage users to keep scrolling.

  No matter how good your product or service is, it won’t convert if potential customers aren’t engaged and scrolling far enough to see it.

  

  Above the fold analysis 

  Above the fold is the content that a visitor sees without scrolling. 

  In a heatmap, the “Average Above the Fold” line will show you how much content your visitors see on average when they open your page. It also shows whether the page design is engaging, whether it encourages visitors to keep scrolling, and whether important information is too far down the page and therefore being missed. 

  Above the fold analysis is arguably the most important as this is the section that the highest number of traffic will see. Using this information ensures that the right content for conversion is seen by the highest number of visitors. 

  

  Session recording

  Session Recording lets you record a real visitor session, so you can see clicks, mouse movements, scrolls, window resizes, page changes, and form interactions all in one. 

  They allow you to understand the experience from the point of view of your visitor and then optimise your website to maximise your success.

  Heatmap software like Matomo takes this one step further and allows you to gather session recordings for individual segments. By analysing sessions based on segments, you can further personalise and optimise based on customer history and patterns.

  

  Final thoughts on heatmap software 

  Heatmap software improves your user experience by easily spotting critical issues that you can then address. 

  As well as that, heatmap analytics like clicks, mouse movement, scroll, above the fold analysis and session recordings increase your marketing ROI by making the most of your existing traffic. 

  It’s a win-win ! 

  Now that you know what heatmap software is, the benefits of using heatmaps on your website and how it can improve your user experience, check out this user guide on heatmap analytics. 

• How to combine multiple video blobs in js without gap ?

  5 septembre 2021, par Pouria Moosavi

  I have an array of urls. I download them with fetch and then get blob from each response with await res.blob(). I need to concat all these blobs together to make a full video out of it, I tried to push each blob into an array and make a file new File(blobArray, "test") but the result has a gap between each blob.

  


  I've tried to save each blob as a separate file and concat them with ffmpeg -f concat -safe 0 -i text -c copy out3.mp4 and the result was perfect. So I know that my blobs are correct and the problem is how I am combining them together.

  


  This is my full code :

  


  (async function() {
  var urlString = `
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18160.ts?Expires=1630841672&Signature=C-DrIcvmIGkm0s42EQRPWh6Y-aEWvnl2xu1LOIWyzgQqOe-~6E9rLtpR5Kdfz8lNdNXVFz2XyrsgSX1Dn8AUbxUM6umqxALPn57sdSUoVf5-JQce472EHX-roQTsy3SAM~IIXH3B6FHcpdce~1vdqTze~nQY2F3wbzCPyspJSEPU74~-TySj8PhHrFtYNFIsFVr4R-Pc4FF-EWy2zXzo0Av59-4VlOXqFYhmQwcm~kimWNXJpOYhghv6pVbFYzyp7x9tYLiX1~9hbTG3otmoBAJGRt7EUlZiBZhprAgMzhrPS2TezenBKXNf0qJEp-fnC5so0OykRt-TGhyRapbJoA__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18161.ts?Expires=1630841672&Signature=bBVrS4brV209hRADZgPnYQICBcXWe6Ed6zwBOFdozjIR1tiuahx3YmPhM8uaxLNRqowALgylen1wQBmdK5bGm~73DQUcUUfGXQU8kIv45CW1DyHDzX-ECR3MDpzSzIYDI8ELbFXK8gmT7ELgtmdkSrL0XO0FXCVAzLrzSw6-0XAZgzBY7tZUncRum5Wb7EhYQgluO2uCquz6HZqaVA9IYoCeFWKFXvU3xE-RBqHXksWkZO01o3UNEEgnzYrRepurcdYY029~6MsHEyj5304pDlefXKrEj8mbZidvhaUKkiIjcoG15jznWPvN3WAewK3zXpLlCYhBMuDL0kOVIq5zjA__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18162.ts?Expires=1630841672&Signature=a3lUizMPzmtntrapM9qLk0f~GrfnQAFNlEJEzrvFowGMZVMukqPVfloM7Z9J33ZThK7mKfRy7tiYH1KDzCT5hpRl0X-pcCvcmAmy4u8h1upKO0RJmaP1v7PVzqACPTyvDHNDy3Fh-pxhpO1ubKR2SR7gq1n1K6tX8sbogNHmo0jPnERRxtLKF618nAuGBPQVYofkNG0zvcomGRX7iN95ovn8Ql9IxmqsGLGI2HzlJq3v8L4iS6UYUpV4yhAtZxmbERACq82JcwdiMMlLlnn~SoenYttzDrTdSh-u321KqjAoD6lij6l~j-dReVWY4HTDlsCnGaw9w-eOIuEywi8DpA__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18163.ts?Expires=1630841672&Signature=Q6eYIsoPFVKYjY0vVDcnMKKI3oV14xnfDLpvJdH7Z9GoNqojPRXOyITTmd6Ed1JCxmF9oAkfvdghH0Ks1-fSYL3tvu5kMuJe2sWbeKCimqHQ89JvhJ3hOfVvUBIv-QVdbGYXD9FOr8T5s~HYC5KkDrFqRorDidH04y67P175sBXMtYIwt04KzG7m17X8kbJkjsjuVhD0sZ0ewACz1OBPnxO9qLdvGsRqVtW1FmuKSnDULieqdsQGfuH1YkkVCr7H4t0B5SF77vvxYkvcr4uGRjKMPVdggg3BYQKCWHn~pEEP2~P6oJZdfwbu9wnKJnIvimXVleHYW-hPk0OWBD5JAg__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18164.ts?Expires=1630841672&Signature=HItA9pW3RiIhf9pFFGm4Y8FmikCPXBfh8gxJVNSLsJ9cuDONLX3n26ZjYO2NaROwsID9YjxwlDuS9jqqe62A7vLPsAjVmL6WvCZ8a22tAihPBPM-qOSWoHS7E~3bSurc9CzkQwlOBvg01~Mjl-E2kvP-hn0FxhTPk1FAE8BrL6DIeGKsBqIdvVgHsJyTi9osDNPG~OtKRKRskAK37QcXidkiLjFMcbX6uqwmcVHEpP30fDj13wBMwx2suuJ27~ICmSH44CHCuRcKujISKbrVjbnsUw4ivA7a72hyybSTDhwZBzjj753FFy0LqSVWVFOJJY1HXEnZ4mpvax9N1lth2Q__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18165.ts?Expires=1630841672&Signature=L4T1BtTtHVM7p2JqvXEXLcJDUNdm8IZ8LU-oPkKxYBwuZHXEdxOLTTrFSX-3N39c7JMWDljWNi2bLrjbjK2xa1yMB5eTjvZTjusJDPk91RW0cMB4qsTpuXR1ui~ybPe5ABoV6N4cUXj~bUQFfUURo66kH5UdC~SIKMzQx59mnATvKZfZwOizm2kEuc8qaXPi9yJmYdPGhr6qSN1~kl0NEWciOU3o-etMtFc29yrlGl~Fgj0bvCyAwLwtR4yQwKFHCJWZPiMfJky9GJB4LKcyKBFu7bkDjk2BzOveJklvIPF~tZKkd3ki~I5kfYhTL-~hEDT4i9hIfHJEF1JF1rf~bw__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18166.ts?Expires=1630841672&Signature=Kzf38iYJwebZG2nzkrPSVEvqWxSc959XcvUqiMhZC1lFwZefNTMw1a5EHcUfObujy~3XQ3Yxm-Ls8CziLLvO3Vi8wEg05GB1COnFT1hxasQHID1tmMaXrKrRBZp2XZApehhOpSroJdx46Zb8qlM4JMu3lf30eBIHsbPOIsdmW1o2E9USZUMUKiG-T3feO1kjT3scDsoKcaX2cQrqE8c1oAuEy57eASgFKQcy0OGtrxDujPHLNWYmRv~CFZxHf8LCuMKBrL9OtXE7py0g9x4d4BvwzQ5XOoQ5d5JsfnT8EeH5Lqbh8crtauJb5BrUk6j9uV1MWviZi7WQzGcds6eItg__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18167.ts?Expires=1630841672&Signature=Vc5mVh~J-WEG2eHhiXnsNFBI~kpCtTnwwgiihaP6Fvm1IeA7eJ0QzA5g2Tq1VADLI-B2Bl1Ss~CmSyyXQEiM~IxRVjiNs1~PpnIKm0gFD0iBgIZOS3GoS6bx4bkRiy1tEMn98~~1VGqZ4FxJxc59QOdjmwvAvUvGN01zojOHt0i61XDqjeLz~wFUR9MVh~QYskV4w5sR~THYpKqiMej6JAIVz3avhadVlE1p0P9Gel7LLo59WjFx3Da1huQzBNQ2B8l3-pQpepwbiI0vsrN09aZHLnVtu1NPeEbpG5lZMIhYLay5qQTg1d87ouDoZ8zWYl0buPu5ZL06DiBFIDDhrA__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18168.ts?Expires=1630841672&Signature=QsdnxTFnRVml4yq~cbIMRDdESRoX6KH2AkCCm5J-MqW3QEr9RQU5Y7v41nKxIo~IgwI9FMoTRSk61whNyrLePlw2GXq38iK6UhlmpMkJYF3Tvj84GDckbpdqrIQLlZRJPngjx9n2eE3R8Sb7igXwIrr5dymYjEh2Hb0jkYs0~9Zfzr-pJAGoEdUr36hkGP2UXP4n~atb1cDW1hDbd8YJeUNYfKfTSPwq5~E9Te9P674pL2D~WutSM-Gk9xXMhVX7Z0VJWKQh5JWzSkrzDTc9rjTnotWJ7~kU1HqapqD2eVr3DOwI2b19Yv7FGWD3wrxtLA9A8AhkEbpaHLcuYyIS9w__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e18169.ts?Expires=1630841672&Signature=e-uHBmY7DMqAkrpRbtfyiRlglUU9wwLY5d2Oar44~xgQerrV~5dAa7q~Nf3V2WNyi22Bg88f4bvjYMIPMjghT4aZol7JXv1Q7VH~1xjydJfaIEXunOZzqswi4PbljlXui7W0c2c59hj~6c96bc6Iyr79x3bvylA1nnxJo2Y6a1Zus0irS7u-45BjXym27NtXrhOwpcVc2GNXhI74yqjXA-vFr1XVuHBHMQVMLTryYlStwoAUXnn7K~U88skq0ursQqpDFCmlDkgoXED~rdm7THJht9wOhkFbf2T79xsENBhPoiS56DLT7qIemBFGDUxHVeoTgZdMLXE2SVsgp-LBmQ__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e181610.ts?Expires=1630841672&Signature=KFxUkMZhteXsl3mSobA5Xg5~PQIztGtmgd~E1g2peja~oHMPNUWE6ihhcOEkO1M6CKXDycegq9~8xv6GqWSrRz5xntTYXNWyRT2-C0W2E79E0Fd1QLndb1~UP1uq~6z-8FbxXLIhHgCzSgaVtPxt8vFqQ1TI-Zd0j0ramKvfWu4iZiZTxEWn5d5Iaaf-LqTdgXWUKqWsr6F0czH7FZh6sI4NVmUAOOD1-sez5ALVr8GBruihB23W5E2yOWtk31KTC-M7TVf1AjwQTJurm~rWka4~~c2lCJ~~o-n~N5p38KdaReZWk2yCqHRYt7pdwpyqIAhosvsVs8Kf5AT2mQV-tQ__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e181611.ts?Expires=1630841672&Signature=AZuneobcwantsOflRrRO4DJzmW0JzqOcDDrB8YKIh~YbL5AuhlZV2OyN6fgUJ0~EVAqRk4h2RpUmZiD4ov8muNu3U-SHp1ksHia3d8cct7Ns485ta87Lb6GqX9yvF3qTNCTT3f5FSQeoKPmGXWPpbzUsdC7TGxNVy8M5IcdqHeoJDrOUeYOqnyQtNDrhWzFsp14YL4RqWBoiz0llpN6w-8QfaeWzCYkT~KxM0UKlPFDzeijXcNJS-tjCxUrT9CnYZ3IfMDvufDCfztd20x37rK1xSln~fuF4PLsMdrfpayY1lSPMgmLP9-~k7SiYth4qSU4CsdgY~1HTZJpUHg2AXQ__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
https://hls-c.udemycdn.com/2020-06-25_14-12-40-d54947f66bb66a48d9c119adf45739ad/1/hls/AVC_1920x1080_800k_AAC-HE_64k/aa0003ab30f349f2a87b8a745d2b648e181612.ts?Expires=1630841672&Signature=Dcl1pJwVlfyN-Lqlq8RruR4t4c3l6Y~hSXPdZyLcspdg16gH-Jk78buQCD2LEniYF6xgXRVRgdLQj26lxiHJi2LiHXHV8~jKQVVrU2lnga9p48M35KdJZheJ~N6f91hsTpHEhYBBSR0TYhRcTMrh1WXstOMW5kHA01nVzq3mOpnHlDFpcHNuTslTAAouqeMXsdY6H4ta15puQcVnvqchOr-7c5dU4ZG14FtHF2WvjnMEWARWDvivOvoqQAqwPQgHm5SxJFw~qyZmIeRUG-TT9i-RXIAzSivg6vKiP2A-AomTOwGW3oFRXKLdMXSMlcd6lmQ7~b7jTi7uNX4Bhup-jQ__&Key-Pair-Id=APKAITJV77WS5ZT7262A,
`

  const urlArr = urlString.split(",")
  let blobArr = [];
  for(let url of urlArr) {
    if(url) {
      try{
        const res = await fetch(url);
        const blob = await res.blob();
        blobArr.push(blob)
      } catch (err) {
        console.log(err)
      }
    }
  }

  const newBlob = new Blob(blobArr)
  const finalFile = new File([newBlob], "test-udemy");
  const a = document.createElement("a")
  const url = URL.createObjectURL(finalFile);
  a.href = url;
  a.download = "test-udemy";
  document.body.appendChild(a);
  a.click();
  setTimeout(function() {
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);  
  }, 0); 
})()


  


  Unfortunately links will expire soon but I think it is obvious what I am trying to do.

  


  So Is there any way to cancat blobs in JS and create the entire video smoothly like the ffmpeg does ?

  


  Thanks in advance.