{"id":28411,"date":"2022-03-23T22:58:11","date_gmt":"2022-03-23T22:58:11","guid":{"rendered":"http:\/\/Autoplay-video-with-Intersection-Observer-in-Nuxt.js"},"modified":"2025-03-02T05:15:00","modified_gmt":"2025-03-02T13:15:00","slug":"autoplay-video-with-intersection-observer-in-nuxt-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/autoplay-video-with-intersection-observer-in-nuxt-js\/","title":{"rendered":"Autoplay Video with Intersection Observer"},"content":{"rendered":"

A persistent issue facing businesses online is attracting, engaging, and delighting their audience in the few seconds you have their attention. A modest deterioration in user experience may lower conversion rates on websites and platforms, especially for media content such as videos and photos.<\/p>\n

This post will show us how to improve the user experience of video content on our website utilizing the autoplay video functionality and the Intersection Observer web API in Nuxt.js.<\/p>\n

Sandbox<\/h2>\n

This project was completed in a Codesandbox<\/a>. To get started quickly, fork the Codesandbox<\/a> to run the project.<\/p>\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

GitHub Repository<\/h2>\n

https:\/\/github.com\/Olanetsoft\/Autoplay-video-with-Intersection-Observer-in-Nuxt.js<\/a><\/p>\n

Prerequisite<\/h1>\n

The knowledge of JavaScript and Vue.js is needed to follow along in this tutorial. The knowledge of Nuxt.js is not required, but preferred.<\/p>\n

Getting Started with Nuxtjs<\/h1>\n

Nuxt.js<\/a> is the bedrock of our Vue.js project, providing structure and flexibility while allowing us to scale with confidence.<\/p>\n

It is extensible, with a robust module ecosystem and hooks engine that makes it simple to integrate your REST or GraphQL endpoints, favorite CMS, CSS frameworks, and other third-party applications.<\/p>\n

Project Setup and Installation<\/h1>\n

To create a new project, we will use the command below to scaffold a new project:<\/p>\n

    npx create-nuxt-app <project-name<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
A series of prompts will appear as a result of the command. Here are the defaults we recommend:<\/p>\n
\"Next<\/p>\n
Next, we need to navigate into the project directory and start the development server using the command below<\/p>\n
    cd <project<\/span> name<\/span>><\/span> && yarn dev\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Nuxt.js will start a hot-reloading development environment accessible by default at http:\/\/localhost:3000<\/code><\/p>\n
Cloudinary Video Player Installation<\/h1>\n
We will use the Cloudinary Video Player<\/a> to detect and respond to a video player\u2019s state changes.<\/p>\n
Cloudinary video player<\/a> is a JavaScript-based HTML5 video player that comes with a slew of useful customization and integration features, as well as monetization and analytics support.<\/p>\n
The video player artifacts (JS and CSS) will be added to our nuxt.config.js<\/code> in the link<\/code> and script<\/code> section of the file using the following snippet:<\/p>\n
    \/\/ nuxt.config.js<\/span>\n    \n    export<\/span>  default<\/span>  {\n      head<\/span>:  {\n          ...\n      link: [\n          ...\n      {\n        rel<\/span>:  'stylesheet'<\/span>, \n        href<\/span>:  'https:\/\/unpkg.com\/cloudinary-video-player@1.5.9\/dist\/cld-video-player.min.css'<\/span>  \n      }\n            ],\n      script<\/span>:  [\n      { \n      src<\/span>:  'https:\/\/unpkg.com\/cloudinary-core@latest\/cloudinary-core-shrinkwrap.min.js'<\/span> \n      },\n      { \n      src<\/span>:  'https:\/\/unpkg.com\/cloudinary-video-player@1.5.9\/dist\/cld-video-player.min.js'<\/span>\n      },\n              ],\n      },\n    };\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We need to save our Cloudinary cloud name so that we can refer to it from any file. It will be saved as an environment variable in a global .env<\/code> file at the project\u2019s root in the following step.<\/p>\n
Create a .env<\/code> file in the project\u2019s root directory with the command touch .env<\/code> and update it with the following snippet:<\/p>\n
    NUXT_ENV_CLOUDINARY_CLOUD_NAME=<cloudinary-cloud-name<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
We can now create our video player by updating pages\/index.vue<\/code> with the following code snippet:<\/p>\n
    <template<\/span>><\/span>\n      <div<\/span> class<\/span>=\"container\"<\/span>><\/span>\n        <h2<\/span>\n          class<\/span>=\"flex justify-center items-center h-screen space-x-5 px-18 font-bold text-4xl\"<\/span>\n        ><\/span>\n          Autoplay video with Intersection Observer in Nuxt.js\n        <\/h2<\/span>><\/span>\n    \n        <div<\/span> class<\/span>=\"flex justify-center items-center h-screen space-x-10\"<\/span>><\/span>\n          <div<\/span> class<\/span>=\"rounded overflow-hidden shadow-lg mb-4 content-center\"<\/span>><\/span>\n            <div<\/span> class<\/span>=\"px-6 py-4 pb-2\"<\/span>><\/span>\n              <div<\/span> class<\/span>=\"pb-4 pt-8\"<\/span>><\/span><\/div<\/span>><\/span>\n    \n              <video<\/span>\n                id<\/span>=\"video-player\"<\/span>\n                controls<\/span>\n                width<\/span>=\"800px\"<\/span>\n                class<\/span>=\"width-full\"<\/span>\n                ref<\/span>=\"theVideo\"<\/span>\n                muted<\/span>\n              ><\/span><\/video<\/span>><\/span>\n            <\/div<\/span>><\/span>\n          <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span>\n      <\/div<\/span>><\/span>\n    <\/template<\/span>><\/span>\n    \n    <script<\/span>><\/span>\n    export<\/span> default<\/span> {\n     data() {\n        return<\/span> {\n          cld<\/span>: null<\/span>,\n          player<\/span>: null<\/span>,\n          video<\/span>: \"\/samples\/animals\/dancing-cat\"<\/span>,\n        };\n      },\n    \n      mounted() {\n        this<\/span>.cld = cloudinary.Cloudinary.new({\n          cloud_name<\/span>: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,\n          secure<\/span>: true<\/span>,\n        });\n    \n        this<\/span>.player = this<\/span>.cld.videoPlayer(\"video-player\"<\/span>, {\n          analytics<\/span>: {\n            events<\/span>: [\"play\"<\/span>, \"pause\"<\/span>],\n          },\n        });\n    \n        this<\/span>.player.source(this<\/span>.video);\n    \n        this<\/span>.onElementObserved();\n      },\n      name<\/span>: \"IndexPage\"<\/span>,\n    };\n    <\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
We created a Cloudinary instance, utilized it to initialize the video player, and set up the video source in our mounted lifecycle hook in the code snippet above.<\/p>\n
We should have something similar to this below.<\/p>\n
\"Nuxtjs\"<\/p>\n
On scrolling down, we should see the rendered video looking like this.<\/p>\n
\"Nuxtjs\"<\/p>\n
In this section, we will use the intersection observer API to detect the changes of our video tag\u2019s position relative to the viewport of our website.<\/p>\n
Next, We will update the pages\/index.vue<\/code> with the code snippet below:<\/p>\n
    export default<\/span> {\n      data() {\n        \/\/...<\/span>\n      },\n    \n      mounted() {\n         \/\/...<\/span>\n    \n        this.onElementObserved();\n      },\n    \n      methods: {\n        onElementObserved() {\n          const<\/span> observer = new<\/span> IntersectionObserver((entries) => {\n            entries.forEach<\/span>((entry) => {\n              if<\/span> (entry.intersectionRatio > 0<\/span>) {\n                this.player.play();\n              } else<\/span> {\n                this.player.pause();\n              }\n            });\n          });\n          observer.observe(this.$refs.theVideo);\n        },\n      },\n    \n      name: \"IndexPage\"<\/span>,\n    };\n    <\/script>\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
In the code snippet above:<\/p>\n
The Intersection Observer API<\/a> allows you to asynchronously monitor changes in a target element\u2019s intersection with a parent element or a top-level document\u2019s viewport.<\/p>\n
You can get your cloud name from your Cloudinary dashboard<\/a> by signing up for a Cloudinary account.<\/p>\n