Recherche avancée

Sur d’autres sites (13845)

• Top Conversion Metrics to Track in 2024

  22 janvier 2024, par Erin

  2023 boasts  2.64 billion online shoppers worldwide ; that’s more than a third of the global population. With these numbers on an upward trajectory in 2024, conversion metrics are more important than ever to help marketers optimise the online shopping experience. 

  In this article, we’ll provide predictions for the most important conversion metrics you should keep track of in 2024. We’ll also examine how social media can make or break your brand engagement strategy. Keep reading to stay ahead of the competition for 2024 and gain tips and tricks for improving conversion performance.

  What are conversion metrics ?

  In technical terms, conversion metrics are the quantifiable measurements used to track the success of specific outcomes on a website or marketing campaign. Conversion metrics demonstrate how well your website prompts visitors to take desirable actions, like signing up for a newsletter, making a purchase, or filling out a form, for instance.

  Let’s say you’re running a lemonade stand, and you want to compare the number of cups sold to the number of people who approached your stand (your conversion rate). This ratio of cups sold to the total number of people can help you reassess your sales approach. If the ratio is low, you might reconsider your approach ; if it’s high, you can analyse what makes your technique successful and double down.

  

  In 2023, we saw the average conversion rate for online shopping grow by 5.53% compared to the previous year. An increase in conversion rate typically indicates a higher percentage of website visitors converting to buyers. It can also be a good sign for marketing teams that marketing campaigns are more effective, and website experiences are more user-friendly than the previous year. 

  Conversion metrics are a marketers’ bread and butter. Whether it’s through measuring the efficacy of campaigns, honing in on the most effective marketing channels or understanding customer behaviour — don’t underestimate the power of conversion metrics. 

  Conversion rate vs. conversion value 

  Before we dive into the top conversion metrics to track in 2024, let’s clear up any confusion about the difference between conversion rate and conversion value. Conversion rate is a metric that measures the ratio of website visitors/users who complete a conversion action to the total number of website visitors/users. Conversion rates are communicated as percentages.

  A conversion action can mean many different things depending on your product or service. Some examples of conversion actions that website visitors can take include : 

  • Making a purchase
  • Filling out a form
  • Subscribing to a newsletter
  • Any other predefined goal

  Conversion rate is arguably one of the most valuable conversion metrics if you want to pinpoint areas for improvement in your marketing strategy and user experience (UX).

  A good conversion rate completely depends on the type of conversion being measured. Shopify has reported that the average e-commerce conversion rate will be 2.5%-3% in 2023, so if you fall anywhere in this range, you’re in good shape. Below is a visual aid for how you can calculate conversion rate depending on which conversion actions you decide to track :

  

  Conversion value is also a quantifiable metric, but there’s a key difference : conversion value assigns a numerical value to each conversion based on the monetary value of the completed conversion action. Conversion value is not calculated with a formula but is assigned based on revenue generated from the conversion. Conversion value is important for calculating marketing efforts’ return on investment (ROI) and is often used to allocate marketing budgets better. 

  Both conversion rate and conversion value are vital metrics in digital marketing. When used in tandem, they can provide a holistic perspective on your marketing efforts’ financial impact and success. 

  9 important conversion metrics to track in 2024

  Based on research and results from 2023, we have compiled this list of predictions for the most important metrics to track in 2024. 

  

  1. Conversion rate 

  To start things out strong, we’ve got the timeless and indispensable conversion rate. As we discussed in the previous section, conversion rate measures how successfully your website convinces visitors to take important actions, like making purchases or signing up for newsletters. 

  An easy-to-use web analytics solution like Matomo can help in tracking conversion rates. Matomo automatically calculates conversion rates of individual pages, overall website and on a goal-by-goal basis. So you can compare the conversion rate of your newsletter sign up goal vs a form submission goal on your site and see what is underperforming and requires improvement.

  

  In the example above in Matomo, it’s clear that our goal of getting users to comment is not doing well, with only a 0.03% conversion rate. To improve our website’s overall conversion rate, we should focus our efforts on improving the user commenting experience.

  For 2024, we predict that the conversion rate will be just as important to track as in 2023. 

  2. Average visit duration

  This key metric tracks how long users spend on your website. A session typically starts when a user lands on your website and ends when they close the browser or have been inactive for some time ( 30 minutes). Tracking the average visit duration can help you determine how well your content captures users’ attention or how engaged users are when navigating your website. 

  Average Visit Duration = Total Time Spent / Number of Visits

  

  Web analytics tools like Matomo help in monitoring conversion rate metrics like average visit duration. Timestamps are assigned to each interaction within a visit, so that average visit duration can be calculated. Analysing website visit information like average visit duration allows you to evaluate the relevance of your content with your target audience. 

  3. Starter rate

  If your business relies on getting leads through forms, paying attention to Form Analytics is crucial for improving conversion rates. The “starter rate” metric is particularly important—it indicates the number of who people start filling out the form, after seeing it. 

  When you’re working to increase conversion rates and capture more leads, keeping an eye on the starter rate helps you understand where users might encounter issues or lose interest early in the form-filling process. Addressing these issues can simplify the form-filling experience and increase the likelihood of successful lead captures.

  Try Matomo for Free

  Get the web insights you need, without compromising data accuracy.

  Start for free

  No credit card required

  Concrete CMS tripled their leads using Form Analytics in Matomo—see how in their case study.

  4. Bounce rate

  Bounce rate reflects the percentage of visitors who exit your site after interacting with a single page. Bounce rate is an important metric for understanding how relevant your content is to visitors or how optimised your user experience is. A high bounce rate can indicate that visitors are having trouble navigating your website or not finding what they’re looking for. 

  Matomo automatically calculates bounce rate on each page and for your overall website.

  

  Bounce Rate = (# of Single-Page Sessions / Total # of Sessions) * 100

  5. Cost-per-conversion

  This metric quantifies the average cost incurred for each conversion action (i.e., sale, acquired lead, sign-up, etc.). Marketers use cost-per-conversion to assess the cost efficiency of a marketing campaign. You want to aim for a lower cost-per-conversion, meaning your advertising efforts aren’t breaking the bank. A high cost-per-conversion could be acceptable in luxury industries, but it often indicates a low marketing ROI. 

  Cost-per-Conversion = Ad Spend / # of Conversions

  By connecting your Matomo with Google Ads through Advertising Conversion Export feature in Matomo, you can keep tabs on your conversions right within the advertising platform. This feature also works with Microsoft Advertising and Yandex Ads.

  Try Matomo for Free

  Get the web insights you need, without compromising data accuracy.

  Start for free

  No credit card required

  6. Average order value (AOV)

  AOV is a conversion metric that calculates the average monetary value of each order. AOV is crucial for helping e-commerce businesses understand the value of their transactions. A high AOV means buyers spend more per transaction and could be more easily influenced by upselling or cross-selling. Low AOV isn’t necessarily bad — you can compensate for a low AOV by boosting transaction volume. 

  

  AOV = Total Revenue / Total # of Orders 

  Matomo automatically tracks important e-commerce metrics such as AOV, the percentage of visits with abandoned carts and the conversion rate for e-commerce orders.

  7. Exit rate

  Exit rate measures the percentage of visitors who leave a specific webpage after viewing it. Exit rate differs from bounce rate in that it focuses on the last page visitors view before leaving the site. A high exit rate should be examined to identify issues with visitors abandoning the specific page. 

  Exit Rate = (# of Exits from a Page / Total # of Pageviews for that Page) * 100

  

  In the Matomo report above, it’s clear that 77% of visits to the diving page ended after viewing it (exit rate), while 23% continued exploring. 

  On the other hand, our products page shows a lower exit rate at 36%, suggesting that more visitors continue navigating through the site after checking out the products.

  How to improve your conversion performance 

  If you’re curious about improving your conversion performance, this section is designed to guide you through that exact process.

  

  Understand your target audience and their behaviour

  You may need to return to the drawing board if you’re noticing high bounce rates or a lack of brand engagement. In-depth audience analysis can unveil user demographics, preferences and behaviours. This type of user data is crucial for building user personas, segmenting your visitors and targeting marketing campaigns accordingly.

  You can segment your website visitors in a number of web analytics solutions, but for the example below, we’ll look at segmenting in Matomo. 

  

  In this instance, we’ve segmented visitors by mobile users. This helps us see how mobile users are doing with our newsletter signup goal and identify the countries where they convert the most. It also shows how well mobile users are doing with our conversion goal over time.

  It’s clear that our mobile users are converting at a very low rate—just 0.01%. This suggests there’s room for improvement in the mobile experience on our site.

  Optimise website design, landing pages, page loading speed and UX

  A slow page loading speed can result in high exit rates, user dissatisfaction and lost revenue. Advanced web analytics solutions like Matomo, which provides heatmaps and session recordings, can help you find problems in your website design and understand how users interact with it.

  Making a website that focuses on users and has an easy-to-follow layout will make the user experience smooth and enjoyable.

  Try Matomo for Free

  Get the web insights you need, without compromising data accuracy.

  Start for free

  No credit card required

  Create compelling calls-to-action (CTA)

  Research shows that a strategically placed and relevant CTA can significantly increase your revenue. CTAs guide prospects toward conversion and must have a compelling and clear message. 

  You can optimise CTAs by analysing how users interact with them — this helps you tailor them to better resonate with your target audience. 

  A/B testing

  A/B testing can improve your conversion performance by allowing you to experiment with different versions of a web page. By comparing the impact of different web page elements on conversions, you can optimise your website with confidence. 

  Key conversion metrics takeaways

  Whether understanding user behaviour to develop a more intuitive user experience or guessing which marketing channel is the most effective, conversion metrics can be a marketer’s best friend. Conversion metrics help you save time, money and headaches when making your campaigns and website as effective as possible. 

  Make improving conversion rates easier with Matomo, a user-friendly all-in-one solution. Matomo ensures reliable insights by delivering accurate data while prioritising compliance and privacy.

  Get quality insights from your conversion metrics by trying Matomo free for 21 days. No credit card required.

• Top 4 CRO Tools to Boost Your Conversion Rates in 2024

  31 octobre 2023, par Erin

  Are you tired of watching potential customers leave your website without converting ? You’ve spent countless hours creating an engaging website, but those high bounce rates keep haunting you.

  The good news ? The solution lies in the transformative power of Conversion Rate Optimisation (CRO) tools. In this guide, we’ll dive deep into the world of CRO tools. We will equip you with strategies to turn those bounces into conversions.

  Why are conversion rate optimisation tools so crucial ?

  CRO tools can be assets in digital marketing, playing a pivotal role in enhancing online businesses’ performance. CRO tools empower businesses to improve website conversion rates by analysing user behaviour. You can then leverage this user data to optimise web elements.

  Improving website conversion rates is paramount because it increases revenue and customer satisfaction. A study by VentureBeat revealed an average return on investment (ROI) of 223% thanks to CRO tools.

  173 marketers out of the surveyed group reported returns exceeding 1,000%. Both of these data points highlight the impact CRO tools can have.

  

  Coupled with CRO tools, certain testing tools and web analytics tools play a crucial role. They offer insight into user behaviour patterns, enabling businesses to choose effective strategies. By understanding what resonates with users, these tools help inform data-driven decisions. This allows businesses to refine online strategies and enhance the customer experience.

  CRO tools enhance user experiences and ensure business sustainability. Integrating these tools is crucial for staying ahead. CRO and web analytics work together to optimise digital presence. 

  Real-world examples of CRO tools in action

  In this section, we’ll explore real case studies showcasing CRO tools in action. See how businesses enhance conversion rates, user experiences, and online performance. These studies reveal the practical impact of data-driven decisions and user-focused strategies.

  

  Case study : How Matomo’s Form Analytics helped Concrete CMS 3x leads

  Concrete CMS, is a content management system provider that helps users build and manage websites. They used Matomo’s Form Analytics to uncover that users were getting stuck at the address input stage of the onboarding process. Using these insights to make adjustments to their onboarding form, Concrete CMS was able to achieve 3 times the amount of leads in just a few days.

  Read the full Concrete CMS case study.

  Best analytics tools for enhancing conversion rate optimisation in 2023

  Jump to the comparison table to see an overview of each tool.

  1. Matomo

  

  Matomo stands out as an all-encompassing tool that seamlessly combines traditional web analytics features (like pageviews and bounce rates) with advanced behavioural analytics capabilities, providing a full spectrum of insights for effective CRO.

  Key features

  • Heatmaps and Session Recordings :
    These features empower businesses to see their websites through the eyes of their visitors. By visually mapping user engagement and observing individual sessions, businesses can make informed decisions, enhance user experience and ultimately increase conversions. These tools are invaluable assets for businesses aiming to create user-friendly websites.

  • Form Analytics :
    Matomo’s Form Analytics offers comprehensive tracking of user interactions within forms. This includes covering input fields, dropdowns, buttons and submissions. Businesses can create custom conversion funnels and pinpoint form abandonment reasons. 

  • Users Flow :
    Matomo’s Users Flow feature tracks visitor paths, drop-offs and successful routes, helping businesses optimise their websites. This insight informs decisions, enhances user experience, and boosts conversion rates.

  • Surveys plugin :
    The Matomo Surveys plugin allows businesses to gather direct feedback from users. This feature enhances understanding by capturing user opinions, adding another layer to the analytical depth Matomo offers.

  • A/B testing :
    The platform allows you to conduct A/B tests to compare different versions of web pages. This helps determine which performs better in conversions. By conducting experiments and analysing the results within Matomo, businesses can iteratively refine their content and design elements.

  • Funnels :
    Matomo’s Funnels feature empower businesses to visualise, analyse and optimise their conversion paths. By identifying drop-off points, tailoring user experiences and conducting A/B tests within the funnel, businesses can make data-driven decisions that significantly boost conversions and enhance the overall user journey on their websites.

  Pros

  • Starting at $19 per month, Matomo is an affordable CRO solution.
  • Matomo guarantees accurate data, eliminating the need to fill gaps with artificial intelligence (AI) or machine learning. 
  • Matomo’s open-source framework ensures enhanced security, privacy, customisation, community support and long-term reliability. 

  Cons

  • The On-Premise (self-hosted) version is free, with additional charges for advanced features.
  • Managing Matomo On-Premise requires servers and technical know-how.

  Try Matomo for Free

  Get the web insights you need, without compromising data accuracy.

  Start for free

  No credit card required

  2. Google Analytics

  

  Google Analytics provides businesses and website owners valuable insights into their online audience. It tracks website traffic, user interactions and analyses conversion data to enhance the user experience.

  While Google Analytics may not provide the extensive CRO-specific features found in other tools on this list, it can still serve as a valuable resource for basic analysis and optimisation of conversion rates.

  Key features

  • Comprehensive Data Tracking :
    Google Analytics meticulously tracks website traffic, user behaviour and conversion rates. These insights form the foundation for CRO efforts. Businesses can identify patterns, user bottlenecks and high-performing areas.

  • Real-Time Reporting :
    Access to real-time data is invaluable for CRO efforts. Monitor current website activity, user interactions, and campaign performance as they unfold. This immediate feedback empowers businesses to make instant adjustments, optimising web elements and content for maximum conversions.

  • User flow analysis
    Visualise and understand how visitors navigate through your website. It provides insights into the paths users take as they move from one page to another, helping you identify the most common routes and potential drop-off points in the user journey.

  • Event-based tracking :
    GA4’s event-based reporting offers greater flexibility and accuracy in data collection. By tracking various interactions, including video views and checkout processes, businesses can gather more precise insights into user behaviour. 

  • Funnels :
    GA4 offers multistep funnels, path analysis, custom metrics that integrate with audience segments. These user behaviour insights help businesses to tailor their websites, marketing campaigns and user experiences.

  Pros

  • Flexible audience management across products, regions or brands allow businesses to analyse data from multiple source properties. 
  • Google Analytics integrates with other Google services and third-party platforms. This enables a comprehensive view of online activities.
  • Free to use, although enterprises may need to switch to the paid version to accommodate higher data volumes.

  Cons

  • Google Analytics raises privacy concerns, primarily due to its tracking capabilities and the extensive data it collects.
  • Limitations imposed by thresholding can significantly hinder efforts to enhance user experience and boost conversions effectively.
  • Property and sampling limits exist. This creates problems when you’re dealing with extensive datasets or high-traffic websites. 
  • The interface is difficult to navigate and configure, resulting in a steep learning curve.

  3. Contentsquare

  

  Contentsquare is a web analytics and CRO platform. It stands out for its in-depth behavioural analytics. Contentsquare offers detailed data on how users interact with websites and mobile applications.

  Key features

  • Heatmaps and Session Replays :
    Users can visualise website interactions through heatmaps, highlighting popular areas and drop-offs. Session replay features enable the playback of user sessions. These provide in-depth insights into individual user experiences.

  • Conversion Funnel Analysis :
    Contentsquare tracks users through conversion funnels, identifying where users drop off during conversion. This helps in optimising the user journey and increasing conversion rates.

  • Segmentation and Personalisation :
    Businesses can segment their audience based on various criteria. Segments help create personalised experiences, tailoring content and offers to specific user groups.

  • Integration Capabilities :
    Contentsquare integrates with various third-party tools and platforms, enhancing its functionality and allowing businesses to leverage their existing tech stack.

  Pros

  • Comprehensive support and resources.
  • User-friendly interface.
  • Personalisation capabilities.

  Cons

  • High price point.
  • Steep learning curve.

  4. Hotjar

  

  Hotjar is a robust tool designed to unravel user behaviour intricacies. With its array of features including visual heatmaps, session recordings and surveys, it goes beyond just identifying popular areas and drop-offs.

  Hotjar provides direct feedback and offers an intuitive interface, enabling seamless experience optimisation.

  Key features

  • Heatmaps :
    Hotjar provides visual heatmaps that display user interactions on your website. Heatmaps show where users click, scroll, and how far they read. This feature helps identify popular areas and points of abandonment.

  • Session Recordings :
    Hotjar allows you to record user sessions and watch real interactions on your site. This insight is invaluable for understanding user behaviour and identifying usability issues.

  • Surveys and Feedback :
    Hotjar offers on-site surveys and feedback forms that can get triggered based on user behaviour. These tools help collect qualitative data from real users, providing valuable insights.

  • Recruitment Tool :
    Hotjar’s recruitment tool lets you recruit participants from your website for user testing. This feature streamlines the process of finding participants for usability studies.

  • Funnel and Form Analysis :
    Hotjar enables the tracking of user journeys through funnels. It provides insights into where users drop off during the conversion process. It also offers form analysis to optimise form completion rates.

  • User Polls :
    You can create customisable polls to engage with visitors. Gather specific feedback on your website, products, or services.

  Pros

  • Starting at $32 per month, Hotjar is a cost-effective solution for most businesses. 
  • Hotjar provides a user-friendly interface that is easy for the majority of users to pick up quickly.

  Cons

  • Does not provide traditional web analytics and requires combining with another tool, potentially creating a less streamlined and cohesive user experience, which can complicate conversion rate optimization efforts.
  • Hotjar’s limited integrations can hinder its ability to seamlessly work with other essential tools and platforms, potentially further complicating CRO.

  Comparison Table

  Please note : We aim to keep this table accurate and up to date. However, if you see any inaccuracies or outdated information, please email us at marketing@matomo.org

  To make comparing these tools even easier, we’ve put together a table for you to compare features and price points :

  

  Conclusion

  CRO tools and web analytics are essential for online success. Businesses thrive by investing wisely, understanding user behaviour and using targeted strategies. The key : generate traffic and convert it into leads and customers. The right tools and strategies lead to remarkable conversions and online success. Each click, each interaction, becomes an opportunity to create an engaging user journey. This careful orchestration of data and insight separates thriving businesses from the rest.

  Are you ready to embark on a journey toward improved conversions and enhanced user experiences ? Matomo offers analytics solutions meticulously designed to complement your CRO strategy. Take the next step in your CRO journey. Start your 21-day free trial today—no credit card required.

  Try Matomo for Free

  21 day free trial. No credit card required.

  
  

  Your email address
  

  Your website address
  

  Your Analytics subdomain will be .matomo.cloud (change)

  Choose your analytics subdomain
  

  .matomo.cloud

  I accept the terms and conditions and data processing agreement (DPA)

  
  Your information will be used to create an account on our cloud service. For more information please consult our privacy policy.
  
  
  

  Start improving your websites now

  

• Video streaming error : Uncaught (in promise) NotSupportedError : Failed to load because no supported source was found

  18 septembre 2024, par Aizen

  Here is my problem : I have one video src 1080p (on the frontend). On the frontend, I send this video-route to the backend :

  


  const req = async()=>{try{const res = await axios.get('/catalog/item',{params:{SeriesName:seriesName}});return {data:res.data};}catch(err){console.log(err);return false;}}const fetchedData = await req();-On the backend i return seriesName.Now i can make a full path,what the video is,and where it is,code:


  


  const videoUrl = 'C:/Users/arMori/Desktop/RedditClone/reddit/public/videos';console.log('IT VideoURL',videoUrl);


  


  const selectedFile = `${videoUrl}/${fetchedData.data.VideoSource}/${seriesName}-1080p.mp4`
console.log(`ITS'S SELECTED FILE: ${selectedFile}`);


  


  Ok, I have my src 1080p, now is the time to send it to the backend :

  


  const response = await axios.post('/videoFormat', {videoUrl:selectedFile})console.log('Это консоль лог путей: ',response.data);const videoPaths = response.data;


  


  Backend takes it and FFMpqg makes two types of resolution,720p and 480p,save it to the temp storage on backend, and then returns two routes where these videos stores

  


  async videoUpload(videoUrl:string){try{const tempDir = C:/Users/arMori/Desktop/RedditClone/reddit_back/src/video/temp;const inputFile = videoUrl;console.log('VIDEOURL: ',videoUrl);


  


          const outputFiles = [];&#xA;        &#xA;        await this.createDirectories(tempDir);        &#xA;        outputFiles.push(await this.convertVideo(inputFile, &#x27;1280x720&#x27;, &#x27;720p.mp4&#x27;));&#xA;        outputFiles.push(await this.convertVideo(inputFile, &#x27;854x480&#x27;, &#x27;480p.mp4&#x27;));&#xA;        console.log(&#x27;OUTUPT FILES SERVICE: &#x27;,outputFiles);&#xA;        &#xA;        return outputFiles;&#xA;&#xA;    }catch(err){&#xA;        console.error(&#x27;VideoFormatterService Error: &#x27;,err);&#xA;        &#xA;    }&#xA;}&#xA;&#xA;private convertVideo(inputPath:string,resolution:string,outputFileName:string):Promise<string>{&#xA;    const temp = `C:/Users/arMori/Desktop/RedditClone/reddit_back/src/video/temp`;&#xA;    return new Promise(async(resolve,reject)=>{&#xA;        const height = resolution.split(&#x27;x&#x27;)[1];&#xA;        console.log(&#x27;HIEGHT: &#x27;,height);&#xA;        &#xA;        const outputDir = `C:/Users/arMori/Desktop/RedditClone/reddit_back/src/video/temp/${height}p`;&#xA;        const outputPath = join(outputDir, outputFileName);&#xA;        const isExists = await fs.access(outputPath).then(() => true).catch(() => false);&#xA;        if(isExists){ &#xA;            console.log(`File already exists: ${outputPath}`);&#xA;            return resolve(outputPath)&#xA;        };&#xA;        ffmpeg(inputPath)&#xA;        .size(`${resolution}`)&#xA;        .videoCodec(&#x27;libx264&#x27;) // Кодек H.264&#xA;        .audioCodec(&#x27;aac&#x27;) &#xA;        .output(outputPath)&#xA;        .on(&#x27;end&#x27;,()=>resolve(outputPath))&#xA;        .on(&#x27;error&#x27;,(err)=>reject(err))&#xA;        .run()&#xA;            &#xA;    })&#xA;}&#xA;&#xA;private async createDirectories(temp:string){&#xA;    try{&#xA;        const dir720p = `${temp}/720p`;&#xA;        const dir480p = `${temp}/480p`;&#xA;        const dir720pExists = await fs.access(dir720p).then(() => true).catch(() => false);&#xA;        const dir480pExists = await fs.access(dir480p).then(() => true).catch(() => false);&#xA;        if(dir720pExists &amp;&amp; dir480pExists){&#xA;            console.log(&#x27;FILES ALIVE&#x27;);&#xA;            return;&#xA;        }&#xA;        if (!dir720pExists) {&#xA;            await fs.mkdir(dir720p, { recursive: true });&#xA;            console.log(&#x27;Папка 720p создана&#x27;);&#xA;        }&#xA;        &#xA;        if (!dir480pExists) {&#xA;            await fs.mkdir(dir480p, { recursive: true });&#xA;            console.log(&#x27;Папка 480p создана&#x27;);&#xA;        }&#xA;    } catch (err) {&#xA;        console.error(&#x27;Ошибка при создании директорий:&#x27;, err);&#xA;    }&#xA;}&#xA;</string>

  


  Continue frontentd code :

  


  let videoPath;

if (quality === '720p') {
        videoPath = videoPaths[0];
} else if (quality === '480p') {
        videoPath = videoPaths[1];
}

if (!videoPath) {
        console.error('Video path not found!');
        return;
}

// Получаем видео по его пути
console.log('VIDEOPATH LOG: ',videoPath);
    
const videoRes = await axios.get('/videoFormat/getVideo', { 
        params: { path: videoPath } ,
        headers: { Range: 'bytes=0-' },
        responseType: 'blob'
    });
    console.log('Video fetched: ', videoRes);
    const videoBlob = new Blob([videoRes.data], { type: 'video/mp4' });
    const videoURL = URL.createObjectURL(videoBlob);
    return videoURL;
    /* console.log('Видео успешно загружено:', response.data); */
    } catch (error) {
    console.error('Ошибка при загрузке видео:', error);
    }
}


  


  Here I just choose one of the route and make a new GET request (VideoRes), now in the controller in the backend, I'm trying to do a video streaming :

  


  @Public()
    @Get('/getVideo')
    async getVideo(@Query('path') videoPath:string,@Req() req:Request,@Res() res:Response){
        try {
            console.log('PATH ARGUMENT: ',videoPath);
            console.log('VIDEOPATH IN SERVICE: ',videoPath);
        const videoSize = (await fs.stat(videoPath)).size;
        const CHUNK_SIZE = 10 ** 6;
        const range = req.headers['range'] as string | undefined;
        if (!range) {
            return new ForbiddenException('Range не найденно');
        }
        const start = Number(range.replace(/\D/g,""));
        const end = Math.min(start + CHUNK_SIZE,videoSize - 1);

        const contentLength = end - start + 1;
        const videoStream = fsSync.createReadStream(videoPath, { start, end });
        const headers = {
            'Content-Range':`bytes ${start}-${end}/${videoSize}`,
            'Accept-Ranges':'bytes',
            'Content-Length':contentLength,
            'Content-Type':'video/mp4'
        }
        
        res.writeHead(206,headers);

        // Передаем поток в ответ
        videoStream.pipe(res);
        

        // Если возникнет ошибка при стриминге, логируем ошибку
        videoStream.on('error', (error) => {
            console.error('Ошибка при чтении видео:', error);
            res.status(500).send('Ошибка при чтении видео');
        });
        } catch (error) {
            console.error('Ошибка при обработке запросов:', error);
            return res.status(400).json({ message: 'Ошибка при обработке getVideo запросов' });
        }
    }


  


  Send to the frontend

  


  res.writeHead(206,headers);


  


  In the frontend, I make blob url for video src and return it

  


  const videoBlob = new Blob([videoRes.data], { type: 'video/mp4' });const videoURL = URL.createObjectURL(videoBlob);return videoURL;


  


  And assign src to the video :

  


  useVideo(seriesName,quality).then(src => {
                if (src) {
                    console.log('ITS VIDEOLOGISC GOIDA!');
                    if(!playRef.current) return;
                    
                    const oldURL = playRef.current.src;
                    if (oldURL && oldURL.startsWith('blob:')) {
                        URL.revokeObjectURL(oldURL);
                    }
                    playRef.current.pause();
                    playRef.current.src = '';
                    setQuality(quality);
                    console.log('SRC: ',src);
                    
                    playRef.current.src = src;
                    playRef.current.load();
                    console.log('ITS VIDEOURL GOIDA!');
                    togglePlayPause();
                }
            })
            .catch(err => console.error('Failed to fetch video', err));


  


  But the problem is :

  


  


  Vinland-Saga:1 Uncaught (in promise) NotSupportedError : Failed to load because no supported source was found

  


  


  And I don't know why...

  


  I tried everything, but I don't understand why src is incorrect..