{"id":28447,"date":"2021-05-18T22:03:02","date_gmt":"2021-05-18T22:03:02","guid":{"rendered":"http:\/\/Creating-a-Custom-Video-Player-in-Vue"},"modified":"2025-11-01T14:01:57","modified_gmt":"2025-11-01T21:01:57","slug":"creating-a-custom-video-player-in-vue","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/","title":{"rendered":"Creating a Custom Video Player in Vue.js"},"content":{"rendered":"

In this Media Jam you will learn how to create a video player with custom controls and event handling in Vue.js. This Jam does not use any pre-build video libraries, you will learn to code directly against the native video API<\/a> in the browser.<\/p>\n

Vue.js has great features to make components communicate together. In this Jam, you will learn how to use scoped slots, and how to pass information between different components.<\/p>\n

The video player is split up into multiple files:<\/p>\n

    \n
  1. \n

    Videoplayer.vue<\/code> contains the basics and wraps the native HTML5 video player in Vue code. It exposes video events, and its controls, so they are accessible for the other Vue components in the Jam.<\/p>\n<\/li>\n

  2. \n

    videoplayer-track.vue<\/code> listens to the timeupdate<\/code> event, and based on the video duration, calculates the percentage played.<\/p>\n<\/li>\n

  3. \n

    And finally app.vue<\/code>. This is the file where everything comes together. From custom controls to listening to native events, to showing the state of the video in the custom controls.<\/p>\n<\/li>\n<\/ol>\n

    To see everything in action, feel free to check the CodeSandBox embedded below.<\/p>\n<\/div>\n\n\n

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

    Wrapping native HTML5 video in Vue.js<\/h2>\n

    The native HTML5 video tag is constructed in \u2018videoplayer.vue\u2019. It is able to receive props (the ones we add in app.vue<\/code>), and is able to pass these along to the video tag.<\/p>\n

    <template<\/span>><\/span>\n<video<\/span>\n  :src<\/span>=\"src\"<\/span>\n  :muted<\/span>=\"muted\"<\/span>\n  :autoplay<\/span>=\"autoplay\"<\/span>\n  :controls<\/span>=\"controls\"<\/span>\n  :loop<\/span>=\"loop\"<\/span>\n  :width<\/span>=\"width\"<\/span>\n  :height<\/span>=\"height\"<\/span>\n  :poster<\/span>=\"poster\"<\/span>\n  :preload<\/span>=\"preload\"<\/span>\n  :playsinline<\/span>=\"true\"<\/span>\n  ref<\/span>=\"player\"<\/span>\n\/><\/span>\n<\/template<\/span>><\/span>\n<script<\/span>><\/span>\nexport<\/span> default<\/span> {\n  name<\/span>: \"Videoplayer\"<\/span>,\n  props<\/span>: {\n    src<\/span>: { type<\/span>: String<\/span>, required<\/span>: true<\/span> },\n    controls<\/span>: { type<\/span>: Boolean<\/span>, required<\/span>: false<\/span>, default<\/span>: false<\/span> },\n    loop<\/span>: { type<\/span>: Boolean<\/span>, required<\/span>: false<\/span>, default<\/span>: false<\/span> },\n    width<\/span>: { type<\/span>: Number<\/span>, required<\/span>: false<\/span>, default<\/span>: 500<\/span> },\n    height<\/span>: { type<\/span>: Number<\/span>, required<\/span>: false<\/span>, default<\/span>: 281<\/span> },\n    autoplay<\/span>: { type<\/span>: Boolean<\/span>, required<\/span>: false<\/span>, default<\/span>: false<\/span> },\n    muted<\/span>: { type<\/span>: Boolean<\/span>, required<\/span>: false<\/span>, default<\/span>: false<\/span> },\n    poster<\/span>: { type<\/span>: String<\/span>, required<\/span>: false<\/span> },\n    preload<\/span>: { type<\/span>: String<\/span>, required<\/span>: false<\/span>, default<\/span>: \"auto\"<\/span> },\n  },\n<\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
    Notice the ref="player"<\/code> prop on the video tag. This allows you to reference the native HTML tag in Vue.js like so: this.$refs.player<\/code>.<\/p>\n
    The player ref<\/code> is used to send actions and to listen to events for the HTML5 video tag in Vue.<\/p>\n
    Methods to send actions to the player<\/h2>\n
    The videoplayer.vue<\/code> component has a bunch of functions to control the state of the native HTML5 player. Let\u2019s start with the basics: play()<\/code>, pause()<\/code>, togglePlay()<\/code>, mute()<\/code>, unmute()<\/code> and toggleMute()<\/code>. Note that some of the earlier code around the props has been omitted to keep the below code simple and focused on the basic functions.<\/em><\/p>\n
    export<\/span> default<\/span> {\n  name<\/span>: \"Videoplayer\"<\/span>,\n\t\/\/ keeping the state <\/span>\n\tdata() {\n    return<\/span> {\n      playing<\/span>: false<\/span>,\n      videoMuted<\/span>: false<\/span>,\n    };\n  },\n methods<\/span>: {\n    play() {\n      this<\/span>.$refs.player.play();\n      this<\/span>.setPlaying(true<\/span>);\n    },\n\n    pause() {\n      this<\/span>.$refs.player.pause();\n      this<\/span>.setPlaying(false<\/span>);\n    },\n\n    togglePlay() {\n      if<\/span> (this<\/span>.playing) {\n        this<\/span>.pause();\n      } else<\/span> {\n        this<\/span>.play();\n      }\n    },\n\n    setPlaying(state) {\n      this<\/span>.playing = state;\n    },\n\t\t\n\t\tmute() {\n      this<\/span>.$refs.player.muted = true<\/span>;\n      this<\/span>.setMuted(true<\/span>);\n    },\n\n    unmute() {\n      this<\/span>.$refs.player.muted = false<\/span>;\n      this<\/span>.setMuted(false<\/span>);\n    },\n\n    toggleMute() {\n      if<\/span> (this<\/span>.videoMuted) {\n        this<\/span>.unmute();\n      } else<\/span> {\n        this<\/span>.mute();\n      }\n    },\n\n    setMuted(state) {\n      this<\/span>.videoMuted = state;\n    }\n\t}\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    Some of this code looks a little redundant, especially the setPlaying<\/code> and setMuted<\/code> functions. But, these \u201csetter\u201d functions will be needed when you want to set the state of the player from another component while listening to video events.<\/p>\n
    Controlling the player from another component<\/h2>\n
    By creating a base video player which sends events, and does simple actions, you can potentially create many video player instances with different feature sets without bloating the player code itself. In this Jam, the code is using a \u201cscoped slot\u201d to pass information and actions from the native video player to the code added into the slot. The controls, video track, and duration are created separately and put into the slot where the player is instantiated.<\/p>\n
    This way you can make one player instance with just a play button, and another with a toggle play, a progress track, and a mute button.<\/p>\n
    This is how you pass functions and other info into the slot:<\/p>\n
    <template<\/span>><\/span>\n  <div<\/span>><\/span>\n    <video<\/span>\n      :src<\/span>=\"src\"<\/span>\n      :muted<\/span>=\"muted\"<\/span>\n      :autoplay<\/span>=\"autoplay\"<\/span>\n      :controls<\/span>=\"controls\"<\/span>\n      :loop<\/span>=\"loop\"<\/span>\n      :width<\/span>=\"width\"<\/span>\n      :height<\/span>=\"height\"<\/span>\n      :poster<\/span>=\"poster\"<\/span>\n      :preload<\/span>=\"preload\"<\/span>\n      :playsinline<\/span>=\"true\"<\/span>\n      ref<\/span>=\"player\"<\/span>\n    \/><\/span>\n    <slot<\/span>\n      name<\/span>=\"controls\"<\/span>\n      *:play<\/span>=\"play\"<\/span>\n      :pause<\/span>=\"pause\"<\/span>\n      :playing<\/span>=\"playing\"<\/span>\n      :toggle-play<\/span>=\"togglePlay\"<\/span>\n      :video-muted<\/span>=\"videoMuted\"<\/span>\n      :toggle-mute<\/span>=\"toggleMute\"<\/span>*\n    ><\/span><\/slot<\/span>><\/span>\n  <\/div<\/span>><\/span>\n<\/template<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
    In the example above the functions and state created earlier are passed into the slot called \u201ccontrols\u201d. When the slot is used by another component, that component receives all these properties and functions.<\/p>\n
    Use it like this:<\/p>\n
    <template<\/span>><\/span>\n  <videoplayer<\/span> src<\/span>=\"https:\/\/res.cloudinary.com\/demo\/video\/upload\/dog.mp4\"<\/span>><\/span>\n    <template<\/span> v-slot:controls<\/span>=\"{ togglePlay, toggleMute, playing, videoMuted }\"<\/span>><\/span>\n      <div<\/span> class<\/span>=\"videoplayer-controls\"<\/span>><\/span>\n        <button<\/span> @click<\/span>=\"togglePlay()\"<\/span>><\/span>{{ playing ? \"pause\" : \"play\" }}<\/button<\/span>><\/span>\n        <button<\/span> @click<\/span>=\"toggleMute()\"<\/span>><\/span>{{ videoMuted ? \"unmute\" : \"mute\" }}<\/button<\/span>><\/span>\n\t    <\/div<\/span>><\/span>\n\t\t<\/template<\/span>><\/span>\n\t<\/videoplayer<\/span>><\/span>\n<\/template<\/span>><\/span>\n\n<script<\/span>><\/span>\nimport<\/span> videoplayer from<\/span> \".\/components\/videoplayer\"<\/span>;\nexport<\/span> default<\/span> {\n  components<\/span>: {\n    videoplayer,\n  },\n}\n<\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
    Sending events from the native video to the player implementation<\/h2>\n
    Now that the \u201cscoped slot\u201d is working, you can use the Vue.js event emitter to send native video events to the app.vue<\/code> which implements videoplayer.vue<\/code>.<\/p>\n
    These are the most interesting events in most cases:<\/p>\n
    const<\/span> EVENTS = [\n  \"play\"<\/span>,\n  \"pause\"<\/span>,\n  \"ended\"<\/span>,\n  \"loadeddata\"<\/span>,\n  \"waiting\"<\/span>,\n  \"playing\"<\/span>,\n  \"timeupdate\"<\/span>,\n  \"canplay\"<\/span>,\n  \"canplaythrough\"<\/span>,\n  \"statechanged\"<\/span>,\n];\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    In the mounted<\/code> hook of the Vue component, when the video tag exists in the DOM, you can loop over these events, and start listening to them. Some code is omitted to make the example more clear. For the full code see the CodeSandBox link.<\/em><\/p>\n
    const<\/span> EVENTS = [\n  \"play\"<\/span>,\n  \"pause\"<\/span>,\n  \"ended\"<\/span>,\n  \"loadeddata\"<\/span>,\n  \"waiting\"<\/span>,\n  \"playing\"<\/span>,\n  \"timeupdate\"<\/span>,\n  \"canplay\"<\/span>,\n  \"canplaythrough\"<\/span>,\n  \"statechanged\"<\/span>,\n];\n\nexport<\/span> default<\/span> {\n  name<\/span>: \"Videoplayer\"<\/span>,\n\tmounted() {\n\t  this<\/span>.bindEvents();\n\t},\n\tmethods<\/span>: {\n\t  bindEvents() {\n\t    EVENTS.forEach((event<\/span>) =><\/span> {\n\t      this<\/span>.bindVideoEvent(event);\n\t    });\n\t  },\n\t\n\t  bindVideoEvent(which) {\n\t    const<\/span> player = this<\/span>.$refs.player;\n\t\n\t    player.addEventListener(\n\t      which,\n\t      (event) => {\n\t        this<\/span>.$emit(which, { event, player<\/span>: this<\/span> });\n\t      }\n\n\t    );\n\t  },\n\t}\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    On mounted<\/code> the bindEvents()<\/code> function loops over the list of pre-defined events and it fires off a bindVideoEvent()<\/code> function which, in turn, takes the video DOM node from this.$refs.player<\/code>, and adds an addEventListener<\/code> function for the event.<\/p>\n
    Now that the code is listening to the events from the native player, it uses the Vue event emitter to send events. It sends the native event data to itself and<\/em> the player instance. This is handy for the component implementing the video player.<\/p>\n
    This is how to listen to the events from the other side:<\/p>\n
    <template<\/span>><\/span>\n\t<videoplayer<\/span>\n\t\tsrc<\/span>=\"https:\/\/res.cloudinary.com\/demo\/video\/upload\/dog.mp4\"<\/span>\n\t\t@play<\/span>=\"onPlayerPlay\"<\/span>\n\t\t@pause<\/span>=\"onPlayerPause\"<\/span>\n\t\t@ended<\/span>=\"onPlayerEnded\"<\/span>\n\t\t@loadeddata<\/span>=\"onPlayerLoadeddata\"<\/span>\n\t\t@waiting<\/span>=\"onPlayerWaiting\"<\/span>\n\t\t@playing<\/span>=\"onPlayerPlaying\"<\/span>\n\t\t@timeupdate<\/span>=\"onPlayerTimeupdate\"<\/span>\n\t\t@canplay<\/span>=\"onPlayerCanplay\"<\/span>\n\t\t@canplaythrough<\/span>=\"onPlayerCanplaythrough\"<\/span>\n\t\t@statechanged<\/span>=\"playerStateChanged\"<\/span>><\/span>\n\n\t<!-- slot related stuff --><\/span>\n\n\t<\/videoplayer<\/span>><\/span>\n<\/template<\/span>><\/span>\n\n<script<\/span>><\/span>\nimport<\/span> videoplayer from<\/span> \".\/components\/videoplayer\"<\/span>;\nexport<\/span> default<\/span> {\n  components<\/span>: {\n    videoplayer,\n  },\n  methods<\/span>: {\n    onPlayerPlay({ event, player }) {\n      console<\/span>.log(event.type);\n      player.setPlaying(true<\/span>);\n    },\n    onPlayerPause({ event, player }) {\n      console<\/span>.log(event.type);\n      player.setPlaying(false<\/span>);\n    },\n    onPlayerEnded({ event, player }) {\n      console<\/span>.log(event.type);\n      player.setPlaying(false<\/span>);\n    },\n    onPlayerLoadeddata({ event }) {\n      console<\/span>.log(event.type);\n    },\n    onPlayerWaiting({ event }) {\n      console<\/span>.log(event.type);\n    },\n    onPlayerPlaying({ event }) {\n      console<\/span>.log(event.type);\n    },\n    onPlayerTimeupdate({ event }) {\n      console<\/span>.log({ event<\/span>: event.type, time<\/span>: event.target.currentTime });\n    },\n    onPlayerCanplay({ event }) {\n      console<\/span>.log(event.type);\n    },\n    onPlayerCanplaythrough({ event }) {\n      console<\/span>.log(event.type);\n    },\n\n    playerStateChanged({ event }) {\n      console<\/span>.log(event.type);\n    },\n  },\n};\n<\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
    By combining the \u201cscoped slot\u201d and the event listeners, you can do anything you need in order to ensure that the player looks and behaves the way you want each time you implement it.<\/p>\n
    Let\u2019s add a time indicator<\/h2>\n
    Now that all tools are in place, let\u2019s add a time indicator. For the time indicator, you need the current time of the video and the duration of the video. On top of that, you also need a function to convert seconds to a duration.<\/p>\n
    In app.vue<\/code>, you ask for the video duration<\/code> and the convertTimeToDuration<\/code> function. You also have to listen to the timeupdate<\/code> event of the native video<\/a> to get the currentTime<\/code> of the video.<\/p>\n
    Note that all other code is removed so the example stays simple.<\/em><\/p>\n
    <template<\/span>><\/span>\n  <videoplayer<\/span> \n\t\tsrc<\/span>=\"https:\/\/res.cloudinary.com\/demo\/video\/upload\/dog.mp4\"<\/span>\n\t\t@timeupdate<\/span>=\"onPlayerTimeupdate\"<\/span>><\/span>\n    <template<\/span> v-slot:controls<\/span>=\"{ duration, convertTimeToDuration }\"<\/span>><\/span>\n      <div<\/span> class<\/span>=\"videoplayer-controls\"<\/span>><\/span>\n        <div<\/span> class<\/span>=\"videoplayer-controls-time\"<\/span>><\/span>\n          {{ convertTimeToDuration(time) }} \/\n          {{ convertTimeToDuration(duration) }}\n        <\/div<\/span>><\/span>\n\t    <\/div<\/span>><\/span>\n\t\t<\/template<\/span>><\/span>\n\t<\/videoplayer<\/span>><\/span>\n<\/template<\/span>><\/span>\n\n<script<\/span>><\/span>\nimport<\/span> videoplayer from<\/span> \".\/components\/videoplayer\"<\/span>;\nexport<\/span> default<\/span> {\n  components<\/span>: {\n    videoplayer,\n  },\n\tdata() {\n    return<\/span> {\n      time<\/span>: 0<\/span>,\n    };\n  },\n  methods<\/span>: {\n\t\tonPlayerTimeupdate({ event }) {\n      this<\/span>.time = event.target.currentTime;\n    },\n\t}\n}\n<\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
    In videoplayer.vue<\/code>, you need to manage to get the duration<\/code> and create the code for the convertTimeToDuration<\/code> function.<\/p>\n
    For the duration<\/code>, update the bindVideoEvent<\/code> function from earlier. When the loadeddata<\/code> event hits the video, \u2018duration\u2019 becomes available.<\/p>\n
    data() {\n  return<\/span> {\n    duration<\/span>: 0<\/span>,\n  };\n},\nmethods<\/span>: {\n\tbindVideoEvent(which) {\n\t  const<\/span> player = this<\/span>.$refs.player;\n\t\n\t  player.addEventListener(\n\t    which,\n\t    (event) => {\n\t      if<\/span> (which === \"loadeddata\"<\/span>) {\n\t        this<\/span>.duration = player.duration;\n\t      }\n\t\n\t      this<\/span>.$emit(which, { event, player<\/span>: this<\/span> });\n\t    },\n\t    true<\/span>\n\t  );\n\t},\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    This is a simple function, used to parse seconds, and turn them into a duration. Add this one to your methods object in videoplayer.vue<\/code>:<\/p>\n
    convertTimeToDuration(seconds) {\n  return<\/span> [parseInt<\/span>((seconds \/ 60<\/span>) % 60<\/span>, 10<\/span>), parseInt<\/span>(seconds % 60<\/span>, 10<\/span>)]\n    .join(\":\"<\/span>)\n    .replace(\/\\b(\\d)\\b\/g<\/span>, \"0$1\"<\/span>);\n},\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    Conclusion<\/h2>\n
    Now that all conditions of working in the architecture are in place, it becomes clear it is very flexible, and adding the video player track component should be easy. Check the CodeSandBox link for the full example.<\/p>\n
    Happy coding!<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28448,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,371,303,315],"class_list":["post-28447","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-under-review","tag-video","tag-vue"],"acf":[],"yoast_head":"\nCreating a Custom Video Player in Vue.js<\/title>\n<meta name=\"description\" content=\"In this Media Jam you will learn how to create a video player with custom controls and event handling in Vue.js.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating a Custom Video Player in Vue.js\" \/>\n<meta property=\"og:description\" content=\"In this Media Jam you will learn how to create a video player with custom controls and event handling in Vue.js.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-18T22:03:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-01T21:01:57+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924512\/Web_Assets\/blog\/e8f187e504dba40f11ee32d9db88d6182e8186be-6016x4016-1_284485b041\/e8f187e504dba40f11ee32d9db88d6182e8186be-6016x4016-1_284485b041.jpg?_i=AA\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Creating a Custom Video Player in Vue.js\",\"datePublished\":\"2021-05-18T22:03:02+00:00\",\"dateModified\":\"2025-11-01T21:01:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924512\/Web_Assets\/blog\/e8f187e504dba40f11ee32d9db88d6182e8186be-6016x4016-1_284485b041\/e8f187e504dba40f11ee32d9db88d6182e8186be-6016x4016-1_284485b041.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Under Review\",\"Video\",\"Vue\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2021\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/\",\"name\":\"Creating a Custom Video Player in Vue.js\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924512\/Web_Assets\/blog\/e8f187e504dba40f11ee32d9db88d6182e8186be-6016x4016-1_284485b041\/e8f187e504dba40f11ee32d9db88d6182e8186be-6016x4016-1_284485b041.jpg?_i=AA\",\"datePublished\":\"2021-05-18T22:03:02+00:00\",\"dateModified\":\"2025-11-01T21:01:57+00:00\",\"description\":\"In this Media Jam you will learn how to create a video player with custom controls and event handling in Vue.js.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924512\/Web_Assets\/blog\/e8f187e504dba40f11ee32d9db88d6182e8186be-6016x4016-1_284485b041\/e8f187e504dba40f11ee32d9db88d6182e8186be-6016x4016-1_284485b041.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924512\/Web_Assets\/blog\/e8f187e504dba40f11ee32d9db88d6182e8186be-6016x4016-1_284485b041\/e8f187e504dba40f11ee32d9db88d6182e8186be-6016x4016-1_284485b041.jpg?_i=AA\",\"width\":6016,\"height\":4016},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating a Custom Video Player in Vue.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creating a Custom Video Player in Vue.js","description":"In this Media Jam you will learn how to create a video player with custom controls and event handling in Vue.js.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/","og_locale":"en_US","og_type":"article","og_title":"Creating a Custom Video Player in Vue.js","og_description":"In this Media Jam you will learn how to create a video player with custom controls and event handling in Vue.js.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/","og_site_name":"Cloudinary Blog","article_published_time":"2021-05-18T22:03:02+00:00","article_modified_time":"2025-11-01T21:01:57+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924512\/Web_Assets\/blog\/e8f187e504dba40f11ee32d9db88d6182e8186be-6016x4016-1_284485b041\/e8f187e504dba40f11ee32d9db88d6182e8186be-6016x4016-1_284485b041.jpg?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/"},"author":{"name":"","@id":""},"headline":"Creating a Custom Video Player in Vue.js","datePublished":"2021-05-18T22:03:02+00:00","dateModified":"2025-11-01T21:01:57+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/"},"wordCount":8,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924512\/Web_Assets\/blog\/e8f187e504dba40f11ee32d9db88d6182e8186be-6016x4016-1_284485b041\/e8f187e504dba40f11ee32d9db88d6182e8186be-6016x4016-1_284485b041.jpg?_i=AA","keywords":["Guest Post","Under Review","Video","Vue"],"inLanguage":"en-US","copyrightYear":"2021","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/","name":"Creating a Custom Video Player in Vue.js","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924512\/Web_Assets\/blog\/e8f187e504dba40f11ee32d9db88d6182e8186be-6016x4016-1_284485b041\/e8f187e504dba40f11ee32d9db88d6182e8186be-6016x4016-1_284485b041.jpg?_i=AA","datePublished":"2021-05-18T22:03:02+00:00","dateModified":"2025-11-01T21:01:57+00:00","description":"In this Media Jam you will learn how to create a video player with custom controls and event handling in Vue.js.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924512\/Web_Assets\/blog\/e8f187e504dba40f11ee32d9db88d6182e8186be-6016x4016-1_284485b041\/e8f187e504dba40f11ee32d9db88d6182e8186be-6016x4016-1_284485b041.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924512\/Web_Assets\/blog\/e8f187e504dba40f11ee32d9db88d6182e8186be-6016x4016-1_284485b041\/e8f187e504dba40f11ee32d9db88d6182e8186be-6016x4016-1_284485b041.jpg?_i=AA","width":6016,"height":4016},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-a-custom-video-player-in-vue\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating a Custom Video Player in Vue.js"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924512\/Web_Assets\/blog\/e8f187e504dba40f11ee32d9db88d6182e8186be-6016x4016-1_284485b041\/e8f187e504dba40f11ee32d9db88d6182e8186be-6016x4016-1_284485b041.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28447","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28447"}],"version-history":[{"count":4,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28447\/revisions"}],"predecessor-version":[{"id":39067,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28447\/revisions\/39067"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28448"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28447"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28447"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
    As you can see above, the default properties that the native HTML5 video tag<\/a> has been passed through with Vue.js.<\/p>\n